使用jQuery在表单中POST多个输入

时间:2012-06-17 17:29:51

标签: jquery forms post input

我在HTML中生成一些看起来像这样的输入:

<input id='estemated_days' type='text' data-id='717' value='6'>

<select id='elements_grade' data-id='717'>
 <option value='1'></option>
 <option value='2'></option>
 <option value='3'></option>
</select>

<input id='estemated_days' type='text' data-id='718' value='4'>

<select id='elements_grade' data-id='718'>
 <option value='1'></option>
 <option value='2'></option>
 <option value='3'></option>
</select>

我当时生成了大约10个但是以两个为例。如何使用jQuery将多个输入值POST到外部PHP文件?以前我在提交帖子数据时使用了这样的东西(见下面的代码),但这似乎只适用于带有ID的单个字段 - 而不是生成的数据库data-id

//Initiate function when user clicks save
$("#save_courseplan").click(function() {

//Store the values of the fields as variables
var elements_grade = $('#elements_grade').val();
var estemated_days = $('#estemated_days').val();


$.post('../update.php', {

    estemated_days: estemated_days, //This for example will now represent 6
    elements_grade: elements_grade //And this 1

    }, function(data) {
    $('#updatestatus').html(data); //Display what update.php echoes out
 });
});

编辑

好的我不认为我很清楚。我动态创建了input个字段。这些字段从MySQL数据库中获取data-id

数据库看起来像这样:

+------------+------------+
| scpe_id    | scpe_days  |
+------------+------------+
| 717        | 6          |
+------------+------------+
| 718        | 4          |
+------------+------------+

以前,我已成功使用我在此主题中先前发布的jQuery代码基于其包含的值更新单个字段。一个ID包含一个值,该值与$_POST文件相同update.php,然后插入到数据库中。

现在,我不能使用ID,因为我需要一次更新多个行,每个行都有不同的数据库ID。

所以我想要的是首先获取data-id的值,知道要更新的行,然后获取它所拥有的值以知道要插入的内容 - 然后对每个<input>重复一次。

1 个答案:

答案 0 :(得分:3)

var queryString = $('form').serialize();

完成。

注意:

  • 确保所有表单元素都在表单元素中。
  • 所有表单元素都必须具有name属性。

serialize docs

最终代码可以是:

$.post('../update.php/?' + queryString, function(data) {
    $('#updatestatus').html(data);
});