爲提交添加動態行的JavaScript僅返回第一行數據

我有一個允許用戶使用JavaScript專門添加行的HTML表單。爲提交添加動態行的JavaScript僅返回第一行數據

的形式爲：

<form method="post" action="send.php"> 
<table id="table"> 
<tr><th>job</th><th>comment</th></tr> 
<tr> 
<td><textarea name = "job[]"></textarea></td> 
<td><textarea name = "comment[]"></textarea></td> 
<tr> 
</table> 
<input type ="button" value="add entry" onclick="add('table')"/> 
<input type ="submit" id="submit" value="submit"/>

中的JavaScript：

function add(tableID) { 
    var table = document.getElementById(tableID); 
    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 
    var colCount = table.rows[0].cells.length; 

    for (var i=0; i<colCount; i++) { 
     var newcell = row.insertCell(i); 
     var newentry = document.createElement('textarea'); 
     newentry.type = "text"; 
     newcell.appendChild(newentry); 
    } 
}

的PHP代碼

$job = $_POST['job']; 
$comment = $_POST['comment']; 

//code to connect to database 

$add_stmt = $mysqli->prepare("INSERT INTO job (job, comment) VALUES (?, ?)"); 

$foreach($job as $a => $b) { 
    $add_stmt->bind_param("ss", $job[$a], $comment[$a]); 
    $add_stmt->execute(); 
}

當我點擊「添加條目」按鈕，行會成功創建。但是，只有第一行中的數據纔會提交給數據庫。使用

echo "row count is" . count($_POST['job']);

即使我有幾行數據，我也得到了「行數爲1」。有人可以弄清楚我的代碼可能出了什麼問題嗎？謝謝一堆！

來源

2012-04-02 nubicurio

您必須設置名稱屬性爲您添加字段：

// create array with names 
var names = ['job[]', 'comment[]']; 

function add(tableID) { 
    var table = document.getElementById(tableID); 
    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 
    var colCount = table.rows[0].cells.length; 

    for (var i=0; i<colCount; i++) { 
     var newcell = row.insertCell(i); 
     var newentry = document.createElement('textarea'); 
     newentry.type = "text"; 

     // set name 
     newentry.name = names[i]; 

     newcell.appendChild(newentry); 
    } 
}

你可以嘗試讓兩個文件：index.html，然後send.php和插入此內容：

的index.html：

<html> 
<head> 
    <script> 
     var names = ["job[]", "comment[]"]; 
     function add(tableID) { 
      var table = document.getElementById(tableID); 
      var rowCount = table.rows.length; 
      var row = table.insertRow(rowCount); 
      var colCount = table.rows[0].cells.length; 

      for (var i=0; i<colCount; i++) { 
       var newcell = row.insertCell(i); 
       var newentry = document.createElement('textarea'); 
       newentry.name = names[i]; 
       newentry.type = "text"; 
       newcell.appendChild(newentry); 
      } 
     } 
    </script> 
</head> 
<body> 
    <form method="post" action="send.php"> 
    <table id="table"> 
    <tr><th>job</th><th>comment</th></tr> 
    <tr> 
    <td><textarea name = "job[]"></textarea></td> 
    <td><textarea name = "comment[]"></textarea></td> 
    <tr> 
    </table> 
    <input type ="button" value="add entry" onclick="add('table')"/> 
    <input type ="submit" id="submit" value="submit"/> 
</form> 

</body> 
</html>

send.php：

<?php 
$job = $_POST['job']; 
$comment = $_POST['comment']; 

var_dump($job); 
var_dump($comment); 
?>

並運行在你的服務器上 - 這對我有用。確保您的名字設置正確。

來源

2012-04-02 11:13:15

謝謝Mateusz。然而，我只是試過你的代碼，行數仍然是1，$ job [$ a]現在是「數組」，而不是我輸入的數據。任何我可能忽略的想法？ – nubicurio 2012-04-02 11:23:33

編輯：$ job [$ a]現在是我輸入的數據，而不是數組（我錯了某些東西）。 – nubicurio 2012-04-02 11:36:10

@nubicurio我已經添加了適用於我的代碼 - 它正確地打印了包含動態數據的數組。 – 2012-04-02 12:57:28

爲提交添加動態行的JavaScript僅返回第一行數據

回答

相關問題