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

           }
         }

    }
    //-->
}

jessica · Accepted Answer · 2011-07-03 18:19:56Z

2

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.

answered Jul 3, 2011 at 18:19

jessica

3,1412 gold badges31 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

brucebat Over a year ago

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 Over a year ago

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 Over a year ago

jQuery is for javascript, which is what you are writing here.. you can use both.

cwallenpoole Over a year ago

There is no need for hidden form fields to return the number of Posts/Gets in PHP.

jessica Over a year ago

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!

|

illEatYourPuppies · Accepted Answer · 2011-07-03 18:33:33Z

1

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

answered Jul 3, 2011 at 18:33

illEatYourPuppies

6417 silver badges17 bronze badges

1 Comment

illEatYourPuppies Over a year ago

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

pomeh · Accepted Answer · 2011-07-03 18:48:38Z

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.

Ada Bellash Mon Trésor · Accepted Answer · 2011-07-03 18:20:26Z

0

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

answered Jul 3, 2011 at 18:20

Ada Bellash Mon Trésor

971 silver badge7 bronze badges

Comments

datasage · Accepted Answer · 2011-07-03 18:21:26Z

0

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.

answered Jul 3, 2011 at 18:21

datasage

19.7k2 gold badges51 silver badges55 bronze badges

Comments

cwallenpoole · Accepted Answer · 2011-07-03 18:36:41Z

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

           }
         }

    }
}

Collectives™ on Stack Overflow

How to pass a javascript variable to PHP

6 Answers 6

8 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

8 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related