Ajax drop down menu not passing variables

**quickz** · 09-06-2006, 10:26 PM

The goal is to display different data depending on what the user inputs. The text box variables are being passed to the .php file but the drop down menu variables are not being passed to the .php file?

<html>
<body>
<script language="javascript" type="text/javascript">

</script>
<form name='myForm'>
<p> Age:
<input type='text' id='age' />
<br />
WPM:
<input type='text' id='wpm' />
<br />
Sex:
<select name="sex" id='sex' onChange="onreadystatechange(sex);">
<option>m</option>
<option selected>f</option>
</select>
</p>
<p>
<input type='button' onclick='ajaxFunction()' value='submit' />
</p>
</form>
<div id='ajaxDiv'>Your result will display here</div>
</body>
</html>

**Sir P** · 09-07-2006, 04:01 AM

Your code there looks right on the money ..

chuck a copy of ajax.php here up so I can check that for you

**mastercomputers** · 06:20 AM

You need more information for your options, there's no value specified and I'm not sure whether it's meant to default to the value of the label, or content but it should be written as such (however I extended the label to reflect what it is, the Value however is what will be sent), also, attributes are case sensitive and should be lowercase:

HTML Code:

<select id="sex" name="sex" onchange="onreadystatechange(sex)">
  <option label="Male" value="M">Male</option>
  <option label="Female" value="F" selected="selected">Female</option>
</select>

Other noticeable problems is that you're not encoding the values you're using in the URI:

Code:

var queryString = "?age=" + age + "&wpm=" + wpm + "&sex=" + sex;
SHOULD BE:
var queryString = "?age=" + encodeURIComponent(age) + "&wpm=" + encodeURIComponent(wpm) + "&sex=" + encodeURIComponent(sex);

And more problems, the form is not well formed, does not contain the minimum requirements of a form, and relies on Javascript for it to work, why not have an actual submit button, a form action, etc and if you don't want submission to take place, return false on the onsubmit attribute for the form, though it's best to use a function that will either allow the submission to take place or not.

Hope this helps.

Cheers,

MC