Form does not validate in my selection box

Dev Shed Forums Sponsor:

November 23rd, 2012, 08:05 AM

javbegginer

Registered User

Join Date: Nov 2012

Posts: 17

Time spent in forums: 5 h 57 m 9 sec
Reputation Power: 0

Form does not validate in my selection box

Code:

<html>
<head>
<title>PDOC-Handoff</title>
<script type='text/javascript'>
var gwaping = [];
var mathematics = ["basic_math","intermidiate_math","advance_math"];
 
 var b_math = ["addition","subtraction","division","multiplication"];
 <!--var i_math = ["fraction","pi","roman_numerals","integers"];
 <!--var i_math = ["algebra","calculus","hexa","analytical"];
 
 var compo = [];
 gwaping ["basic_math"] = b_math
 <!--gwaping ["intermidiate_math"] = i_math
 <!--gwaping ["advance_math"] = a_math
 
 

gwaping["startList"] = ["1-Math","2-Science", "3-Politics", "4-Phisical Ed", "5-Homeroom"]
gwaping["1-Math"] = mathematics
gwaping["2-Science"] = mathematics
gwaping["3-Politics"] = mathematics
gwaping["4-Phisical Ed"] = mathematics
gwaping["5-Homeroom"] = mathematics
gwaping["addition"] = mathematics



var nLists = 4; // number of select lists in the set

function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms['pogi']['List'+i].length = 1;
document.forms['pogi']['List'+i].selectedIndex = 0;
}
var nCat = gwaping[currCat];
for (each in nCat) {
var nOption = document.createElement('option'); 
var nData = document.createTextNode(nCat[each]); 
nOption.setAttribute('value',nCat[each]); 
nOption.appendChild(nData); 
currList.appendChild(nOption); 
} 
}

function getValue(L4, L3, L2, L1) {
alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3 + "\n" + L4);
}

function init() {
fillSelect('startList',document.forms['pogi']['List1'])
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
</script>
</head>
</script>
<body>
<form name="pogi" action="">
<table border="1">
  <tr>
    <td>
      <p>Select Subject</p>
    </td>
    <td><p>Select topic 1</p></td>
	<td><p>Select topic 2</p></td>
	<td><p>Select topic 3</p></td>
	</tr>
<tr>
<td>



<select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
<option selected>Select item</option>
</select>

</td>



<td>
<select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Select item</option>
</select>

</td>



<td>

<select name='List3' onchange="fillSelect(this.value,this.form['List4'])">
<option selected >Select item</option>
</select>

</td>

<td>
<select name='List4' size="2"  multiple="yes" onchange="getValue(this.form['List4'].value, this.form['List3'].value, 
this.form['List2'].value, this.form['List1'].value)">
<option selected >Select item(s)</option>
</select>

</td>
</tr>
</form>
</body>
</html>

Last edited by Kravvitz : November 26th, 2012 at 02:52 PM. Reason: added [code] tags

November 23rd, 2012, 08:26 AM

Jacques1

pollyanna

Join Date: Jul 2012

Location: Germany

Posts: 1,834

Time spent in forums: 1 Month 2 Weeks 1 Day 1 h 44 m 46 sec
Reputation Power: 811

Hi,

this isn't "The JavaScript/HTML debugging service". If you have a concrete question and show us what you've done and which errors you got, we'll help you. And use [ CODE ] tags, please.

November 23rd, 2012, 09:00 AM

javbegginer

Registered User

Join Date: Nov 2012

Posts: 17

Time spent in forums: 5 h 57 m 9 sec
Reputation Power: 0

Hi,

Sorry if this is posted in wrong location, I admit this is my 1st time to use a forum, can you help me guide on where should I place this and use the code tags

November 23rd, 2012, 09:19 AM

Jacques1

pollyanna

Join Date: Jul 2012

Location: Germany

Posts: 1,834

