Select multiple with forms [and js(i know, know..)]

tha_mink

Ok...so I have this form. It has a <select> named "makes" and one named "models". I have the "models" select propegated by the choice selected in "makes" fired by a javascript onChange(). I do this using a javascript function. The "makes" and "models" are arrays in javascript (see code below) and originate from a mysql table. Everything works fine. But then, realizing that "models" had to be multiple and thus "models[]" i ran into a problem. If I make "models" into "models[]" , the js pukes because it doesn't know how to deal with that. (and in js, neither do I 8-) ). So here is what happens if I keep it as "models". Multiple selections get passed as

"url....?models=4&models=5&models=6"

/////////////the question///////////////////

Eventually I will be catching them through post and so I want to know if there is some way php side or javascript to crunch the above data into an array?

heres the offending code...(it's output since you don't need to see the generating code)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
</head>

<body>
<form name="testform" action="">
<input type="hidden" name="action" value="showme">
<b>Main Categories:</b><br>
<select name="makes" onChange="redirect(this.options.selectedIndex);">
<option>Choose A Make</option>

<option value="1">Audi</option>
<option value="2">Mercedes Benz</option>
<option value="3">BMW</option>

</select>
<br><br>

<b>Sub Categories:</b><br>
<select name="models" size="6" multiple>
<option>--------------------</option>
</select>
<br>
<input type="submit" name="submit" value="Submit">
</form>

<script language="JavaScript">
<!--

var groups = document.testform.makes.options.length;
var group = new Array(groups);
for (i = 0; i < groups; i++) group[i] = new Array();

// Articles = 1
// About Us = 2
// Links = 3
group[0][0] = new Option("Choose A Make", "java script:void(0);");

group[1][0] = new Option("5000","1");
group[1][1] = new Option("4000","2");
group[1][2] = new Option("100","3");
group[1][3] = new Option("200","4");
group[1][4] = new Option("A6","5");
group[1][5] = new Option("A4","6");
group[1][6] = new Option("A8","7");
group[1][7] = new Option("5000 Quattro","8");
group[1][8] = new Option("4000 Quattro","9");
group[1][9] = new Option("A6 Quattro","10");
group[1][10] = new Option("A8 Quattro","11");
group[1][11] = new Option("200 Quattro","12");
group[1][12] = new Option("100 Quattro","13");
group[1][13] = new Option("5000 Turbo Quattro","14");
group[1][14] = new Option("A8 L Quattro","15");
group[2][0] = new Option("300D","18");
group[2][1] = new Option("420SEL","19");
group[3][0] = new Option("325i","16");
group[3][1] = new Option("M3","17");
var temp = document.testform.models;
var tempB = document.testform.makes;

function redirect(x) {
    for (m = temp.options.length - 1; m > 0; m--) temp.options[m] = null;
    for (i = 0; i < group[x].length; i++) temp.options[i] = new Option(group[x][i].text, group[x][i].value);
    temp.options[0].selected = true;
    return true;
}


//-->
</script>
</body>
</html>

cgraz

I've never used this solution but it's right on php.net's web site.

http://www.php.net/manual/en/faq.html.php#faq.html.select-multiple

Cgraz

tha_mink

Nah...that doesn't really help since I can't name my select "models[]" without breaking the rest of my javascript...Unless I can but js is not my strong point.

I know how to process multiple just not in the way I am using it....

cgraz

Did you read through the link i sent you?

Note that if you are using JavaScript the [] on the element name might cause you problems when you try to refer to the element by name. Use it's numerical form element ID instead, or enclose the variable name in single quotes and use that as the index to the elements array, for example:

It gives you an example on how to get around this.

Cgraz

tha_mink

I did read it and I did use the advise and it didn't work. I changed the line...

var temp = document.testform.models;

var temp = document.testform.elements.['models[]'];

and even

var temp = document.form[0].elements.['models[]'];

And It still didn't work. I keep getting the error "Object Expected" which ( i think refers to the object - temp )

if you can see anything else....

tha_mink

Figured it out...just added this line to the form tag...

onSubmit="models.name=models.name + '[]'"

done and done.

Hack? yes. Works? definitly.

cgraz

awesome! i'll bookmark this for future reference.

Cgraz

x3ro

I changed the line...

var temp = document.testform.models;

to

var temp = document.testform.elements.['models[]'];

and even

var temp = document.form[0].elements.['models[]'];

And It still didn't work. I keep getting the error "Object Expected" which ( i think refers to the object - temp )

youll find its the dot before the open square bracket thats the problem. think about it. what do those square brackets mean? youre referencing objects that belong to the 'elements' object by name. so, the syntax should be the same as for an assoc array.

try:

var temp = document.testform.elements['models[]'];

and consign that messy onSubmit() hack to the dustbin 😛