Dynamic AJAX list not posting - php

Question

I have a dynamic drop down box which calls another PHP page. I've got it to work just how I want it.
Below is the part of the form:
<tr>
<td>
<p> Select a delivery date </p>
</td>
<td>
<select name='listdate' onchange='showDelivery(this.value)'>
<option value=''>select delivery type:</option>
<option value='forwardorder'>Forward Order</option>
<option value='byreturn'>By Return</option>
</select>
<div id='txtHint'>
<b>Change to drop down box to display delivery date</b>
</div>
</td>
</tr>
The Ajax
function showDelivery(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getDelivery.php?q="+str,true);
xmlhttp.send();
}
The php script
$q=$_GET["q"];
// And create a cid object
require_once $CID_INCLUDE_PATH . "/cid.php";
$cid = new CHCID();
if ($q == 'forwardorder')
{
echo"<td><select 'name'='deliveryDate'/> ";
$listCapacityDates = $cid->ListCapacity();
foreach($listCapacityDates as $x) {
echo "<option value='".$x."'>".$x."</option> </select>";
}
}
if ($q == 'byreturn')
{
echo"<div id='div1'>Enter By Return Date<input type='text''name='deliveryDate' />
</div>";
}
I know the problem, because the results from the Ajax drop downs are shown through the PHP pages when the form submits none of those values are submitted. But I'm not sure how I can even submit them? Any ideas?

Answer 1

echo"<td><select 'name'='deliveryDate'/> ";
should be :
echo "<td><select name='deliveryDate'/> ";
and
echo"<div id='div1'>Enter By Return Date<input type='text''name='deliveryDate' />
should be :
echo"<div id='div1'>Enter By Return Date<input type='text' name='deliveryDate' />
and:
if ($q == 'forwardorder')
{
echo"<td><select 'name'='deliveryDate'/> ";
$listCapacityDates = $cid->ListCapacity();
foreach($listCapacityDates as $x) {
echo "<option value='".$x."'>".$x."</option>";
}
echo "</select></td>";
}
</select> should be outside foreach

Answer 2

You seem to understand why it's not working, just not how to correct it, right?
When you return the data from your PHP page, it needs to be processed via the javascript.
Instead of returning,
echo "<option value='".$x."'>".$x."</option> </select>";
It should be possibly json.
{ val : key, val : key }
Then Javascript can insert it into the HTML DOM, then your form will recongnize the values when you submit the form.
As for the Javascript code, there are a few ways, jQuery has some plugins for handle it.
Otherwise I can dig around for some code, if someone doesn't beat me too it :)
Edit:
Off hand, I think this code should work.
It's untested, but hopefully will give more of an idea how to use it.
replace
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
with
var response = xmlhttp.responseText;
var select = document.getElementByName('listdate');
var option;
for(var i=0; i<response.length; i++)
{
option = document.createElement("OPTION");
option.text = response.key[i];
option.value = response.val[i];
select.options.add(option);
}