Multiple select to JS array

Harry · 07-11-2003, 08:03 PM

I am trying to submit several forms each containing a multiple select combo box and pass the results to another page. The problem I am having is when I select several options, only the first option is being sent to the next page. For example in the following code if I were to select options 1,2,3 and b,d only the values of 11111 and bbbbb are sent to the next page. Can anyone tell me where I'm missing the boat on this one?

Thanks

Harry

<html>
<Head>
<script>
function send_data()
{
document.form3.elements['fld1[]'].value = document.form1.elements['fld1[]'].value;
document.form3.elements['fld2[]'].value = document.form2.elements['fld2[]'].value;
document.form3.submit();
return false;
}
</script>
</head>

<body><center>
<form name="form1" onsubmit="return send_data">
<select name="fld1[]" size = "5" multiple>
<option value="11111">1</option>
<option value="22222">2</option>
<option value="33333">3</option>
<option value="44444">4</option>
<option value="55555">5</option>
</select>
</form>

<form name="form2" onsubmit = "return send_data()">
<select name="fld2[]" size = "5" multiple>
<option value="aaaaa">a</option>
<option value="bbbbb">b</option>
<option value="ccccc">c</option>
<option value="ddddd">d</option>
<option value="eeeee">e</option>
</select><br>
<input type="submit">
</form>

<form name="form3" action="ary2.php" method="get">
<input type="hidden" name="fld1[]">
<input type="hidden" name="fld2[]">
<form>
</body>
</html>

Roy Sinclair · 07-11-2003, 09:40 PM

Talk about doing this the hard way! You are only getting the first value from each of those selects because that's all you requested and all you made space for in the third form.

Why three separate forms? Why not do this:

Code:

<html>
<Head>
</head>

<body><center>
<form name="form1" action="ary2.php" method="get">
<select name="fld1[]" size = "5" multiple>
<option value="11111">1</option>
<option value="22222">2</option>
<option value="33333">3</option>
<option value="44444">4</option>
<option value="55555">5</option>
</select>
<select name="fld2[]" size = "5" multiple>
<option value="aaaaa">a</option>
<option value="bbbbb">b</option>
<option value="ccccc">c</option>
<option value="ddddd">d</option>
<option value="eeeee">e</option>
</select><br>
<input type="submit">
<form>
</body>
</html>

This code is much simpler and you'll end up with the multiple values being posted. Notice that no script is needed either.

Harry · 07-12-2003, 12:37 AM

I wish it was that easy but I have a page that requires 6 forms on it. The code I sent here was just for an example of what I am trying to do.

Thanks for the reply anyway. This the best JS forum I have found.

Roy Sinclair · 07-14-2003, 04:16 PM

If you're going to allow multiple selects then your hidden form will have to contain as many fields as there are select options or you'll have to stack multiple results into a single field and then parse them out on the server side (or next page).

You should also be aware that when multiple selects are allowed the "selectIndex" value is pretty much worthless as it'll only tell you about one of the selected items. For multiple selects you have to iterate through the whole options list checking each option for whether it's selected or not.

Harry · 07-15-2003, 05:15 AM

Thanks Roy. I got it figured out now. I was able to create two functions to see what was selected and then I made a variable equal to the two functions concantenated together and it worked perfectly. Again, thanks for steering me in the right direction.