使用javascript嵌入div中的html表单

Question

I am using a HTML form, but some of the input and select boxes are loaded with Ajax and put into a div that appears when certain criteria is met

The thing is when I submit the form the results do not include the data that was loaded from the div, but does include form data that is on the main html page

Please help!

Ajax:

    function showFormData(str) {    
    if (str == "") {
        document.getElementById("showFormData").innerHTML = "";
        return;
    } else {
        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 (this.readyState == 4 && this.status == 200) {
                document.getElementById("showFormData").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","getFormData.php?model_id="+str,true);
        xmlhttp.send();
        showSpecData(str);
    }
}

Main page:

echo "<form action=\"temp_page_checkformdata.php\" method=\"post\">
";
echo "<select name=\"manufacturers\" onchange=\"showModels(this.value)\">
";
echo "<option selected value=\"\"></option>
";
echo "<option value=\"Test\">Test</option>
";
echo "</select>
";
echo "<div id=\"modelData\"></div><div id=\"showFormData\"></div>
";
echo "</form>
";

getFormData.php

$res = mysql_query("SELECT * FROM formdata WHERE manditory = '1'");
echo "<div id=\"manditorytests\">";
while ($result = mysql_fetch_array($res)) {
echo $result['test_name'] . " " . $result['form_html']. "<br>";
}
echo "</div>";
echo "<div id=\"machinetests\">";
while ($testNames = mysql_fetch_array($getModelFormData)) {
$res = mysql_query("SELECT * FROM formdata WHERE id = '".$testNames['test_id']."' AND manditory = '0'");
while ($result = mysql_fetch_array($res)) {
echo $result['test_name'] . " " . $result['form_html']. "<br>";
}
}
echo "</div>";
echo "<input type=\"submit\" name=\"SubmitButton\" value=\"Submit\">";

Answer 1

Instead of directing the form to submit the data, have the button click fire a function (preventDefault) and package the data into an object and send that via AJAX. If you are using jQuery you can drop this in as the data payload. If you are using straight Javascript you might have to stringify it and then unpack it on the server. This also gives you a chance to do any input validation prior to sending to the server.