Submit html table data with via form (post)

Question

I want to post this html table on submit button click.

01 - I want to retrieve the data of this table in php code (server side) 02 - I also want to display this table on another page.

I'm using

PHP, JQuery

I have html table with many rows in form tag.

<form id="frm_test" class="form-vertical" method="post">
  <table id="mytable">
    <tr>
      <td>
        <input type="text"  name="color_1" value="" />
      </td>
      <td>
        <input type="text"  name="color_2" value="" />
      </td>
      <td>
        <input type="text"  name="color_3" value="" />
      </td>
      <td>
        <input type="text"  name="color_4" value="" />
      </td>
    </tr>
    ......
    ......
    ......
    ......
    .....
  </table>

  <input type="submit"  name="submit" value="submit" />
</form>

===========

there are 4 input fields in each row (4 cells in each row). and hundred rows in table. So if I get value via name in php code then I have to write lot of code to get 100(rows) * 4 (input fields) = 400 inputs. So my question was "What is the best way to achieve this"

You can use input type='hidden' to post data from table. For each value you want to send to server you have to have a input with a specific Name — Alexandru Chichinete, Dec 05 '14 at 10:44

score 28 · Answer 1 · answered Mar 20 '17 at 15:06

Since you are trying to submit multiple rows of inputs/selects with the same 'name' attribute to a backend, you would need to add square brackets [] to the end of the name value in those inputs (in the table rows).

<form>
<input type="number" name="examplevar" />
<table>
  <tr>
    <td><input type="text" name="color_1[]" /></td>
    <td><input type="text" name="color_2[]" /></td>
  </tr>
  <tr>
    <td><input type="text" name="color_1[]" /></td>
    <td><input type="text" name="color_2[]" /></td>
  </tr>
<table>
<input type="submit" />
</form>

This tells your browser to create an array for that name property.

In php, read it as $_POST['color_1'][0] and $_POST['color_2'][0], and loop as you'd like.

The brackets are in Phil Bailey's answer, but they are not pointed out. (Added because a recent search led me to this)

"This tells your browser to create an array for that name property." This is SUPER helpful information. :-) — JackWilson, May 18 '18 at 07:42

S.Pols · Answer 2 · 2014-12-05T11:25:52.243

To post a form you need to add the action tag which termines the path to go when the form is submitted

<form id="frm_test" class="form-vertical" name="THE_PHP_FILE_TO_POST.php" method="post">

When you want to POST values you should specify input fields with a certain name. If you only want the table is visible you should use the type hidden so the form will POST data, but the inputs aren't visible.

<tr>
    <td>
        My value
        <input type="hidden" name="myValue" value="My value" />
    </td>
</tr>

Once your form is posted you can catch the POST data in that PHP file like this:

//THE_PHP_FILE_TO_POST.php

if(isset($_POST))
{
    $myValue = $_POST['myValue']; //Contains the string "My value"
    //Do something with your POST
}

EDIT Get all table data

if(isset($_POST))
{
    foreach($_POST as $inputName => $inputValue)
    {
        echo $inputName; //This is the name of an input field
        echo $inputValue; //This is the value of the input field 

    }
}

I have more then 400 inputs. it means I have to write 400 lines to getting table data. is there any good approach to achieve this? — Ali, Dec 05 '14 at 11:01

score 2 · Answer 3 · answered Feb 12 '16 at 17:42

PHP has a an odd naming convention for for table input fields you need to specify the name for the file as an array. For the following SQL Statement using PDO one processing method.

select id,color_1,color_2,color_3,color_4 from colors;
<?php
// Get data
$stmt->execute();
$results = $stmt->fetchAll(PDO::FETCH_NUM);
reset($results);
echo '<table>';
while (list(, $i = each($results)) {
  echo  '<tr><td><input type=hidden name="id[]" value="' . $i[0] . '"></td>';
  echo '<td><input type=text name="color_1[]" value="'  . $i[1] . '"></td>';
  echo '<td><input type=text name="color_2[]" value="'  . $i[2] . '"></td>';
  echo '<td><input type=text name="color_3[]" value="'  . $i[3] . '"></td>';
  echo '<td><input type=text name="color_4[]" value="'  . $i[4] . '"></td>';
  echo '</tr>';
}
echo '</table>
?>

Simplified $_POST print_r output for 4 records:

Array ( [[id] => Array ( [0] => 20 [1] => 21 [2] => 44 [3] => 45 ) 
[color_1] => Array ( [0] =>red [1] =>green [2] =>yellow [3] =>blue ) 
[color_2] => Array ( [0] =>purple [1] =>orange [2] =>green [3] =>red ) 
[color_3] => Array ( [0] =>red [1] =>green [2] =>yellow [3] =>blue ) 
[color_4] => Array ( [0] =>purple [1] =>orange [2] =>green [3] =>red ) )

score 1 · Answer 4 · answered Dec 05 '14 at 10:47

1

You need to add input field in your table to post data. like

<input type="text"  name="fieldname" value="" />

If you do not want to display field then you can make field hidden by using type="hidden"

Add action attribute in your form.

Action attribute indicates the url on which your data will be posted.

answered Dec 05 '14 at 10:47

Bhavya Shaktawat

2,504
1
13
11

Thanks Nick for your reply. Yes there are 4 input fields in each row (4 cells in each row). and hundred rows in table. So if I get value via name in php code then I have to write lot of code to get 100(rows) * 4 (input fields) = 400 inputs. So my question was "What is the best way to achieve this" – Ali Dec 05 '14 at 10:53
it would be better if you can club the row data with some row-id/field-id so that a complete row is posted as array to reduce the name. – Bhavya Shaktawat Dec 05 '14 at 11:13

Submit html table data with via form (post)

4 Answers4

Linked