JavaScript для добавления динамических строк для отправки возвращает только первую строку данных - PullRequest
Новая
       19

JavaScript для добавления динамических строк для отправки возвращает только первую строку данных

0 голосов
/ 02 апреля 2012

У меня есть HTML-форма, которая позволяет пользователю добавлять строки ad hoc, используя 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", хотя у меня есть несколько строк данных. Может кто-нибудь выяснить, что могло пойти не так с моим кодом? Большое спасибо!

1 Ответ

1 голос
/ 02 апреля 2012

Вы должны установить свойство name для полей, которые вы добавляете: 

// 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);
?>

И запустить на вашем сервере - это работает для меня.Убедитесь, что ваши имена установлены правильно.

...