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

Question

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!

Mateusz W · Accepted Answer · 2012-04-02 12:56:17Z

1

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.

edited Apr 2, 2012 at 12:56

answered Apr 2, 2012 at 11:13

Mateusz W

2,0311 gold badge15 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

nubicurio Over a year ago

Thanks Mateusz. I just tried your code, however, The the row count is still 1, and $job[$a] is now "Array" instead of the data I have typed in. Any ideas of what I might have overlooked?

nubicurio Over a year ago

EDIT: $job[$a] is now the data I have entered and not Array (I misstyped something).

Mateusz W Over a year ago

@nubicurio I've added code that works for me - it prints arrays with dynamic data correctly.

nubicurio Over a year ago

Hey Mateusz, your code works perfectly, but when I apply it to my code, I still only get one array. What I didn't mention was that in my form there are more fields and tables that would be submitted. I wonder if it might have something to do with it? Anyway thanks! I'll probably try to post my complete code here If I still can't figure out where the problem is...

Mateusz W Over a year ago

@nubicurio can you post somewere full html source from your page e.g. on pastebin.com? I would check it and maybe found what's wrong.

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related