Question

我正在使用xmlhttp更新我网站的后端，以根据下拉选项动态更新显示的信息。我能够得到它，以便它能成功显示不同的数据＆＃34;基于下拉列表。我的下一步是我被挂断了。

这是文件中的初始xmlhttp.send（）请求＆＃34; admin.php＆＃34;

<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文件。使用3个下拉选项中的1个作为示例，我有：

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

这显示了我的数据库中的数据以及浏览器上的表单。当我点击＆＃34;提交＆＃34;在表格上。它没有做我的q.php告诉它的任何事情。当我使用我的admin.php（没有xmlhttp版本）的旧形式时，我的q.php确实起作用，但是一旦我添加＆＃34;中间人＆＃34;就没有了。

我应该更好地插入表单吗？我确实希望它基于下拉列表动态，因为3中的每一个都有不同的形式。

感谢。

更新 - ＆＃34;功能＆＃34;在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/

无法提交＆＃34; xmlhttp.send（）期间的表单

1 个答案: