How to pass a javascript variable to PHP - php

Question

Im creating a dynamic form with a button called "Add more rows" when this is clicked a JavaScript function creates a new row of textboxes with the appropriate id.
The problem is, how do I pass a counter variable from my JavaScript function to my next php page so it nows how many rows of textboxes to receive $_POST.
Ive got my JavaScript function however I'm missing data from the rows it creates itself.
any ideas?
Thanks
This is my js function
window.onload=function()
{
inp=document.getElementsByTagName('input');
for(c=0;c<inp.length;c++)
{
if(inp[c].value=='add')
{
inp[c].onclick=function()
{
n=15;
x=document.createElement('input');
x.setAttribute('rows',1);
x.setAttribute('cols',20);
x.name='time'+n;
document.getElementById('txtara').appendChild(x)
x=document.createElement('input');
x.setAttribute('rows',1);
x.setAttribute('cols',20);
x.name='event'+n;
document.getElementById('txtara').appendChild(x)
x=document.createElement('input');
x.setAttribute('rows',1);
x.setAttribute('cols',20);
x.name='supplies'+n;
document.getElementById('txtara').appendChild(x)
var sel = document.createElement('select');
y = document.createElement('option');
y.value = 'Yes';
y.name = 'success' + n;
y.innerHTML = y.value;
x = document.createElement('option');
x.value = 'No';
x.name = 'success' + n;
x.innerHTML = x.value;
sel.appendChild(y);
sel.appendChild(x);
document.getElementById('txtara').appendChild(sel);
document.getElementById('txtara').appendChild(sel);
document.getElementById('txtara').appendChild(sel);
x=document.createElement('input');
x.setAttribute('rows',1);
x.setAttribute('cols',20);
x.name='comment'+n;
document.getElementById('txtara').appendChild(x)
document.getElementById ('txtara').innerHTML += '<br>';
n++;
}
}
}
//-->
}

Answer 1

You should add an <input type="hidden" name="num_rows" value="0"> to your form and update its value to be the row count when the form is submitted.

Answer 2

Assuming you want the number for easing the way you fetch the data on the server side.
There is a very simple way of doing this.
Let's say you have many input's of the same logical data type you want to handle, like:
<input type="text" name="names" value=""> And you create more of it dynamically.
Of course, you want them individual names to fetch the data, so you do like:
<input type="text" name="names[]" value=""> OR if you have more input for one entity, to make it consistent: <input type="text" name="names[1]" value=""><input type="text" name="eye_colours[1]" value=""> , so you can add a number in the brackets.
What do you do on the PHP side?
if( isset($_POST['names']))
foreach($_POST['names'] as $key => $val){ ... }
PHP parses it as an array, hurray! :)

Answer 3

You can add a name attribute to your form elements. As your form contains multiples elements (and you don't know how much elements), this name attribute must be in the form "my_name[]". The [] chars indicates a collection of elements. So your HTML code could look like this:
<form method="POST" action="mypage.php">
<input type="text" name="whatever[]" value="first" />
<input type="text" name="whatever[]" value="second" />
<input type="text" name="whatever[]" value="third" />
<input type="submit" />
</form>
Then, when the form will be submitted, you can get the values using the PHP variable $_POST['whatever']. This variable is an array and contains all the values of the "whatever" inputs like this:
$myValues = $_POST['whatever'];
// $myValues = array( 0 => "first", 1 => "second", 2 => "third" );
Then, if you want to do some actions with each rows, do a for each loop. If you want to know how many lines were submitted, you can simply do a count.

Answer 4

Since javascript is a client-side language, this is not possible :(
but, you can use AJAX to send a local javascript var to the server by GET, or POST

Answer 5

You can use PHP to output javascript code. If you have a value you can output it directly in javascript, or if you have a more complex value, you can encode it using json_encode.

Answer 6

You don't need to. POST will carry the number of rows for you without a problem. Simply do count($_POST) to get the number of values posted. Or, if you use my suggested version below, use count($_POST['time']) to get the number of time values.
var types = ['time', 'event', 'supplies'];
function createInput( i, n )
{
var base = isNaN( i )? i: types[ i ];
x=document.createElement('input');
x.setAttribute('rows',1);
x.setAttribute('cols',20);
x.name= base + "[" + n + "]"; // this will make $_POST[<base>] an array with n as the index.
document.getElementById('txtara').appendChild(x)
}
window.onload=function()
{
inp=document.getElementsByTagName('input');
for(c=0;c<inp.length;c++)
{
if(inp[c].value=='add')
{
var n = 15; // move n out here. Otherwise n will always = 15.
inp[c].onclick=function()
{
for( var i = 0; i < types.length; i++ )
{
// passing both variables in will avoid any possible collisions.
createInput( i, n );
}
var sel = document.createElement('select');
sel.name = 'success[' + n + ']';
y = document.createElement('option');
// option has no name attribute (http://www.w3schools.com/tags/tag_option.asp)
y.value = 'Yes';
y.innerHTML = y.value;
x = document.createElement('option');
x.value = 'No';
x.innerHTML = x.value;
sel.appendChild(y);
sel.appendChild(x);
// you had this three times... why?
document.getElementById('txtara').appendChild(sel);
createInput( 'comment', n );
document.getElementById ('txtara').innerHTML += '<br>';
n++;
}
}
}
}