PHP submit does not post text from JS-generated input fields

Question

I have a html form that contains a table of text inputs, ultimately to be used to generate an SQL INSERT query. The problem I have is my manually input table has 5 text inputs, then I have given the user the option to add more. These extra input fields are created fine and when I inspect the elements on the page after adding them, they have the correct name, id, types etc. (tried to post a screenshot to give a better idea but I'm a new user so can't - any way round this?!)

The problem is only the text from the first 5 (the ones I manually entered using html tags) get posted when I click my form's submit button. Is this because it reads the data before the new inputs are generated? I feel that it shouldn't be because I'm using if (isset($_POST['save'])) { where 'save' is my final submit button.

The table I've got in my html is as follows (apologies is poorly laid out/messy syntax, but its working fine in that sense):

edit: I have two tables within one form; that doesn't matter does it? i.e:

<form action='createtable.php' method='post' border='0'>

<table>
<tr>
<td><input type="button" value="Add column" onclick="addRowToTable();" /></td>
<td><input class='strong' type='submit' value='Create Table' name='save' /></td>
</tr>
</table>

<table name='columnnames' id='columnnames' border='0'>

<tr> <!--start table row 1-->
<td>Column 1:</td> <!--first item in row is just text-->
<td><input type='text' name='col1' id='col1' /></td> <!--second item in row is input text box-->
</tr> <!--end table row-->

<tr> <!--start table row 2-->
<td>Column 2:</td>
<td><input type='text' name='col2' id='col2' /></td>
</tr> <!--end table row-->

<tr> <!--start table row 3-->
<td>Column 3:</td>
<td><input type='text' name='col3' id='col3' /></td>
</tr> <!--end table row-->

<tr> <!--start table row 4-->
<td>Column 4:</td>
<td><input type='text' name='col4' id='col4' /></td>
</tr> <!--end table row-->

<tr> <!--start table row 5-->
<td>Column 5:</td>
<td><input type='text' name='col5' id='col5' /></td>
</tr> <!--end table row-->

</table>
</form>

The JavaScript I'm using to add the table rows is below:

<script>
function addRowToTable()
{
  //get table
  var tbl = document.getElementById('columnnames');
  //find length
  var numberRows = tbl.rows.length;

  // as there's no header row in the table, then iteration = numberRows + 1
  var rowNumber = numberRows + 1;
  var row = tbl.insertRow(numberRows);

  // left cell
  var cellLeft = row.insertCell(0);
  var textBox = document.createTextNode('Column ' + rowNumber + ':');
  cellLeft.appendChild(textBox);

  // right cell
  var cellRight = row.insertCell(1);
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'col' + rowNumber;
  el.id = 'col' + rowNumber;

  //el.onkeypress = keyPressTest;
  cellRight.appendChild(el);
}
</script>

I've seen a few questions relating to JS-generated bits of forms not wanting to submit properly using $_POST but answers to these seem fairly minimal and wondered if anyone could help as I've been trying to read the data for hours. Many thanks!

Click on the button. Then check the script in developer mode of your browser. Then make sure all the tags are added properly. Also You form tag must be outside your table. Please add it to your question. — Arman
– Arman, Commented Apr 1, 2014 at 11:24
In dev mode after using JS button: column 2 (one of the manually inputted ones): <input type="text" name="col2" id="col2"> column 8 (one generated using the button): <input type="text" name="col8" id="col8"> I DON'T UNDERSTAND! — jackelsey
– jackelsey, Commented Apr 1, 2014 at 11:51
What version of php are you using? Run php -v if you aren't entirely sure. EDIT: I've just tested your code with php 5.5 and it works fine so it's likely to be the way you're iterating through the data. Can you post your createtable.php? — DrugCrazed
– DrugCrazed, Commented Apr 1, 2014 at 12:16
The code you've provided works, your issue is in something you've not provided. — Robadob
– Robadob, Commented Apr 1, 2014 at 12:34

Apolo · Accepted Answer · 2014-04-01 11:17:11Z

1

Have you checked you have your form tag written properly ? (you should have included it in your question :o) )

<form method=POST action="myURL">
     [...]
</form>

answered Apr 1, 2014 at 11:17

Apolo

4,0512 gold badges26 silver badges53 bronze badges

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

Comments

Kishor Malakar · Accepted Answer · 2016-12-11 07:11:15Z

1

Though it is a very old question, I am writing the answer in case someone else goes through it again.

The PHP code is not taking values from the newly added input fields with jquery, because they all have the same name attributes. For these kinds of dynamically input fields you need to set the name to an array <input type="text" name "text[]">. When you write, $text= $_POST['text'], the text variable will then store all the values from the input fields with the name text[] and store them in the form of an array.

Hope it helps. :)

answered Dec 11, 2016 at 7:11

Kishor Malakar

771 silver badge6 bronze badges

Collectives™ on Stack Overflow

PHP submit does not post text from JS-generated input fields

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related