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

Question

我对上一步的问题在这里Add a number of input fields based on a dynamic value in PHP

但是，要从这里继续，我有一个新问题，我不确定在此处搜索什么来找到答案，如果已经回答，请原谅。

我目前有一个数字 $date，它是根据 2 个日期字段计算得出的。用户选择一个日期，然后为每一天呈现一个<select> 字段。但是，我希望从所做的选择中收集值并通过 jQuery 和 ajax 将它们发送到我的表单。

第 1 步（假设用户选择了 3 天并显示 3 个<select> 字段）

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

对于 ref，这里是生成选择框的 PHP。

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>

      ';
    }

对于 ref，这是我用来从以前的表单中收集表单数据的 JS，也是我用来从固定字段中收集数据的方法。

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

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

第 2 步：用户选择选项，然后我们使用相同的方法再次提交表单（jquery 获取数据并发送到我在 PHP 中的函数）。

如果我不知道有多少字段，如何从字段中获取值？

谢谢

Answer 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);
});

这将发送表单中的所有数据

Answer 2

使用 jQuery serialize 方法。

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

另外，您可以使用 jQuery post 方法（更简单）：

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

---

如果您的form 的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);
        }
    });
});

---

要识别PHP 页面中的值，您需要将name 属性添加到表单字段：

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

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