使用 jQuery 获取表单输入字段

$('#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>元素上失败。

新的HTML 5表单输入似乎不适用于jQuery版本1.3中的serializeArray。这适用于版本 1.4+

在这个问题上来晚了，但这更容易：

$('#myForm').submit(function() {
    // Get all the forms elements and their values in one step
    var values = $(this).serialize();
});

jquery.form插件可能有助于其他人正在寻找最终解决这个问题的内容。我不确定它是否直接做你想要的。

还有 serializeArray 函数。

有时我发现一次得到一个更有用。 为此，有这个：

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

$('#myForm').bind('submit', function () {
  var elements = this.elements;
});

元素变量将包含表单中的所有输入、选择、文本区域和字段集。

这是另一种解决方案，这样您就可以获取有关表单的所有数据，并在服务器端调用或其他东西中使用它。

$('.form').on('submit', function( e )){ 
   var form = $( this ), // this will resolve to the form submitted
       action = form.attr( 'action' ),
         type = form.attr( 'method' ),
         data = {};
     // Make sure you use the 'name' field on the inputs you want to grab. 
   form.find( '[name]' ).each( function( i , v ){
      var input = $( this ), // resolves to current input element.
          name = input.attr( 'name' ),
          value = input.val();
      data[name] = value;
   });
  // Code which makes use of 'data'.
 e.preventDefault();
}

然后，您可以将它与 ajax 调用一起使用：

function sendRequest(action, type, data) {
       $.ajax({
            url: action,
           type: type,
           data: data
       })
       .done(function( returnedHtml ) {
           $( "#responseDiv" ).append( returnedHtml );
       })
       .fail(function() {
           $( "#responseDiv" ).append( "This failed" );
       });
}

希望这对你们中的任何人都有用:)

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

有一个类似的问题，略有转折，我想我会把它扔掉。我有一个获取表单的回调函数，所以我已经有一个表单对象，并且无法轻松地在$('form:input')上变体。相反，我想出了：

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

相似但不完全相同的情况，但我发现这个线程非常有用，并认为我会把它塞到最后，并希望其他人发现它有用。

这段代码将起作用电子邮件不是名称，而是输入您的表单字段名称

$(document).ready(function(){
  $("#form_id").submit(function(event){
    event.preventDefault();
    var name = $("input[name='name']",this).val();
    var email = $("input[name='email']",this).val();
  });
});

关联？并非没有一些工作，但您可以使用泛型选择器：

var items = new Array();
$('#form_id:input').each(function (el) {
    items[el.name] = el;
});

jQuery 的serializeArray不包括禁用字段，所以如果你也需要这些字段，请尝试：

var data = {};
$('form.my-form').find('input, textarea, select').each(function(i, field) {
    data[field.name] = field.value;
});

不要忘记复选框和单选按钮 -

var inputs = $("#myForm :input");
var obj = $.map(inputs, function(n, i) {
  var o = {};
  if (n.type == "radio" || n.type == "checkbox")
    o[n.id] = $(n).attr("checked");
  else
    o[n.id] = $(n).val();
  return o;
});
return obj

$("#form-id").submit(function (e) { 
  e.preventDefault();
  inputs={};
  input_serialized =  $(this).serializeArray();
  input_serialized.forEach(field => {
    inputs[field.name] = field.value;
  })
  console.log(inputs)
});

没有人赞成或提出一个简洁的解决方案来获取列表数据。几乎没有任何形式都是一维对象。

当然，此解决方案的缺点是必须在 [0] 索引处访问单例对象。但是IMO这比使用十几种线映射解决方案之一要好得多。

var formData = $('#formId').serializeArray().reduce(function (obj, item) {
    if (obj[item.name] == null) {
        obj[item.name] = [];
    } 
    obj[item.name].push(item.value);
    return obj;
}, {});

我遇到了同样的问题，并以不同的方式解决了它。

var arr = new Array();
$(':input').each(function() {
 arr.push($(this).val());
});
arr;

它返回所有输入字段的值。您可以更改$(':input')以使其更具体。

与 nickf 给出的解决方案相同，但考虑了数组输入名称例如

<input type="text" name="array[]" />

values = {};
$("#something :input").each(function() {
  if (this.name.search(/'[']/) > 0) //search for [] in name
  {
    if (typeof values[this.name] != "undefined") {
      values[this.name] = values[this.name].concat([$(this).val()])
    } else {
      values[this.name] = [$(this).val()];
    }
  } else {
    values[this.name] = $(this).val();
  }
});

