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功能多種形式

回答

相關問題