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.

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

           }
         }

    }
}