【问题标题】:Dynamically get value of input fields with jQuery and process them with PHP使用 jQuery 动态获取输入字段的值并使用 PHP 处理它们
【发布时间】:2013-09-24 17:46:05
【问题描述】:

我正在一个页面上显示不同的输入字段,具体取决于用户所做的选择。

示例 1:

<input type="text" name="color" value="" id="5">
<input type="text" name="location" value="" id="6">
<input type="text" name="age" value="" id="7">

示例 2:

<input type="text" name="color" value="" id="5">
<input type="text" name="destination" value="" id="8">
<input type="text" name="hours" value="" id="9">
<input type="text" name="date" value="" id="10">

问题 1: 当输入字段本身是动态的时,如何使用 jQuery 获取所有输入字段?

问题 2: 在服务器端,我想用它们的值和 ID 处理输入字段。我怎样才能使这个动态?

我知道这可以在一切都修复后轻松完成,例如:

var color =  $('#color').val();
var destination = $("#destination").val();

var dataString = 'color=' + color + "&destination=" + destination;
$.ajax({  
       type: "GET",  
       url: "do_something.php",  
       data: dataString,  
       async: false,
       success: function(data){
          console.log('success');
       }
});

【问题讨论】:

    标签: javascript php jquery ajax input


    【解决方案1】:

    您可以使用.serialize() 创建您的数据字符串。它会动态抓取表单的所有数据并将其转换为字符串,就像您尝试构建的那样:

    $.ajax({  
           type: "GET",  
           url: "do_something.php",  
           data: $("form").serialize(),  
           async: false,
           success: function(data){
              console.log('success');
           }
    });
    

    .serialize() 的文档:http://api.jquery.com/serialize

    请注意,如果 DOM 中有多个表单,您可能需要优化 $("form") 选择以更具体。

    至于您的第二个问题,您通常应该将关于 SO 的问题保留为每个帖子一个问题。话虽如此,您应该将ID 属性设置为value 属性,这样在提交表单时它将被传递给PHP 脚本,ID 将丢失,因为它没有与表单一起传输。

    【讨论】:

    • .serialize() 正是我一直在寻找的。谢谢你告诉我这存在!
    • 我有随机数量的随机 id 输入。如何优化$("#input13")$("#input24")
    【解决方案2】:

    如果我理解得很好,您的第一个问题是您想使用 jquery 获取动态输入的值和 id。 你可以这样做,将动态输入始终插入同一个 div 中,然后简单地执行以下操作:

    var data = new Array();
    $("#id-div input").each(function() {
        data.push({id: $(this).attr("id"), value: $(this).attr("value")});
    });
    

    【讨论】:

      猜你喜欢
      • 2021-07-20
      • 2018-02-21
      • 1970-01-01
      • 2015-10-02
      • 2015-02-12
      • 1970-01-01
      • 2012-11-07
      • 2017-12-06
      • 2014-08-03
      相关资源
      最近更新 更多