Time spent in forums: 1 Month 2 Weeks 1 Day 1 h 44 m 46 sec
Reputation Power: 811

Quote:

Originally Posted by javbegginer

Sorry if this is posted in wrong location,

No, I meant that we're not a debugging machine where you put your faulty JavaScript in and get the correct version back.

What's your concrete problem? What have you tried? What error message did you get?

Quote:

Originally Posted by javbegginer

I admit this is my 1st time to use a forum, can you help me guide on where should I place this and use the code tags

There's a "#" button above the text area when you write or edit a posting. Mark your code and then click the button to wrap it in [ CODE ] tags.

November 23rd, 2012, 09:54 AM

javbegginer

Registered User

Join Date: Nov 2012

Posts: 17

Time spent in forums: 5 h 57 m 9 sec
Reputation Power: 0

Thanks, actually I only copied this code from some sites and did some research on understanding the java as well, going to my problem, the code really validates on what I choose on the selection boxes, the only only thing is the last selection box :

Code:

<select name='List4' size="2" multiple="yes" onchange="getValue(this.form['List4'].value, this.form['List3'].value, this.form['List2'].value, this.form['List1'].value)"> <option selected >Select item(s)</option> </select>

when I choose multiple items it didn't validate all, only one.
you can also try it
<Math> - <basic_math> - <addition> +<2 items>

November 23rd, 2012, 10:50 AM

Jacques1

pollyanna

Join Date: Jul 2012

Location: Germany

Posts: 1,834

Time spent in forums: 1 Month 2 Weeks 1 Day 1 h 44 m 46 sec
Reputation Power: 811

This has nothing to do with validation (checking the correctness of user input). What you want is get all selected options of a selection box.

The solution to this is to go through all options and collect the selected ones in an array:

Code:

function getAllSelections(box) {
	var options = box.options;
	var selectedOptions = [];
	for (var i = 0; i < options.length; i++)
		if (options[i].selected)
			selectedOptions[i] = options[i].value;
	return selectedOptions;
}

This function takes a "select" element and returns the values of all selected "option" elements as an array.

Of course you'll also have to change your getValue() function to also work with arrays -- or you make a string out of the array before you pass it to getValue().

November 26th, 2012, 01:41 AM

javbegginer

Registered User

Join Date: Nov 2012

Posts: 17

Time spent in forums: 5 h 57 m 9 sec
Reputation Power: 0

Hi Jacques
Thank you for your help, I know this is the best solution for my concern but I've trying to insert this function on the code but unfortunately I cant make it work. can you help me out on these?

November 26th, 2012, 08:41 AM

Jacques1

pollyanna

Join Date: Jul 2012

Location: Germany

Posts: 1,834

Time spent in forums: 1 Month 2 Weeks 1 Day 1 h 44 m 46 sec
Reputation Power: 811

You don't really have to change anything in your current code. Just replace

Code:

this.form['List4'].value

with

Code:

getAllSelections(this.form['List4'])

in onchange="getValue(...)"

In your alert(), the array will appear as a comma separated list of its elements.

Comments on this post

javbegginer agrees!

November 26th, 2012, 02:51 PM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,830

Time spent in forums: 6 Months 1 Day 16 h 39 m 44 sec
Reputation Power: 4192

Welcome to DevShed Forums, javbegginer.

By the way, using checking the appName is not very good practice. Object detection should be used instead. Also attachEvent does not have a 3rd argument like addEventListener does.

Code:

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

would become

Code:

window.addEventListener ? addEventListener('load', init, false) : (window.attachEvent ? attachEvent('onload', init) : null);

P.S. It would be helpful if you put your code between [code][/code] tags in the future. I added them for you this time.

Comments on this post

javbegginer agrees!

__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

Remember people spend most of their time on other people's sites (so don't violate web design conventions).

#10

November 26th, 2012, 08:53 PM

javbegginer

Registered User

Join Date: Nov 2012

Posts: 17

