Updated form elements with DOM, but still not submitting data

I have a form where a user selects something in one field & then it generates something with an ajax request to load in another select field. This all works fine; however when I submit the form the data in the ajax generated form field isn't submitted with the rest of the form data.... I have used DOM methods so it should be updating the DOM so I don't get why it isn't submitting the data?

Here is some code from the page:


<form action="site_search1.php" name="search" method="get">
<tr>
<td colspan="2">
<select name="make" class="textfield1" id="make" onChange="getModels();">
<option value="0" selected>Fabricante</option>
<option value="any">Qualquer</option>
<?php
// get the car makes
$result = mysql_query("SELECT * FROM setup_make") or die (mysql_error());
$total = @mysql_num_rows($result);

$i = 0;

while ($i < $total)
{
$make_id = mysql_result($result, $i, 'make_id');
$make_name = mysql_result($result, $i, 'make_name');
echo "<option value='$make_id'>$make_name</option>";
$i++;
}
?>
</select></td>
<td colspan="2"><select name="search_cat" class="textfield1">
<option value="" selected>Categoria</option>
<option value="any">Qualquer</option>
<?php
// get the categorys
$result = mysql_query("SELECT * FROM setup_category") or die (mysql_error());
$total = @mysql_num_rows($result);

$i = 0;

while ($i < $total)
{
$cat_id = mysql_result($result, $i, 'category_id');
$cat_name = mysql_result($result, $i, 'category_name');
echo "<option value='$cat_id'>$cat_name</option>";
$i++;
}
?>
</select></td>
</tr>
<tr>
<td colspan="2">
<div id="model_list">
<select name="search_model" class="textfield1" disabled="disabled">
<option value="" selected>Seleccione o Modelo</option>
</select>
</div>

</td>


Here is the javascript code:


function try_object()
{
var obj = false;

if (window.XMLHttpRequest)
{
try
{
obj = new XMLHttpRequest();
}

catch(e)
{
obj = false;
}
}
else if (window.ActiveXObject)
{
try
{
obj = new ActiveXObject('Microsoft.XMLHTTP');
}

catch(e)
{
try
{
obj = new ActiveXObject('Msxml2.XMLHTTP');
}

catch(e)
{
obj = false;
}
}
}

return obj;
}

function getModels()
{
var foo = document.search.make.options[document.search.make.selectedIndex].value

if (foo == 0)
{
var box = 'model_list,search_model|textfield1|1=|1|Seleccione o Modelo';

build_box(box);

return;
}

else if (foo == 'any')
{
var box = 'model_list,search_model|textfield1|1=|0|Seleccione o Modelo=any|1|Qualquer';

build_box(box);

return;
}

obj = try_object();

if (obj)
{
var url = 'get_models.php?model=' + escape(foo);

obj.open('GET', url, true);

obj.onreadystatechange=function()
{
if (obj.readyState == 4)
{
if (obj.status == 200)
{
if (obj.responseText == 0)
{
alert('data needed to process your request was missing, try again!');
}
else if (obj.responseText == 1)
{
alert('the database is currently having difficulties, please try your request in few minutes!');
}
else
{
build_box(obj.responseText);
}
}
else
{
alert('problem retrieving the http data: ' + obj.statusText);
}
}
}

obj.send(null);
}
else
{
alert('Your browser does not support http request object!');
}

return;
}

function build_box(arg)
{

var parts = arg.split(',');

var p_el = document.getElementById(parts[0]);

while(p_el.hasChildNodes() == true)
{
p_el.removeChild(p_el.childNodes[0]);
}

parts = parts[1].split('=');

e_node = document.createElement('select');

var e_info = parts[0].split('|');

e_node.setAttribute('id',e_info[0]);

e_node.setAttribute('name',e_info[0]);

if (e_info[1].length > 0)
{
e_node.setAttribute('class',e_info[1]);
}

if (parseInt(e_info[2]) > 0)
{
e_node.setAttribute('disabled','disabled');
}

for(var i = 1; i < parts.length; i++)
{
var e_opts = parts[i].split('|');

var opt = document.createElement('option');

opt.setAttribute('value',e_opts[0]);

if (parseInt(e_opts[1]) > 0)
{
opt.setAttribute('selected','selected');
}

opt.appendChild(document.createTextNode(e_opts[2]));

e_node.appendChild(opt);
}

p_el.appendChild(e_node);

return;
}


Here is the code from the PHP file that ajax gets the data from:


<?php

include_once("setting.php");

$db_connect = mysql_connect($db_host, $db_username, $db_password) or die(mysql_error());
mysql_select_db($db_name, $db_connect) or die(mysql_error());

// Get the model & check if it is set

if (isset($_GET['model'])) {

$listing_make = trim ($_GET['model']);

if (!is_numeric ($listing_make) or $listing_make == '') {
$buffer = 'model_list,search_model|textfield1|1=|1|Seleccione o Modelo';
} else {

$result = mysql_query ("SELECT DISTINCT listing_model FROM listing WHERE listing_make='" . intval ( $listing_make ) . "' ORDER BY listing_id DESC;") or send_error ();

if (mysql_num_rows($result) > 0) {

$buffer = 'model_list,search_model|textfield1|0=|1|Seleccione o Modelo=any|0|Qualquer';

while ($next=mysql_fetch_assoc($result)) {
$buffer .= '=' . $next['listing_model'] . '|0|' . $next['listing_model'];
}

} else {
$buffer = 'model_list,search_model|textfield1|0=|0|Seleccione o Modelo=any|1|Qualquer';
}

mysql_free_result ($result);
}

echo ($buffer);

exit();
} else {
send_error (true);
}

function send_error ($type = false) {
if ($type) {
echo 0;
} else {
echo 1;
}
exit();
}

?>


Thanks a lot!

And you are sure the select elements aren't disabled at the time of submission? Forms also don't submit disabled form elements.

I took this part:


if (parseInt(e_info[2]) > 0)
{
e_node.setAttribute('disabled','disabled');
}


..out of the build_box() function to make sure & it still didn't work.

Post the generated html. The PHP is useless to us.

Ok..... here is an example of the data it will return to the ajax request:


model_list,search_model|textfield1|0=|1|Seleccione o Modelo=any|0|Qualquer=XS 8 Turbo|0|XS 8 Turbo

Just found out it works in IE but not in FF. :confused: