Adding form elements and passing variables from them

[DrFishNips]

I have a form which when you click the "More" button javascript adds a new row to the table with new input fields. That part works but I have no idea how to get the input into PHP $_POST variables because I don't know what they're called. First off is there any way to know for sure what a javascript created input field is named? Heres the script I'm using

<script language="Javascript" type="text/javascript">

     function addRow()

     {
// grab the element, i.e. the table your editing, in this we're calling it

          // 'mySampleTable' and it is reffered to in the table further down on the page

          // with a unique of id of you guessed it, 'mySampleTable'

          var tbl = document.getElementById('mySampleTable');

          // grab how many rows are in the table

          var lastRow = tbl.rows.length;



          // if there's no header row in the table (there should be, code at least one

          //manually!), then iteration = lastRow + 1

          var iteration = lastRow;

          // creates a new row

          var row = tbl.insertRow(lastRow);



          // left cell

          // insert a cell

          var cellLeft = row.insertCell(0);

          // here we're just using numbering the cell, like anything else you don't

          // have to use this, but i've kinda noticed users tend to like them



          // takes what we did (create the plain text number) and appends it the cell

          // we created in the row we created. NEAT!




          // 2nd cell

          // another cell!

          var cellSubstances = row.insertCell(1);

          // creating an element this time, specifically an input

          var subs = document.createElement('input');

          // a data type of text

          subs.type = 'text';

          // the name of the element txtRow, and because this is dynamic we also

          // append the row number to it, so for example if this is the eigth row

          // being created the text box will have the name of txtRow8. super fantastic.

          subs.name = 'substances' + iteration;

          // the exact same thing with a unique id

          subs.id = 'substances' + iteration;

          // set it to size of 40. setting sizes is good.

          subs.size = 18;



          // same thing as earlier, append our element to our freshly and clean cell

          cellSubstances.appendChild(subs);





          // Dosage

          var cellDosage = row.insertCell(2);

          // create another element, this time a select box

          var dos = document.createElement('input');

          // name it, once again with an iteration (selRow8 using the example above)

          dos.type = 'text';

          dos.name = 'dosage' + iteration;

          // the exact same thing with a unique id

          dos.id = 'dosage' + iteration;

          // set it to size of 40. setting sizes is good.

          dos.size = 4;


          cellDosage.appendChild(dos);



          // mg text


          var mgText = row.insertCell(3);


          // Last

          var cellLast = row.insertCell(4);

          // create another element, this time a select box



          // crates options in an array

          // the Option() function takes the first parameter of what is being displayed

          // from within the drop down, and the second parameter of the value it is carrying over

                    cellLast.appendChild(but);

          // append our new element containing new options to our new ce






     }



     function removeRow()

     {

          // grab the element again!

          var tbl = document.getElementById('mySampleTable');

          // grab the length!

          var lastRow = tbl.rows.length;

          // delete the last row if there is more than one row!

          if (lastRow > 2) tbl.deleteRow(lastRow - 1);

     }
</script>

 

heres the HTML form

		    <table border="0" cellpadding="0" cellspacing="0" id="mySampleTable" width="100%" style="color:ffffff"><tbody>

	      <tr name="first">
		<td valign="top">Substance(s): </td>
		<td valign="top"><input maxlength="30" name="substances" id="substances0" size="18" type="text"></td>
	        <td valign="top"><input maxlength="10" name="dosage0" id="dosage" size="4" type="text"></td>
	        <td valign="top">(mg.)</td>
		<td valign="top" align="right"><input type="button" value="More" onclick="addRow();" /></td> 
	        </td>
	      </tr>
	    </table>

 

and heres the PHP variables

		$substance0 =  mysql_real_escape_string($_POST['substances0']);
	$dosage0 =  mysql_real_escape_string($_POST['dosage0']);
	$substance1 =  $_POST['substances1'];
	$dosage1 =  $_POST['dosage1'];
	$substance2 =  $_POST['substances2'];
	$dosage2 =  $_POST['dosage2'];

$dosage0 and $substance0 come from the normal HTML inputs so I can get them into PHP variables but I can't get the 2 extra input fields that javascript added. Heres the webpage

http://192.168.1.3/potg/index.php?get=members&page=trip&action=add

you'll have to register but it only takes 10 seconds. No email verification or anything like that.

[xenophobia]

when you create your input field, use:

 

<input type="text" name="substance[]" value="val_1" />
<input type="text" name="substance[]" value="val_2" />
<input type="text" name="substance[]" value="val_3" />

or equivalent to javascript:

subs.name = "substance[]";

 

So, in your PHP, it will treat like an array:

 

<?php
$substances = $_POST['substance'];

foreach($sub as $key=>$substances) {
    echo $key . " => " . $sub . "<br/ >";
}
?>

 

Your output will be:

0 => val_1
1 => val_2
2 => val_3

 

Is that what you want?