我有一个带有许多输入字段的表单。

当我用jQuery捕获提交表单事件时,是否有可能在一个关联数组中获得该表单的所有输入字段?


当前回答

http://api.jquery.com/serializearray/

$('#form').on('submit', function() {
    var data = $(this).serializeArray();
});

这也可以在没有jQuery的情况下使用XMLHttpRequest Level 2 FormData对象完成

http://www.w3.org/TR/2010/WD-XMLHttpRequest2-20100907/#the-formdata-interface

var data = new FormData([form])

其他回答

如果你需要从输入中获取多个值,并且你正在使用[]来定义具有多个值的输入,你可以使用以下方法:

$('#contentform').find('input, textarea, select').each(function(x, field) {
    if (field.name) {
        if (field.name.indexOf('[]')>0) {
            if (!$.isArray(data[field.name])) {
               data[field.name]=new Array();
            }
            data[field.name].push(field.value);
        } else {
            data[field.name]=field.value;
        }
    }                   
});

当我需要对所有表单字段进行ajax调用时,我遇到了:input选择器返回所有复选框的问题,无论它们是否被选中。我添加了一个新的选择器来获得可提交的表单元素:

$.extend($.expr[':'],{
    submitable: function(a){
        if($(a).is(':checkbox:not(:checked)'))
        {
            return false;
        }
        else if($(a).is(':input'))
        {
            return true;
        }
        else
        {
            return false;
        }
    }
});

用法:

$('#form_id :submitable');

我还没有测试它与多个选择框虽然,但它的工作,以标准提交的方式得到所有的表单字段。

我在OpenCart网站上定制产品选项时使用了这个选项,包括复选框和文本字段以及标准的选择框类型。

$('#myForm').submit(function() {
    // get all the inputs into an array.
    var $inputs = $('#myForm :input');

    // not sure if you wanted this, but I thought I'd add it.
    // get an associative array of just the values.
    var values = {};
    $inputs.each(function() {
        values[this.name] = $(this).val();
    });

});

感谢来自Simon_Weaver的提示,这里有另一种方法,你可以使用serializeArray:

var values = {};
$.each($('#myForm').serializeArray(), function(i, field) {
    values[field.name] = field.value;
});

注意,这个代码段在<select multiple>元素时将失败。

在jQuery 1.3版本中,新的HTML 5表单输入不能使用serializeArray。这适用于版本1.4+

也有类似的问题,只是稍微有点扭曲,我想我应该把它扔掉。我有一个回调函数,得到的形式,所以我已经有一个形式对象,不能简单的变量$('form:input')。相反,我想到了:

    var dataValues = {};
    form.find('input').each(
        function(unusedIndex, child) {
            dataValues[child.name] = child.value;
        });

它类似但不完全相同的情况,但我发现这条线索非常有用,我想我会把它塞在末尾,希望其他人也能发现它有用。

有时我发现一次一个更有用。为此,有这个:

var input_name = "firstname";
var input = $("#form_id :input[name='"+input_name+"']");