如何从动态生成的表单获取输入值

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

Answer 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

Answer 2

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