我希望这是有帮助的，也是最简单的。

 $("#form").submit(function (e) { 
    e.preventDefault();
    input_values =  $(this).serializeArray();
  });

如果需要从输入中获取多个值，并且使用 [] 来定义具有多个值的输入，则可以使用以下方法：

$('#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;
        }
    }                   
});

受到 Lance Rushshing 和 Simon_Weaver 的回答的启发，这是我最喜欢的解决方案。

$('#myForm').submit( function( event ) {
    var values = $(this).serializeArray();
    // In my case, I need to fetch these data before custom actions
    event.preventDefault();
});

输出是一个对象数组，例如

[{name: "start-time", value: "11:01"}, {name: "end-time", value: "11:11"}]

使用下面的代码，

var inputs = {};
$.each(values, function(k, v){
    inputs[v.name]= v.value;
});

其最终输出将是

{"start-time":"11:01", "end-time":"11:01"}

我在没有每个循环的情况下使用此代码：

$('.subscribe-form').submit(function(e){
    var arr=$(this).serializeArray();
    var values={};
    for(i in arr){values[arr[i]['name']]=arr[i]['value']}
    console.log(values);
    return false;
});

对于多个选择元素（<select multiple="multiple">），我修改了@Jason Norwood-Young的解决方案以使其工作。

答案（如发布时）仅从所选的第一个元素中获取值，而不是所有元素。它也没有初始化或返回data，前者抛出一个JavaScript错误。

这是新版本：

function _get_values(form) {
  let data = {};
  $(form).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();
        }
        for (let i = 0; i < field.selectedOptions.length; i++) {
          data[field.name].push(field.selectedOptions[i].value);
        }
      } else {
        data[field.name] = field.value;
      }
    }
  });
  return data
}

用法：

_get_values($('#form'))

注意：您只需要确保所选name []附加到其末尾，例如：

<select name="favorite_colors[]" multiple="multiple">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

当我需要对所有表单字段进行 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网站上的产品选项以包括复选框和文本字段以及标准选择框类型时使用了此功能。

serialize（） 是最好的方法。 @ Christopher Parker 说 Nickf 的 anwser 完成了更多，但它没有考虑到表单可能包含文本区域和选择菜单。 最好使用 serialize（），然后根据需要对其进行操作。 来自 serialize（） 的数据可以在 Ajax 帖子或 get 中使用，所以那里没有问题。

希望这对某人有所帮助。 :)

// This html:
// <form id="someCoolForm">
// <input type="text" class="form-control" name="username" value="...." />
// 
// <input type="text" class="form-control" name="profile.first_name" value="...." />
// <input type="text" class="form-control" name="profile.last_name" value="...." />
// 
// <input type="text" class="form-control" name="emails[]" value="..." />
// <input type="text" class="form-control" name="emails[]" value=".." />
// <input type="text" class="form-control" name="emails[]" value="." />
// </form>
// 
// With this js:
// 
// var form1 = parseForm($('#someCoolForm'));
// console.log(form1);
// 
// Will output something like:
// {
// username: "test2"
// emails:
//   0: ".@....com"
//   1: "...@........com"
// profile: Object
//   first_name: "..."
//   last_name: "..."
// }
// 
// So, function below:
var parseForm = function (form) {
    var formdata = form.serializeArray();
    var data = {};
    _.each(formdata, function (element) {
        var value = _.values(element);
        // Parsing field arrays.
        if (value[0].indexOf('[]') > 0) {
            var key = value[0].replace('[]', '');
            if (!data[key])
                data[key] = [];
            data[value[0].replace('[]', '')].push(value[1]);
        } else
        // Parsing nested objects.
        if (value[0].indexOf('.') > 0) {
            var parent = value[0].substring(0, value[0].indexOf("."));
            var child = value[0].substring(value[0].lastIndexOf(".") + 1);
            if (!data[parent])
                data[parent] = {};
            data[parent][child] = value[1];
        } else {
            data[value[0]] = value[1];
        }
    });
    return data;
};

所有的答案都很好，但是如果有一个你喜欢在该函数中忽略的字段？很简单，为字段指定一个属性，例如ignore_this：

<input type="text" name="some_name" ignore_this>

在您的序列化函数中：

if(!$(name).prop('ignorar')){
   do_your_thing;
}

这就是您忽略某些字段的方式。

尝试以下代码：

jQuery("#form").serializeArray().filter(obje => 
obje.value!='').map(aobj=>aobj.name+"="+aobj.value).join("&")