我有一个程序，用户输入发票号码，然后 ajax 填写序列号、经销商名称、号码和发票金额。
发票金额不是固定的。出于本示例的目的，有两个发票 div，但可能有更多或更少。我对表单和 div 进行了不同的命名，但是当涉及到输入时，它们具有相同的名称和 ID。如果我有不同的 id，我认为我也需要，我不知道如何使用一个 java 脚本函数引用它们
HTML 代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<script>
function dealerinfo() {
str= "detinv="+document.getElementById("detinv").value + "&dettype="+document.getElementById("dettype").value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var splitResult = xmlhttp.response.split("/");
document.getElementById("detname").value=splitResult[0];
document.getElementById("detnum").value=splitResult[1];
document.getElementById("detamt").value=splitResult[2];
document.getElementById("detser").value=splitResult[3];
}
}
xmlhttp.open("POST", "deallookup.php");
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(str);
return false;
}
</script>
<div class="newboxes" id="newboxes1">
<form action="self.php" method="post" id="supplierform1" name="supplierform1">
Type: <input type="text" name="dettype" id="dettype" class="dettype" value = "C" >
<br>
Invoice Number: <input type="text" name="detinv" id="detinv" class="detinv" onblur="dealerinfo();">
<br>
Dealer Name :<input type="text" name="detname" id="detname" class="detname" ">
<br>
Amount:<input type="text" name="detamt" id="detamt" class="detamt" ">
<br>
Serial Number :<input type="text" name="detser" id="detser" class="detser" ">
<br>
Dealer Number:<input type="text" name="detnum" id="detnum" class="detnum" ">
<br>
<input type="submit" name="subbut" value="Submit" id="subbut">
<br><br><br>
</form>
</div>
<div class="newboxes" id="newboxes2">
<form action="self.php" method="post" name="supplierform2">
Type: <input type="text" name="dettype" id="dettype" class="dettype" value = "C" >
<br>
Invoice Number: <input type="text" name="detinv" id="detinv" class="detinv" onblur="dealerinfo();">
<br>
Dealer Name :<input type="text" name="detname" id="detname" class="detname" ">
<br>
Amount:<input type="text" name="detamt" id="detamt" class="detamt" ">
<br>
Serial Number :<input type="text" name="detser" id="detser" class="detser" ">
<br>
Dealer Number:<input type="text" name="detnum" id="detnum" class="detnum" ">
<br>
<input type="submit" name="subbut" value="Submit" id="subbut">
<br><br><br>
</form>
</div>
<br>
</body>
</html>
PHP 代码
<?
$db = "SalesView";
include("msiconnect.php");
if($_POST["dettype"]=='C'):
$sql = "SELECT dba_name, dealer_no, serialno, balancedue from sales where invoiceno = ".$_POST["detinv"]."";
$result = $link->query($sql);
$r = $result->fetch_array();
if($result->num_rows > 0):
$dealerinfo =$r["dba_name"]."/".$r["dealer_no"]."/".$r["balancedue"]."/".$r["serialno"];
else:
$dealerinfo ="Invoice Number not Found";
endif;
endif;
if($_POST["dettype"]=='P'):
$sql = "SELECT dba_name, dealer_no, total from parts where invoiceno = ".$_POST["detinv"]."";
$result = $link->query($sql);
$r = $result->fetch_array();
if($result->num_rows > 0):
$dealerinfo = $r["dba_name"]."/".$r["dealer_no"]."/".$r["total"];
else:
$dealerinfo = "Invoice Number not Found";
endif;
endif;
echo $dealerinfo;
?>
谢谢，我知道很多值得一看的东西。我确信我的表单中需要不同的 ID，但是我不知道如何让我的一次函数查找不同的 IDS 也许与此有关。
谢谢
最佳答案
使用类的另一种方法是使用 document.querySelectorAll 在父表单中按名称定位字段元素。它没有经过测试，因此您可能需要修改它 - 但它确实消除了对无效的重复 ID 的需要。
<script>
function dealerinfo( event ) {
var el=typeof(event.target)!='undefined' ? event.target : event.srcElement;
var parent = el.parentNode;
var str= "detinv="+parent.querySelectorAll('detinv')[0].value + "&dettype="+parent.querySelectorAll('dettype')[0].value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if( xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
cbdealerinfo.call( this, xmlhttp.response, parent );
}
}
xmlhttp.open("POST", "deallookup.php");
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(str);
}
function cbdealerinfo(response,parent){
/* parent will be the form */
var splitResult = response.split("/");
parent.querySelectorAll('detname')[0].value=splitResult[0];
parent.querySelectorAll('detnum')[0].value=splitResult[1];
parent.querySelectorAll('detamt')[0].value=splitResult[2];
parent.querySelectorAll('detser')[0].value=splitResult[3];
/* call the function to reset the fields */
resetfields.call( this, parent );
}
function resetfields( parent ){
var col=parent.querySelectorAll('input');
for( var n in col ) if( col[n] && col[n].nodeType==1 ) col[n].value='';
}
</script>
在上面的代码示例中，JavaScript 函数作为特定(或一系列)表单元素的 onblur 事件处理程序附加。原始代码中的父级是表单(文本输入包含在表单中 - 因此表单是父级。)
如果表单中有一个表格，如下所示:
<div class='newboxes'>
<form action='self.php' method='post'>
<table>
<tr>
<td>Type:</td>
<td><input type='text' name='dettype' class='dettype' value = 'C' ></td>
<td>Invoice Number:</td>
<td><input type='text' name='detinv' class='detinv' onblur='dealerinfo(event)'></td>
</tr>
<tr>
<td>Dealer Name:</td>
<td><input type='text' name='detname' class='detname' /></td>
<td>Amount:</td>
<td><input type='text' name='detamt' class='detamt' /></td>
</tr>
<tr>
<td>Serial Number:</td>
<td><input type='text' name='detser' class='detser' /></td>
<td>Dealer Number:</td>
<td><input type='text' name='detnum' class='detnum' /></td>
</tr>
<tr>
<td colspan=3>
<input type='submit' name='subbut' value='Submit'>
</td>
</tr>
</table>
</form>
</div>
父节点是包含元素，现在是一个td，它的父节点是tr，表格行的父节点是table >
table -> tr -> td -> input[type='text']
Great Grandparent -> Grandparent -> Parent -> child
您可能会发现在遍历此 html 时还需要考虑 tbody 标记，即:
table -> tbody -> tr -> td -> input[type='text']
Great Great Grandparent -> Great Grandparent -> Grandparent -> Parent -> Child
因此，在 javascript 函数 dealerinfo 中，您需要向上几个父级别才能找到实际的表格元素，而不是 varparent = el.parentNode;，像这样:
var parent = el.parentNode.parentNode.parentNode;
关于Javascript 函数多种形式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34315472/