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"> </div>
<input type="submit" value=" Save " >
</form>
Then checkpostalcode() uses ajax to insert the result of the following php page into the dynamictownselect div :
<select name="townname" >
<?php
$result = mysql_query("SELECT id,name FROM towndata WHERE postalcode='$postalcode' ORDER BY name ");
while ($row = mysql_fetch_array($result) ) {
$name=$row['name'];
$id=$row['id'];
?><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 :
-
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).
-
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.