Javascript功能多种形式

我有这个程序，用户输入一个发票号码，然后阿贾克斯去并填写序列号，经销商名称，号码和发票金额。Javascript功能多种形式

没有静态数量的发票。为了这个例子的目的，有两个invoice 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 也许是这样的。

由于

来源

2015-12-16 Brandon C

不看你的代码，“我不知道如何让我的一次函数查找不同的ID” - **不**。使用类而不是ID。 ''div class ='data-c'...'然后你可以通过类名'$（“。data-c”）...'来获取所有匹配的类。类名不需要仅用于样式，它们也可以用于分组类似元素或用于选择（在这种情况下）。就个人而言，我用'data-'作为前缀，以便清楚它是数据指示符，而不是样式指示符，但这只是首选项 - 无所谓您称之为类[这可能与您的问题完全无关。 ] –

的另一种方法使用类是使用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

你可能会发现你还需要因素在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;

来源

2015-12-16 15:30:43 RamRaider

谢谢。我对javascript/jquery非常陌生。所以，当我在IE上运行调试模式下，我收到一条消息，说无法获取未定义或空引用的属性'目标'像var el = typeof（event.target）我想知道这是什么意思。谢谢拉姆 –

啊 - 我忘了提及，在HTML中，当你调用函数应该是这样的：'onblur ='dealerinfo（event）'' – RamRaider

感谢我的想法哈哈。那么就把这个错误带走了，现在是这个。无法获得未定义或空引用的属性“值”。在var str。我确实拿走了[0]，没有更多的错误。然而，该方案没有按照我需要的方式工作。所以我不确定它获得了应有的价值。再次感谢 –

Javascript功能多种形式

回答

相关问题