javascript html database row dynamic-data

JavaScript to add dynamic rows for submission returns only first row of data

I have a HTML form which allows a user to add rows ad hoc using JavaScript.

The Form:

<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"/>

The 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);
    }
}

The PHP code

$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();
}

When I click on the "add entry" button, a row will be successfully created. However, only data in the first row will be submitted to the database. Using

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

I got "row count is 1" even though I have several rows of data. Can somebody figure out what might have gone wrong with my code? Thanks a bunch!

Solution

You have to set name property for fields that you add:

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

You can try make two files: index.html and send.php and insert this content:

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

And run on you server - this works for me. Make sure that you have names set properly.