AJAX Form fields

using an array, only updating last field

[dgsk387]

index.php:

[small]
<form method='post'>
<script type="text/javascript">
function GetXmlHttpObject(handler)
{
 var objXMLHttp=null
 if (window.XMLHttpRequest)
 {
 objXMLHttp=new XMLHttpRequest()
 }
 else if (window.ActiveXObject)
 {
 objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
 }
 return objXMLHttp
}
</script>
<?php
function build_select_options($display, $select_array, $selected = '') {
 $field = "\n<option value=''>$display</option>\n";
 
 for ($x = 0; $x < count($select_array); $x++) {
 if ($select_array[$x] == $selected) {
 $field .= "\t<option value='$select_array[$x]' selected>$select_array[$x]</option>\n";
 }
 else {
 $field .= "\t<option value='$select_array[$x]'>$select_array[$x]</option>\n";
 }
 }
 return $field;
}
for ($i=0; $i <=4; $i++) {
?>
<script type="text/javascript">
function stateChanged<?php echo $i;?>()
{
 if (xmlHttp.readyState==4 ¦¦ xmlHttp.readyState=="complete")
 {
 document.getElementById("ajaxSelect<?php echo $i;?>").innerHTML= xmlHttp.responseText;
 }
 else {
 //alert(xmlHttp.status);
 }
}
// Will populate data based on input
function htmlData<?php echo $i;?>(url, qStr)
{
 if (url.length==0)
 {
 document.getElementById("ajaxSelect<?php echo $i;?>").innerHTML=""; 
 return;
 }
 xmlHttp=GetXmlHttpObject()
 if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request");
 return;
 }
 url=url+"?"+qStr; 
 url=url+"&sid="+Math.random();
 xmlHttp.onreadystatechange=stateChanged<?php echo $i;?>;
 xmlHttp.open("GET",url,true) ;
 xmlHttp.send(null);
}
</script>
<?php
$countries = array("1", "2", "3");
echo "<p><ul class='info'><li><strong>Origin:</strong> <select name=\"country$i\" onchange=\"htmlData$i('drawCountrySub.php', 'c='+this.value+'&i=$i')\" />".build_select_options("Country", $countries, $_POST['country'.$i])."</select> ";
if ($_POST['country'.$i]!= "") {
echo "<script type='text/javascript'>
htmlData$i('drawCountrySub.php', 'c=".$_POST['country'.$i]."&city=".$_POST['city'.$i]."&i=".$i."');
</script>";
}
echo "<div id='ajaxSelect$i'> </div></li></ul></p>";
}//end of loop
?>
<input type="submit">

[/small]
drawCountrySub.php:

<?php
$i = $_GET['i'];
echo " <span class='info'>City:</span> <input type='text' name='city$i' value='".stripslashes(trim($_GET['city']))."' size='18'>";
?>

What this code does is you choose an option from the select field and it then uses ajax to draw a text box (and also another select field but I took that out to simplify the code).

I ran into problems when I tried to have more than one select field do this on the same page. So I tried putting it in the loop and giving the functions different names.

The Problem I have is that if you select an option for a few of the select fields and enter names into the city fields, when you submit the form it only redraws the city field for the last changed select box.
At one point I had that fixed and the main problem is that even if it does redraw the text fields for each changed select, it only display the value of the last text box in all the fields. Does that make sense?

On my page, there are other fields besides this and I check for errors and if there are errors, I still want to retain the select field and city field values so the user doesn't have to reenter all of that because they forgot something else.

Let me know if you need any more clarification. Thanks a lot.

[eelixduppy]

How have you made out with this? You should only be creating one instance of this new text box, right? It seems like you are remaking it over and over again and therefore it is losing its value? Not sure. Could you clarify your intentions?

[dgsk387]

Well that's the whole issue, I can't get this to work when there are multiple instances of it on the same page.

I use this script when someone uploads an image(s). The user might upload up to 5 images so I need to loop the code up to 5 times so that their is a separate ajax select field for each image.

I got that part to work except that sometimes the last select field overwrites all the other when you submit the form. So I'm having trouble keeping the values separate for each select field. I check for errors when the form is submitted, so if the user forgot to select an option on one of the select fields then it needs to redraw all the select fields and keep the appropriate value for those fields the user DID select an option for (that way they don't have to reselect options for each select field... only those they forgot).

Hope that helps.

Thanks!