Time spent in forums: 5 h 57 m 9 sec
Reputation Power: 0

Quote:

Originally Posted by Kravvitz

Welcome to DevShed Forums, javbegginer.

By the way, using checking the appName is not very good practice. Object detection should be used instead. Also attachEvent does not have a 3rd argument like addEventListener does.

Code:

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

would become

Code:

window.addEventListener ? addEventListener('load', init, false) : (window.attachEvent ? attachEvent('onload', init) : null);

P.S. It would be helpful if you put your code between [code][/code] tags in the future. I added them for you this time.

Hi Kravvitz,
Thank you for your advise, I'll do take a note of that. It feels good to know the proper usage of java on my progressive learning

#11

November 26th, 2012, 09:58 PM

javbegginer

Registered User

Join Date: Nov 2012

Posts: 17

Time spent in forums: 5 h 57 m 9 sec
Reputation Power: 0

Quote:

Originally Posted by Jacques1

You don't really have to change anything in your current code. Just replace

Code:

this.form['List4'].value

with

Code:

getAllSelections(this.form['List4'])

in onchange="getValue(...)"

In your alert(), the array will appear as a comma separated list of its elements.

Jacques1

Thank you very much! It work well on your advice, I add the lines that you suggested on the code with this:

Code:

 
<html>
<head>
<title>PDOC-Handoff</title>
<script type='text/javascript'>
var gwaping = [];
var mathematics = ["basic_math","intermidiate_math","advance_math"];
 
 var b_math = ["addition","subtraction","division","multiplication"];
 <!--var i_math = ["fraction","pi","roman_numerals","integers"];
 <!--var i_math = ["algebra","calculus","hexa","analytical"];
 
 var compo = [];
 gwaping ["basic_math"] = b_math
 <!--gwaping ["intermidiate_math"] = i_math
 <!--gwaping ["advance_math"] = a_math
 
 

gwaping["startList"] = ["1-Math","2-Science", "3-Politics", "4-Phisical Ed", "5-Homeroom"]
gwaping["1-Math"] = mathematics
gwaping["2-Science"] = mathematics
gwaping["3-Politics"] = mathematics
gwaping["4-Phisical Ed"] = mathematics
gwaping["5-Homeroom"] = mathematics
gwaping["addition"] = ["1+1","2+2","3+3"]
gwaping["subtraction"] = ["1-1","2-2","3-3"]
gwaping["division"] = ["1/1","2/2","3/3"]
gwaping["multiplication"] = ["1*1","2*2","3*3"]


var nLists = 4; // number of select lists in the set

function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms['pogi']['List'+i].length = 1;
document.forms['pogi']['List'+i].selectedIndex = 0;
}
var nCat = gwaping[currCat];
for (each in nCat) {
var nOption = document.createElement('option'); 
var nData = document.createTextNode(nCat[each]); 
nOption.setAttribute('value',nCat[each]); 
nOption.appendChild(nData); 
currList.appendChild(nOption); 
} 
}

function getValue(L4, L3, L2, L1) {
alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3 + "\n" + L4);
}
//function getAllSelections(L4, L3, L2, L1) {
	//var options = box.options;
	//var selectedOptions = [];
	//for (var i = 0; i < options.length; i++)
		//if (options[i].selected)
			//selectedOptions[i] = options[i].value;
	//return selectedOptions;
	//alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3 + "\n" + L4);
//}

function init() {
fillSelect('startList',document.forms['pogi']['List1'])
}

function getAllSelections(L4) {
	var options = L4.options;
	var selectedOptions = [];
	for (var i = 0; i < options.length; i++)
		if (options[i].selected)
			selectedOptions[i] = options[i].value;
	return selectedOptions;
}

window.addEventListener ? addEventListener('load', init, false) : (window.attachEvent ? attachEvent('onload', init) : null);
</script>
</head>
</script>
<body>
<form name="pogi" action="">
<table border="1">
  <tr>
    <td>
      <p>Select Subject</p>
    </td>
    <td><p>Select topic 1</p></td>
	<td><p>Select topic 2</p></td>
	<td><p>Select topic 3</p></td>
	</tr>
