Невозможно отправить форму во время xmlhttp.send()

Question

Я обновляю содержимое моего веб-сайта с помощью xmlhttp для динамического обновления отображаемой информации в соответствии с выпадающим списком. Я смог получить его так, чтобы он успешно показывал разные «данные» на основе раскрывающегося списка. Мой следующий шаг - это то, где меня повесили.

Вот начальный xmlhttp.send (запрос) на файле "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> 

Это посылает в мой файл displaySQL.php. Используя 1 из 3 выпадающих выборов в качестве примера, у меня есть:

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>"; 
} 

Это показывает данные из моей БД, а также форму на моем браузере. Когда я нажимаю «Отправить» в форме. Это не делает ничего, о чем говорит мой q.php. Мой q.php работает, когда я использую старую форму моего admin.php (без xmlhttp-версии), но не один раз добавляю «средний человек».

Есть ли лучший способ, которым я должен вставлять форму? Я хочу, чтобы она была динамичной, основанной на выпадающем списке, потому что каждая из трех имеет разные формы.

Спасибо.

UPDATE - Функция "" вызывается во время падения вниз отбора на 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> 

Answer 1

Сделано несколько изменений в вашем 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> 

С немного CSS вы можете просто скрыть статические элементы и заполнить строки таблицы результатом вашего AJAX.

.hidden { 
    display: none; 
} 

Вот что я сделал с 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(); 
     } 
    }); 
}); 

Это все работает здесь: http://jsfiddle.net/Twisty/43jcg03r/