投稿用の動的行を追加する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); 
    } 
}

次の2つのファイルにする試すことができます：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

EDIT：$ job [$ a]は私が入力したデータであり、Arrayではありません（私は何かを誤って入力しました）。 – nubicurio

@nubicurio私は、私のために働くコードを追加しました。動的データを持つ配列を正しく出力します。 –

投稿用の動的行を追加するJavaScriptは、データの最初の行のみを返します

答えて

関連する問題