How to pass a javascript variable to 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.

• brucebat: Thanks, but in my function if i do that. Wouldnt that create a hidden input field every time the user clicks my action button? Is there a way I can get js to edit an existing input box? Thanks
• jessica: You wouldn't create a new hidden input in each row, you would just have one in the form that stores the row count. When the onsubmit event fires on the form, set the value of the hidden input to the count of your rows. BTW you could probably accomplish what you're trying to do with a lot less lines of code if you use a framework like jQuery. :)
• jessica: jQuery is for javascript, which is what you are writing here.. you can use both.
• cwallenpoole: There is no need for hidden form fields to return the number of Posts/Gets in PHP.
• jessica: Seems like you could just iterate over the rows using a foreach() on the php page and check whether each one is empty? I'm not sure why you need to know the total before you can check if they're empty, but it may be more complicated than you're describing. :) Good luck!

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

• illEatYourPuppies: Any other data should be passed by hidden inputs, as mentioned earlier.

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++;
 }
 }
 }
}