通過$ _Post發送javascript動態DOM輸入在Firefox/Chrome中不起作用

我有一個使用javascript動態添加新行的表單。表單輸入名稱是一個數組「items」。該表單使用POST方法將變量發送到php腳本，但在php腳本中，僅接收到來自表單的第一行輸入。這發生在Firefox/Chrome中，但在IE6中，變量按我的預期發送。

以下是代碼：

<html> 
<head> 
</head> 
<body> 
    <SCRIPT language="javascript"> 
      function addRow(tableID) { 

       var table = document.getElementById(tableID); 

       var rowCount = table.rows.length; 
       var row = table.insertRow(rowCount); 

       var colCount = table.rows[1].cells.length; 

       for(var i=0; i<colCount; i++) { 

        var newcell = row.insertCell(i); 

        newcell.innerHTML = table.rows[1].cells[i].innerHTML; 
        //alert(newcell.childNodes); 
        switch(newcell.childNodes[0].type) { 
         case "text": 
           newcell.childNodes[0].value = "laro"; 
           //newcell.childNodes[0].name = "Hello"; 
           break; 
         case "checkbox": 
           newcell.childNodes[0].checked = false; 
           break; 
         case "select": 
           newcell.childNodes[0].selectedIndex = 2; 
           break; 
        } 
       } 
       var newRowCount = table.rows.length; 
       for(var i=1; i<=newRowCount; i++){ 
        table.rows[i].cells[1].getElementsByTagName('input').item(0).setAttribute('name','items['+i+'][product_id]'); 
        table.rows[i].cells[2].getElementsByTagName('input').item(0).setAttribute('name','items['+i+'][serial]'); 
        table.rows[i].cells[3].getElementsByTagName('input').item(0).setAttribute('name','items['+i+'][product_remarks]'); 
       } 
      } 
     </SCRIPT> 

<form action="script.php" method="action"> 
<table> 
<th>Product ID</th><th>Serial No.</th><th>Remarks</th> 
<tr><td><input type="text" name="items[][product_id]"></td> 
<td><input type="items[][serial]"></td> 
<td><input type="items[]['product_remarks']"></td> 
</tr> 
<input type="submit" name="submit" value="Add Product"> 
</table> 
</form> 
</body> 
</html>

而下面是的script.php：

<?php 
$items = $_POST['items']; 
foreach($items as $item) 
{ 
$new_item = array(
'product_id' => $item['product_id'], 
'serial' => $item['serial'], 
'product_remarks' => $item['product_remarks'] 
); 
$this->db->addProduct($new_item); //This is a function that adds the records(array) to database. 

?>

現在的問題是，在Firefox或Chrome，如果我在表單添加多行並提交表單，只有第一行數據被插入到數據庫中。但是，在IE中，所有行都被插入。

任何人都可以請幫助我嗎？我是新來的JavaScript。

非常感謝。

來源

2011-05-09 Damchey Lhendup

IE是衆所周知的提供它自己的「風味」的JavaScript - 我強烈建議您嘗試使用一個JavaScript庫，如JQuery，它抽象了很多瀏覽器特定的問題，並讓你繼續與什麼你真的想做。

你的問題很可能與JavaScript實現的差異有關。

來源

2011-05-09 07:29:14 Nathan

也許在firefox中，你可以看看螢火蟲，看看到底發生了什麼實時源代碼？這樣你就會知道什麼是錯誤的，哪一部分的javascript可能需要一些修改才能使它跨瀏覽器兼容。

來源

2011-05-09 08:24:15 user6

最後解決了它，這是由於DIV是在FORM標籤內。在插入行期間，新行從FORM標記中消失，並且從未提交。不知道是什麼導致這是FIREFOX

來源

2011-05-11 08:20:46

<script language="javascript"> 
    function addRow(tableID) { 
     var table = document.getElementById(tableID); 
     var rowCount = table.rows.length; 
     var row = table.insertRow(rowCount); 
     var colCount = 2; 
     var cell = row.insertCell(0); 
     var cell1=row.insertCell(1); 
     cell.innerHTML+='<input type="text" name="items[][TestCaseId]" \>'; 
     cell1.innerHTML+='<input type="text" name="items[][Requirement]" \>'; 
    } 
    function deleteRow(tabid) { 
     try { 
      var table = document.getElementById(tabid); 
      var rowCount = table.rows.length; 
      table.deleteRow(rowCount-1); 
      rowCount--; 
     }catch(e) { 
      alert(e); 
     } 
    }  
</script> 

<form name="form1" method="post" action="script.php"> 
    <table> 
     <tr> 
      <td><br>Traceability Matrix: </td> 
      <td> 
       <br> 
       <table border="1" id="tabid" name="tabid"> 
        <th>TestCaseId</th> 
        <th>Requirement</th> 
        <tr> 
         <td><input type="text" name="items[][TestCaseId]" id="items[][TestCaseId]" ></td> 
         <td><input type="text" name="items[][Requirement]" id="tb2" ></td>  
        </tr> 
       </table> 

     </tr> 
     <tr> 
      <td></td> 
      <td><input type="button" value="Add Row" onClick="addRow('tabid')"> 
      <input type="button" value="Delete Row" onClick="deleteRow('tabid')"></td> 
     </tr> 
    </table> 
<input type="submit" value="submit">

來源

2012-02-14 13:00:10 cotton

也許你的代碼解釋多一點？ – cereallarceny 2012-10-29 00:48:21

通過$ _Post發送javascript動態DOM輸入在Firefox/Chrome中不起作用

回答

相關問題