Dynamic select list in form?

I’m trying out some ajax in a form. The first part is an input field where the user can fill in the 4 numbers of a postal code. The second part is a div containing a dynamic select form that shows towns associated with that postal code. The total list of towns is about 2800 units long, so I can not show them all at once. Usually there are from 1 up to 5 towns associated with a certain postal code in my country, and then the user can select the right one in that list.

This is simplified code of my page :

<form method="post" action="index.php?submit=1">
<input type="text" name="postalcode" oninput="checkpostalcode(this.value);" size="4"  maxlength="4">
<div id="dynamictownselect">&nbsp;</div>
<input type="submit" value=" Save " >

Then checkpostalcode() uses ajax to insert the result of the following php page into the dynamictownselect div :

<select name="townname" >
$result = mysql_query("SELECT id,name FROM towndata WHERE postalcode='$postalcode' ORDER BY name ");		
   while ($row = mysql_fetch_array($result) ) {	
	?><option value="<?=$id?>"><?=$name?></option> <?php 
?> </select>	

Now, all of this is working. I fill in a postal code and then I get a small list of towns to select from. However when I submit the form it only saves ‘postalcode’ and not the ‘townname’ value from the dynamic list.

I assume there are 2 possible reasons why this goes wrong :

  1. there is some small stupid fault in my code, and I’ll have to check it again and again. But the theory behind this ajax form is correct so I can continue on what I have ? (I’m not asking for a complete code solution here).

  2. The page simply does not submit the townname value because that select list was not part of the orginal form when the page was loaded ? If that is the case, I’ll have to rework everything to make sure there is already an empty select list present from the start, and use ajax only to fill the options in the list ?

I guess answer 2 is the right one, just looking for confirmation about that kind of behaviour of forms+ajax.

Hi odoisc,

Nothing is going “wrong” here. With an option tag, the value within the “value” attribute is what will get submitted. What’s between the opening and closing option tag will just be displayed in the browser (unless you don’t specify a value attribute, in which case this value is what gets submitted).

You could append the “townname” to the value attribute using a delimiter like this

<option value="[postalcode] ^ [townname]">[townname]</option>

and then later explode the value to separate them.