How to get input values from a dynamically generated form

Question

My question for the previous step is here Add a number of input fields based on a dynamic value in PHP

However, to continue on from this I have a new issue and Im not sure what to search for on here to find an answer so excuse me if this has already been answered.

I currently have a number $date which is calculated from 2 date fields. The user picks a date and is then presented with a <select> field for each day. However, I wish to collect the values form the selections made and send them to my form via jQuery and ajax.

Step 1 (lets say the user has selected 3 days and is presented with 3 <select> field's)

<select id="course_select_1">
  <option value="value 1">Value 1</option>
  <option value="value 2">Value 2</option>
</select>

<select id="course_select_2">
  <option value="value 1">Value 1</option>
  <option value="value 2">Value 2</option>
</select>

<select id="course_select_3">
  <option value="value 1">Value 1</option>
  <option value="value 2">Value 2</option>
</select>

For ref, here is the PHP that generates the select boxes.

for ( $i = 1; $i <= $days; $i++ ) {
      echo  '
        <p>Day ' . $i . ' </p>
        <select id="course-select' . $i . '">
            <option>Choose Course...</option>
            <option value="No golf">No golf</option>                        
        </select>

      ';
    }

For ref, this is the JS I use to collect my form data from teh previous form and the method I am used to using to collect data from fixed fields.

        jQuery(document).ready(function(){

            jQuery('#step').click(function() { 

                jQuery('.step1').fadeOut();
                jQuery('.step2').fadeIn();

                var firstname   =   jQuery('#firstname').val();
                var surname     =   jQuery('#surname').val();
                var telephone   =   jQuery('#telephone').val();
                var mobile      =   jQuery('#mobile').val();
                var email       =   jQuery('#email').val();
                var noofgolfers =   jQuery('#noofgolfers').val();
                var arrival     =   jQuery('#arrival').val();
                var leaving     =   jQuery('#leaving').val();


                jQuery(function(){
                    jQuery.ajax({
                        url:"http://www.ayrshiregolf.com/wp-admin/admin-ajax.php",
                        type:'POST',
                        data:'action=bookingrequest&firstname=' + firstname +
                        '&surname=' + surname + 
                        '&telephone=' + telephone +
                        '&mobile=' + mobile +
                        '&email=' + email +
                        '&noofgolfers=' + noofgolfers +
                        '&arrival=' + arrival +
                        '&leaving=' + leaving,                     
                        success:function(result){
                        //got it back, now assign it to its fields. 
                        jQuery('#step2content').html(result);                   
                        //console.log(result);

                        }
                    });     
                });
            });
        });

Step 2 : User chooses the options and we then submit the form again using the same method (jquery to get the data and send to my function in PHP).

How do I get the values from the fields if I don’t know how many there are going to be?

Thanks

you could simply [serialize](https://api.jquery.com/serialize/) the form — Burki, Dec 02 '15 at 14:19
Possible duplicate of [Work out values from loaded information](http://stackoverflow.com/questions/32072800/work-out-values-from-loaded-information) — Can O' Spam, Dec 02 '15 at 14:20
Could you try with `$('form')` or `$('__FORM_ID__')` `serialize` method? For example: `var data = $('form').serialize();`. — Ilya Yarkovets, Dec 02 '15 at 14:21

Ben · Answer 1 · 2015-12-02T14:32:43.777

1

Use the jQuery serialize method.

https://api.jquery.com/serialize/

Also, you can use the jQuery post method (it's easier):

http://api.jquery.com/jquery.post/

If your form has the ID myForm:

jQuery('#step').click(function() {

    jQuery('.step1').fadeOut();
    jQuery('.step2').fadeIn();

    jQuery.post("http://www.ayrshiregolf.com/wp-admin/admin-ajax.php",
        jQuery("#myForm").serialize(),
        function(result){
            jQuery('#step2content').html(result);
        }
    });
});

To identify values in the PHP page, you need to add the name attribute to your form fields:

<input type="text" name="myTextInput">

<?php
    echo $_POST["myTextInput"]; //will output the value of the textarea named myTextInput

edited Dec 02 '15 at 14:32

answered Dec 02 '15 at 14:24

Ben

8,894
7
44
80

Im curious, I like your answer and its working but how do I output the values in my PHP. Considering the fact that the number of select boxes is dynamically generated based on the number of days the user selects. – Alex Knopp Dec 02 '15 at 14:46
When each select box is created, you can give them an incrementally increasing name/number combo, e.g. `value1`, `value2` etc. and they will be added to the `$_POST` array. Use `var_dump($_POST)` in PHP to see how they are laid out. – Ben Dec 02 '15 at 14:57
Would appreciate if you wouldn't mind editing your answer to help me with the synax. – Alex Knopp Dec 02 '15 at 15:07

score 1 · Answer 2 · answered Dec 02 '15 at 14:27

1

jQuery.ajax({
     url:"http://www.ayrshiregolf.com/wp-admin/admin-  ajax.php",
     type:'POST',
     data:$('form').serialize(),                     
     success:function(result){
         //got it back, now assign it to its fields. 
         jQuery('#step2content').html(result);                   
         //console.log(result);
});

This will send all the data in the form

answered Dec 02 '15 at 14:27

Moretti Lucas

31
2

How would I then identify all the data in my mail function. For example, I would then need to identify all the fields at the other end for the HTML email. – Alex Knopp Dec 02 '15 at 14:30

How to get input values from a dynamically generated form

2 Answers2