<tr>
<td>



<select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
<option selected>Select item</option>
</select>

</td>



<td>
<select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Select item</option>
</select>

</td>



<td>

<select name='List3' onchange="fillSelect(this.value,this.form['List4'])">
<option selected >Select item</option>
</select>

</td>

<td>
<select name='List4' size="2" multiple="yes" onchange="getValue(getAllSelections(this.form['List4']), this.form['List3'].value, 
this.form['List2'].value, this.form['List1'].value)">
<!--<option selected >Select item(s)</option>-->
</select>

</td>
</tr>
</form>	
</body>
</html>

One more thing (sorry to bug you again) the getvalue on my alert respond with a comma “,” even I select one item:

Code:

Your selection was:-
            1-Math
            Basic_math
            Addition
            ,1+1

Which part should I edit to make the alert respond like this:

Code:

Your selection was:-
1-Math Basic_math Addition 1+1

I’ve tried to replace the some line but it didn’t work using the array thing, the one I saw online using this:

Code:

alert("Your selection was:- \n" + L1.option + "\n" + L2.option + "\n" + L3.option + "\n" + L4.option);
}

#12

November 26th, 2012, 11:57 PM

Kravvitz

CSS & JS/DOM Adept

Join Date: Jul 2004

Location: USA

Posts: 19,830

Time spent in forums: 6 Months 1 Day 16 h 39 m 44 sec
Reputation Power: 4192

Quote:

Originally Posted by javbegginer

It feels good to know the proper usage of java on my progressive learning

Java and JavaScript are two rather different languages. The latter was named after the former but they don't have very much in common.

Comments on this post

javbegginer agrees: yeah, Ill do remember that - thanks!

#13

November 27th, 2012, 12:46 AM

Jacques1

pollyanna

Join Date: Jul 2012

Location: Germany

Posts: 1,834

Time spent in forums: 1 Month 2 Weeks 1 Day 1 h 44 m 46 sec
Reputation Power: 811

Quote:

Originally Posted by javbegginer

Which part should I edit to make the alert respond like this:

Code:

Your selection was:-
1-Math Basic_math Addition 1+1

In the getAllSelections() function, replace

Code:

selectedOptions[i] = options[i].value;

with

Code:

selectedOptions.push(options[i].value);

Otherwise the indices of the selectedOptions array won't be correct, causing the additional commas.

Comments on this post

javbegginer agrees: Thanks, it works sweetly!

#14

November 27th, 2012, 03:06 AM

javbegginer

Registered User

Join Date: Nov 2012

Posts: 17

Time spent in forums: 5 h 57 m 9 sec
Reputation Power: 0

Quote:

Originally Posted by Jacques1

In the getAllSelections() function, replace

Code:

selectedOptions[i] = options[i].value;

with

Code:

selectedOptions.push(options[i].value);

Otherwise the indices of the selectedOptions array won't be correct, causing the additional commas.

Sweetness, thank you for your solutions! I also did tried to make the response result with spaces using this in the code:

Code:

function getValue(L4, L3, L2, L1) {
alert("Your selection was:- \n" + L1 + " " + " " + L2 + " " + L3 + " " + L4);
}

got the result that I wanted for

Code:

Your selection was:-
1-Math Basic_math Addition 1+1

#15

December 6th, 2012, 01:41 PM

javbegginer

Registered User

Join Date: Nov 2012

Posts: 17

Time spent in forums: 5 h 57 m 9 sec
Reputation Power: 0

Hi,

Its me again, well I made a change on the code w/ almost the same idea above. I got the same problem again that when I select Math and do a multiple selection on the second selectionbox the alert only reports 1 item.

sample:
slection is: Math + subtraction, addidtion, multiplication
alert should be: Math Request for subtraction, addition, multiplication

