How to post table with a form in php? - php

Question

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

Answer 1

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";
}
?>

Answer 2

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.

Answer 3

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.