CODEWITHSUNDEEP
phpjqueryhtmlformshtml-table
user3248186
user3248186

Reputation: 1558

How to post table with a form in php?

I have a form with a table (values in it can be edited) in it, like this:

<form action="file.php" id="myform" method="POST">
    <input name="inp">
    <div class="divclass">
        <table id="mytable" name="mytable">
        <tr><th>col1</th><th>col2</th></tr>
        <tr><td contenteditable='true'>val11</td>
        <td contenteditable='true'>val12</td></tr>
        <tr><td contenteditable='true'>val21</td>
        <td contenteditable='true'>val21</td></tr>
        </table>
    </div>
    <input type='submit' name='submit' value='Submit'>
</form>

<?php
    print_r ($_POST)
?>

So, when I click on submit, the entire form should be submitted right?

But just the inputs - inp & submit get submitted to the form, which I know when I print the post parameter array in php.

Can someone please explain how I can get the table data too in my post parameter array $_POST?

Also how do I trigger an onchange event on the table? I tried this, but it didn't seem to work :

$("#mytable").change(function (event) {
    console.log("changed")
    console.log($("#keno_config_table").val())
})

Upvotes: 0

Views: 16491

Answers (3)

Nandan Bhat
Nandan Bhat

Reputation: 1563

When you submit a form only the values inside selector elements gets submitted not all html elements. However, if you can add an input tag inside <td> tag you'll be able to submit the values.The following code should work for you.

<form action="file.php" id="myform" method="POST">
    <input name="inp">
    <div class="divclass">
        <table id="mytable" name="mytable">
        <tr><th>col1</th><th>col2</th></tr>
        <tr><td contenteditable='true'><input type="hidden" value="val11" name="value1"> val11</td>
        <td contenteditable='true'><input type="hidden" value="val12" name="value2"> val12</td></tr>
        <tr><td contenteditable='true'><input type="hidden" value="val21" name="value3"> val21</td>
        <td contenteditable='true'><input type="hidden" value="val21" name="value4"> val21</td></tr>
        </table>
    </div>
    <input type='submit' name='submit' value='Submit'>
</form>

jQuery

$("#mytable input[type='text']").change(function (event) {
    console.log("changed")
    console.log($(this).val())
});

PHP

<?php
if (!empty($_POST)){
    echo "Post data received";
    echo "Value 1 :".$_POST["value1"];
    echo "Value 2 :".$_POST["value2"];
    echo "Value 3 :".$_POST["value3"];
    echo "Value 4 :".$_POST["value4"];
}else{
    echo "Post data is empty. No value is passed from HTML to the server";
}
?>

Upvotes: 2

Danielius
Danielius

Reputation: 837

I offer you to do this

<form action="file.php" id="myform" method="POST">
    <input name="inp">
    <div class="divclass">
        <table id="mytable" name="mytable">
        <tr>
            <th>col1</th>
            <th>col2</th>
        </tr>
        <tr>
            <td><input name='col1[]' style='border:0;outline:0;display:inline-block' value='value'></td>
            <td><input name='col2[]' style='border:0;outline:0;display:inline-block' value='value'></td>
        </tr>
        <tr>
            <td><input name='col1[]' style='border:0;outline:0;display:inline-block' value='value'></td>
            <td><input name='col2[]' style='border:0;outline:0;display:inline-block' value='value'></td>
        </tr>
        </table>
    </div>
    <input type='submit' name='submit' value='Submit'>
</form>

(of course, make a class for styles, I just wanted to do it simpler). Inputs will look like contenteditable tags without borders and you will be able to get an array of all col1 and col2 like $_POST['col1'] and $_POST['col2'] Also, you may change values to placeholders if you don't want default data to be sent.

Upvotes: 0

Quentin
Quentin

Reputation: 943470

So, when I click on submit, the entire form should be submitted right?

No. It isn't a form control.

But just the inputs - inp & submit get submitted to the form

inputs are form controls (as are selects, textareas and buttons).

Can someone please explain how I can get the table data too in my post parameter array $_POST?

Using JavaScript, listen for a submit event on the form element and copy the HTML of the table into the value property of a hidden input.

Alternatively: Use input elements in your table cells instead of using contentEditable.

Upvotes: 1

Related Questions