使用jQuery动态获取输入字段的值,并使用PHP处理它们

时间:2013-09-24 17:46:06

标签: javascript php jquery ajax input

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

示例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');
       }
});

2 个答案:

答案 0 :(得分:2)

您可以使用.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将丢失,因为它是不与表格一起传播。

答案 1 :(得分:0)

如果我理解得很清楚你的第一个问题是你想要用jquery获取dinamic输入的值和id。 哟可以做到这一点,在同一个div中插入dinamic输入,只需执行以下操作:

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