Javascript 不能;提交;xmlhttp.send()期间的表单
我正在使用xmlhttp更新我网站的后端,以便根据下拉选择动态更新显示的信息。我能够得到它,这样它就可以根据下拉列表成功地显示不同的“数据”。我的下一步就是挂断电话 下面是对文件“admin.php”的初始xmlhttp.send()请求Javascript 不能;提交;xmlhttp.send()期间的表单,javascript,php,html,ajax,forms,Javascript,Php,Html,Ajax,Forms,我正在使用xmlhttp更新我网站的后端,以便根据下拉选择动态更新显示的信息。我能够得到它,这样它就可以根据下拉列表成功地显示不同的“数据”。我的下一步就是挂断电话 下面是对文件“admin.php”的初始xmlhttp.send()请求 函数showUser(str){ 如果(str==“”){ document.getElementById(“txtHint”).innerHTML=“”; 返回; }否则{ if(window.XMLHttpRequest){ //IE7+、Firefox
函数showUser(str){
如果(str==“”){
document.getElementById(“txtHint”).innerHTML=“”;
返回;
}否则{
if(window.XMLHttpRequest){
//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest();
}否则{
//IE6、IE5的代码
xmlhttp=新的ActiveXObject(“Microsoft.xmlhttp”);
}
xmlhttp.onreadystatechange=函数(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
document.getElementById(“txtHint”).innerHTML=xmlhttp.responseText;
}
}
open(“GET”、“displaySQL.php?q=“+str,true”);
xmlhttp.send();
}
}
这将发送到我的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>";
}
if($tname==“工作订单”){
回声“
工作单编号
工作状态
工作类型/阶段
";
如果($result->num_rows>0){
//每行的输出数据
而($row=$result->fetch_assoc()){
回显“$row[“id”]。$row[“status”]。$row[“mainttype”]。”;
}
}
回声“
”;
回声“
新条目的状态:
正在完成的维护类型:
";
}
这将显示数据库中的数据以及浏览器中的表单。当我在表格上点击“提交”时。它不做我的q.php告诉它的任何事情。当我使用admin.php的旧格式(没有xmlhttp版本)时,我的q.php确实起作用,但在添加“中间人”时就不起作用了
是否有更好的方法插入表单?我确实希望它是基于下拉列表的动态的,因为这3个都有不同的形式
谢谢
更新-在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>
<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>
选择一个表:
约会
服务
地位
请选择要使用的表。。。
对您的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>
$(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();
}
});
});
以下是我对JQUERY所做的操作:
<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>
$(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();
}
});
});
所有这些都在这里工作:那么请求发送后GET的结果会转到哪里呢?第一页的GET会转到我的displaySQL.php文件。在大多数情况下,当您通过AJAX提交时,会在submit按钮或form submit事件上执行event.preventDefault(),并从那里触发AJAX调用。我认为这是通过老式的post提交表单,而忽略了AJAX。如果我的思维过程是正确的(可能不是,或者我不会有这个问题),“get”从displaySQL.php中进行“选择”,应该抓取表单并将其带回admin.php(原始文件)。理论上,我尝试使用我“拉入”的表单向SQL添加行并刷新我的表。*现在不显示SQL数据*表单应该由下拉列表的结果决定(正如我提到的,有多个和所有依赖于选择*标题是动态的,以及表单您是否看到了这一个: