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"

Answer 1

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)