How to send a html table (created by JavaScript dynamically) to PHP page?

Question

I created a HTML Table using JavaScript dynamically.

So, the number of rows are not fixed. If I click add row button, it will genarate one new row. The following HTML and JavaScript code will generate dynamic table.

index.html

<!DOCTYPE html>
<html lang="en">
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
    var actions = $("table td:last-child").html();
    // Append table with add row form on add new button click
    $(".add_new").click(function(){
        var index = $("table tbody tr:last-child").index();
        var row = '<tr>' +          
                    '<td><input type="text" name="fname" class="form-control" ></td>' +
                    '<td><input type="text" name="lname" class="form-control" ></td>' +
        '</tr>';
        $("table").append(row);     
        $('[data-toggle="tooltip"]').tooltip();
    });
    // Add row on add button click
    $(document).on("click", ".add", function(){
        var empty = false;
        var input = $(this).parents("tr").find('input[type="text"]');
        input.each(function(){
            if(!$(this).val()){
                $(this).addClass("error");
                empty = true;
            } else{
                $(this).removeClass("error");
            }
        });
        $(this).parents("tr").find(".error").first().focus();
        if(!empty){
            input.each(function(){
                $(this).parent("td").html($(this).val());
            });         
        }       
    });
    // Delete row on delete button click
    $(document).on("click", ".delete", function(){
        $(this).parents("tr").remove();
        $(".add_new").removeAttr("disabled");
    });
});
</script>
</head>
<body>
<form action="display_table.php" id="my_form" name="my_form" method="post" >
            <table id='userTable' name='userTable'>
                <thead>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                    </tr>
                </thead>                
                <tbody>
                    <tr>                        
                        <td><input type="text" name="fname"></td>
                        <td><input type="text" name="lname"></td>               
                    </tr>                      
                </tbody>
            </table>
    <input type="button" id="add_new" name="add_new" class="add_new" value="Add New Row" >
    <input type="submit" name="save" value="Submit">            
</form>
</body>
</html>

Now, If I click the submit button, then the Table Data should be sent to the display_table.php page.

display_table.php

<?php
    $user_table=$_POST['userTable'];
    echo $user_table;
    #Next task is to process the table and store into MySQL Database
?>

If the table data is received to display_table.php then I'll process the data to store into MySQL Database.

I need help to send the HTML-JavaScript Table to display_table.php

$_POST['userTable'] won't exist since there's not form element with that name. Tables aren't posted since it isn't a valid form element. You need to access the input fields: $_POST['fname'] etc. Also, if you add multiple inputs with the same name, you need to pass them as arrays by naming them: name="fname[]" (notice the [] after the name). Then $_POST['fname'] will be an array with all the inputs with that name. — M. Eriksson
– M. Eriksson, Commented Feb 18, 2019 at 6:50
You mean if I change the HTML code like this <td><input type="text" name="fname[]"></td> and if I change the PHP code like this <?php $fname=$_POST['fname']; ?> Then in PHP code the variable $fname is an array ? — Dipankar Nalui
– Dipankar Nalui, Commented Feb 18, 2019 at 7:07

Dipankar Nalui · Accepted Answer · 2019-02-18 09:31:50Z

3

I understood the issue from the comments.

Now it works. I need to send the array of elements to the PHP page.

Change in HTML code:

        <tbody>
            <tr>                        
                <td><input type="text" name="fname[]"></td>
                <td><input type="text" name="lname[]"></td>             
            </tr>                      
        </tbody>

name="fname" will be replaced by name="fname[]"

Change in JavaScript

$(".add_new").click(function(){
    var index = $("table tbody tr:last-child").index();
    var row = '<tr>' +          
                '<td><input type="text" name="fname[]" ></td>' +
                '<td><input type="text" name="lname[]" ></td>' +
    '</tr>';
    $("table").append(row);     
    $('[data-toggle="tooltip"]').tooltip();
});

Change in PHP code:

<?php
    $fname=$_POST['fname'];
    $lname=$_POST['lname'];
    echo $fname[0];
    echo '<br/>';
    echo $fname[1];
?>

in PHP code $fname is an array

To store that table data into MySQL Database with PHP.

(This is not relevant for the question asked. But this might be helpful for somebody.)

<?php
    $conn = new mysqli("localhost", "root", "password", "userDB");
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    } 
    $fname_array=$_POST['fname'];
    $lname_array=$_POST['lname'];
    $fname_len=count($fname_array);
    $lname_len=count($lname_array);
    for($x=0;$x<$fname_len;$x++)
    {
        $fname=$fname_array[$x];
        $lname=$lname_array[$x];
        $sql = "INSERT INTO user_table(fname, lname) VALUES ('$fname', '$lname')";
        if ($conn->query($sql) === TRUE) 
        {
            echo "New record inserted successfully.";
        } 
        else 
        {
            echo "Error: " . $sql . "<br>" . $conn->error;
        }       
    }
    $conn->close(); 
?>

edited Feb 18, 2019 at 9:31

answered Feb 18, 2019 at 7:40

Dipankar Nalui

1,2617 gold badges20 silver badges35 bronze badges

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

1 Comment

M. Eriksson Over a year ago

Warning: You are wide open to SQL Injections and should really use parameterized Prepared Statements instead of manually building your queries like that. Specially since you're not escaping the user inputs at all!

Collectives™ on Stack Overflow

How to send a html table (created by JavaScript dynamically) to PHP page?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related