CODEWITHSUNDEEP
javascriptphphtmlforms
jackelsey
jackelsey

Reputation: 179

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

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!

Upvotes: 1

Views: 1837

Answers (2)

Kishor Malakar
Kishor Malakar

Reputation: 77

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. :)

Upvotes: 1

Apolo
Apolo

Reputation: 4050

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>

Upvotes: 1

Related Questions