Unable to "submit" form during xmlhttp.send()

Question

I am updating the back-end of my website using xmlhttp to dynamically update the information shown based on a dropdown selection. I was able to get it so that it will successfully show the different "data" based on the dropdown. My next step is where I am getting hung up.

Here is the initial xmlhttp.send() request on file "admin.php"

<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").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 (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","displaySQL.php?q="+str,true);
xmlhttp.send();
}
}
</script>

This sends to my displaySQL.php file. Using 1 of the 3 dropdown selections as an example, I have:

if ($tname == "WorkOrders") {

echo "<table>
<tr>
<th>Work Order Number</th>
<th>Work Status</th>
<th>Job Type/Stage</th>
</tr>";

if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<tr><td>".$row["id"]."</td><td>".$row["status"]."</td><td>".$row["mainttype"]."</td></tr>";
}
}
echo "<br><br>";
echo "<form name='newRow' METHOD='post' ACTION='q.php'>
Status of New Entry: <input type='text' value='Open' name='newStatus' /><br>
Type of Maintenance being completed: <input type='text' value='Software Maintenance' name='maintType' /><br>
<input type='submit' value='Add' name='newEntry' />
</form>";
}

This shows the data from my DB as well as the form on my browser. When I hit "submit" on the form. It does not do anything my q.php tells it to. My q.php does function when I use the old form of my admin.php (no xmlhttp version), but not once I add the "middle man".

Is there a better way I should be inserting the form? I do want it dynamic based on the dropdown because each of the 3 have different forms involved.

Thanks.

UPDATE - The "function" is being called during the drop down selection on admin.php

<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a table:</option>
<option value="1">Appointments</option>
<option value="2">Services</option>
<option value="3">Status</option>
</select>
</form>
<br>
<div id="txtHint"><b>Please select a table to work with...</b></div>

So where does the result of GET go to after the request is sent? — Twisty, Apr 10 '15 at 20:48
The GET from the first page goes to my displaySQL.php file. This does function (-it does reflect the data) — jpgerb, Apr 10 '15 at 20:49
In most cases, when you're submitting via AJAX you'd do an event.preventDefault() on the submit button or form submit event and trigger your AJAX call from there. I think this is submitting the form via old fashioned post and ignoring your AJAX. — bpeterson76, Apr 10 '15 at 20:49
Right, you perform an AJAX to displaySQL.php, the resulting form is returned. Where does that get rendered? — Twisty, Apr 10 '15 at 20:50
Twisty - If my thought process is right (which it's probably not or I wouldn't be having this problem) - the "GET" does the "SELECT" from displaySQL.php and SHOULD grab the form and bring it back to admin.php (original file). Theoretically, I'm trying to use that form that I "pulled" in to add lines to SQL and refresh my table. — jpgerb, Apr 10 '15 at 20:52
Sorry, I use JQuery a lot and missed the assignment: `document.getElementById("txtHint").innerHTML = xmlhttp.responseText;` So what executes `showUser()`? Also as was suggested, you may need to add a `preventDefault()` on your first form. — Twisty, Apr 10 '15 at 20:59
Updated the script above to show the execution of showUser(). I am not understanding the preventDefault() you are mentioning. @bpeterson76 - I'm running the first xmlhttp to obtain the data and determine which forms are displayed, how would you suggest I get those forms selected to be functional? — jpgerb, Apr 10 '15 at 21:21
updated. it was further down the form... it's the "display" portion of admin.php — jpgerb, Apr 10 '15 at 22:12
As I mentioned, I use JQuery a lot nowadays. Here is a jsFiddle that operates the way you are interested: http://jsfiddle.net/Twisty/43jcg03r/ I would suggest simplifying your PHP code so it just outputs the Table Rows. Since your Form appears static, just leave it in the admin.php page and show it when you need it. — Twisty, Apr 10 '15 at 22:17
The is dependent on the table, so I'll leave that in the PHP. I'll give this a shot. — jpgerb, Apr 10 '15 at 22:22
Ah okay that was not clear from your example. I made a few minor updates to my jsFiddle. Good Luck. — Twisty, Apr 10 '15 at 22:28

score -1 · Answer 1 · answered Apr 10 '15 at 22:33

Made a few changes to your HTML:

<select name="users">
    <option value="">Select a table:</option>
    <option value="1">Appointments</option>
    <option value="2">Services</option>
    <option value="3">Status</option>
</select>
<div id="txtHint"><b>Please select a table to work with...</b></div>
<table class="hidden" id="resultTable">
    <thead>
        <tr>
            <th>Work Order Number</th>
            <th>Work Status</th>
            <th>Job Type/Stage</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<br />
<br />
<form class="hidden" name='newRow' id="newRowForm" METHOD='post' ACTION='q.php'>Status of New Entry:
    <input type='text' value='Open' name='newStatus' />
    <br>Type of Maintenance being completed:
    <input type='text' value='Software Maintenance' name='maintType' />
    <br>
    <input type='submit' value='Add' name='newEntry' />
</form>

With a little CSS you can just hide the static elements and populate the Table Rows with the result of your AJAX.

.hidden {
    display: none;
}

Here is what I did with JQUERY:

$(function () {
    $("select[name='users']").on('change', function () {
        if ($(this).val() != "") {
            $.get(
              "displaySQL.php",
              {
                q: $("this").val()
              },
              function (resText) {
                // Assuming just the table body response
                $("#resultTable tbody").html(respText);
              }
            );
            $("#txtHint").hide();
            $("#resultTable").show();
            $("#newRowForm").show();
        } else {
            $("#txtHint").show();
            $("#resultTable").hide();
            $("#newRowForm").hide();
        }
    });
});

This is all working here: http://jsfiddle.net/Twisty/43jcg03r/

* Doesn't show SQL data for display now * Form should be determined by the results of the dropdown (as I mentioned there's multiple and all dependent on the selection * Headers are dynamic as well as the form — jpgerb, Apr 10 '15 at 22:39
Did you see this one: http://stackoverflow.com/questions/3991204/how-to-create-a-form-dynamically-using-javascript — Twisty, Apr 10 '15 at 22:45

Unable to "submit" form during xmlhttp.send()

1 Answers1