我有一个程序，用户输入发票编号，然后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，但我不知道如何让我曾经的函数查找不同的ID也许有什么。
感谢
使用类的另一种方法是使用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（而不是var parent = el.parentNode;）中，您需要向上爬几个父级才能找到实际的表元素，比如：
var parent = el.parentNode.parentNode.parentNode;