为提交添加动态行的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仅返回第一行数据

回答

相关问题