this is the actual code:

Code:

<html>
<head>
<title>OHAB School</title>
<script type='text/javascript'>

function toggle(tbl_show,total_tbl)
     {
         for (i=1;i<total_tbl+1;i++)
         {
        eval("document.getElementById(\"thetbl"+i+"\").style.display='none'");
        }
         if (tbl_show!="") {     
             obj=document.getElementById("thetbl"+tbl_show);
             obj.style.display='';
             }
     }

function updatehosts(selectedchostgroup){
hostslist.options.length=0
if (selectedhostsgroup>0){
for (i=0; i<hosts[selectedhostsgroup].length; i++)
hostslist.options[hostslist.options.length]=new Option(hosts[selectedhostgroup][i].split("|")[0], hosts[selectedhostgroup][i].split("|")[1])
}
}
<!-- Math Button -->
function enable_bld_button(){    
   document.pogi.bld_button.disabled=false 
}

function MathAlert() {
alert("Math request for "+ 
           document.getElementById("build_lst").value);
      }

window.addEventListener ? addEventListener('load', init, false) : (window.attachEvent ? attachEvent('onload', init) : null);
</script>
</head>
<body >
<form name="pogi">
<table border="1">
  <tr>
    <td width="50%">
      <p>Select task</p>
    </td>
    <td>
     <select name="select_task" onchange="toggle(this.value,2)"> 
  <option value="">---SELECT ONE---</option>
  <option value="1">1 - Math</option>
  <option value="2">2 - Math with Science</option>
  <option value="3">3 - Homeroom</option>
  <option value="4">4 - P.E.</option>
  <option value="5">5 - Religion</option>
  <option value="6">6 - Others</option>
  </select>
    </td>
</tr>

<table border="1" id="thetbl1" style="display:none">
<tr>
   <td width="50%" align='center'><p>Select a component</p></td>
  <td ><select size="3" name="build_list" multiple="yes" id="build_lst" onchange="enable_bld_button()"> 
  <option>Select Item</option>
  <option>Addition</option>
  <option>Subtraction</option>
  <option>Multiplication</option>
  <option>Division</option> 
  </select></td>
   </td>   
</tr>
   <tr>
   <td align='center'><p>Exceute</p></td>
   <td align='center'><input type='button' name="bld_button" disabled value='COMMIT' onclick="MathAlert()")></td>
   </tr>
</table>

</br>
<table border="1" id="thetbl2" style="display:none">
</tr>
<tr>
   <td><p>Select a Topoc1</p></td>
   <td><p>Select a Topic2</p></td>
   <td><p>Select a Topic3</p></td>   
</tr>
<tr>
  <td ><select name="selectionField" multiple="yes" > 
  <option>Physics</option>
  <option>Chemistry</option>
  <option>Anatomy</option>
  
  </select></td>
   <td>
  <select size="3" name="subs" onChange="updatehosts(this.selectedIndex)" style="width: 150px"> 
  <option value="">-Select a Subject-</option>
  <option value="chem01">Chemicals</option>
  <option value="subs01">Substance</option>
  <option value="lab01">Lab</option>
   </select> 
  </td>
  <td ><select select name="hosts" size="3" style="width: 150px"> 
  </select>
  </td>
  </tr>
</table>
   </table>     
<table border="1" id="thetbl2" style="display:none">
   <tr >
   <td width="50%"><p>Select a carrier</p></td>
   <td><p>Select a component(s)</p></td>
</tr>
</table>
<form>
</body>
</html>

I've done tweaking on the script with something like this:

Code:

function getAllSelections("thetbl1") {
	var options = thetbl1".options;
	var selectedOptions = [];
	for (var i = 0; i < options.length; i++)
		if (options[i].selected)
			selectedOptions.push(options[i].value);
	return selectedOptions;
}

but non of them works

Form does not validate in my selection box

Developer Shed Advertisers and Affiliates