使用jQuery获取表单输入字段？

Question

我有一个包含许多输入字段的表单.

当我使用jQuery捕获提交表单事件时,是否可以在关联数组中获取该表单的所有输入字段？

Answer 1

$('#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表单输入不适serializeArray用于jQuery 1.3版.这适用于1.4+版本

Answer 2

在这个问题的晚会上,但这更容易:

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

});

Answer 3

该jquery.form插件可以帮助别人正在寻找结束了在这个问题上.我不确定它是否直接做你想要的.

还有serializeArray函数.

Answer 4

有时我发现一次获得一个更有用.为此,有这样的:

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

Answer 5

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

elements变量将包含表单中的所有输入,选择,textareas和fieldsets.

Answer 6

这是另一种解决方案,通过这种方式,您可以获取有关表单的所有数据,并在服务器端调用或其他内容中使用它.

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

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

Answer 7

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

var items = new Array();

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

Answer 8

这段代码将 代替名称，电子邮件输入您的表单字段名称

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

Answer 9

有一个类似的问题,有轻微的扭曲,我以为我会抛出这个.我有一个回调函数,它获取表单,所以我已经有一个表单对象,并且不能轻松变种$('form:input').相反,我提出了:

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

它的相似但不完全相同的情况,但我发现这个线程非常有用,并且认为我最终会把它塞进去并希望其他人发现它很有用.

Answer 10

jQueryserializeArray不包含禁用字段，因此如果您也需要这些字段，请尝试：

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

Answer 11

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