如何使用JavaScript / jQuery获取表单数据?


404

是否有一种简单的单行方式来获取表单数据,就像以经典的纯HTML方式提交那样?

例如:

<form>
    <input type="radio" name="foo" value="1" checked="checked" />
    <input type="radio" name="foo" value="0" />
    <input name="bar" value="xxx" />
    <select name="this">
        <option value="hi" selected="selected">Hi</option>
        <option value="ho">Ho</option>
</form>

输出:

{
    "foo": "1",
    "bar": "xxx",
    "this": "hi"
}

这样的事情太简单了,因为它不(正确地)包含文本区域,选择,单选按钮和复选框:

$("#form input").each(function () {
    data[theFieldName] = theFieldValue;
});

3
:类似这样的另一个问题stackoverflow.com/questions/169506/...
马塞洛Rodovalho

Answers:


431
$('form').serialize() //this produces: "foo=1&bar=xxx&this=hi"

演示


15
关闭,但是可能返回带有键值对数组而不是单个字符串的数组吗?
Bart van Heukelom

80
Nvm,在对serialize()函数的注释中找到了它。它称为serializeArray。它返回一个数组数组(包含一个条目“名称”和“值”),但是应该足够容易转换。
巴特·范·海克洛姆

22
使用下划线库可以通过以下方式进行转换:_.object($("#myform").serializeArray().map(function(v) {return [v.name, v.value];} ))
MhdSyrwan 2014年

8
@BartvanHeukelom我知道这是4年后,但是.serializeArray()将返回一个数组。
TJ WealthEngine API推广人员2014年

6
确保每个输入标签都包含name属性,否则它将不返回任何内容。
Eugene Kulabuhov,2015年

505

使用$('form').serializeArray(),它返回一个数组

[
  {"name":"foo","value":"1"},
  {"name":"bar","value":"xxx"},
  {"name":"this","value":"hi"}
]

其他选项是$('form').serialize(),它返回一个字符串

"foo=1&bar=xxx&this=hi"

看看这个jsfiddle演示


91
serializeArray如果它返回带有键值对的对象,它将更加有用
GetFree

8
我同意一个对象是理想的。但是,存在一个问题-密钥可以具有多个值。您会返回键“值数组”对象还是键“第一个值”对象或其他东西?我认为jQuery专家没有选择上述任何一项:)
保罗

请注意多个值(如上面的@Paul所述),复选框和带有的多个输入name="multiple[]"不起作用的问题。POST方法的解决方案是相同的,只是使用$('form')。serialize()。而且POST方法没有GET限制,在大多数浏览器中都不能超过2000个字符,因此即使对于非常大的数据也可以使用POST方法。
Artru

还请注意,为了记录来自任何表单输入的值,输入必须具有name属性。
克里斯-小J17年

@GetFree为什么不只使用jQuery map函数?函数getFormData(form){var rawJson = form.serializeArray(); var model = {}; $ .map(rawJson,function(n,i){model [n ['name']] = n ['value'];}); 退货模式; }
汤姆·麦克唐纳

196

2014年更新的答案: HTML5 FormData可以做到这一点

var formData = new FormData(document.querySelector('form'))

然后,您可以按原样发布formData-它包含表单中使用的所有名称和值。


13
另外一个为FORMDATA是好的,有用的,但值得注意的是,如果你想阅读里面FORMDATA它不是那么容易的数据(见stackoverflow.com/questions/7752188/...
StackExchange见鬼

1
请记住FORMDATA是的XMLHttpRequest的高级功能(以前称为XMLHttpRequest的2级)的一部分,所以你必须依靠填充工具的Internet Explorer <10 caniuse.com/#feat=xhr2
码头-吕克·Gendreau所言

3
@yochannah,不是这样。当然,不能像普通对象那样简单地访问和编辑数据,但是获取数据仍然微不足道。查看entries()方法[MDN页面 ]。
网络和流程

@Web和Flow感谢您指出这一点!当浏览器添加新的有用功能时,我喜欢它:)时代在不断变化。
StackExchange What the Heck

我正在尝试使用FormData将对象发送到我的Flask-python脚本,但是它似乎并没有作为我可以解包的普通请求对象而来。有人可以指出在服务器端处理它的任何特殊步骤的解释吗?那对我来说似乎是空的。
manisha '16

180

根据jQuery.serializeArray,返回键值对。

var data = $('#form').serializeArray().reduce(function(obj, item) {
    obj[item.name] = item.value;
    return obj;
}, {});

11
各位,大家在这里,键值对都来了!这是金色的!谢谢!如果我想要一个名为“零售商”的元素的值,请执行以下console.log($('#form')。serializeArray()。reduce(function(obj,item){obj [item.name] = item。 value; return obj;},{})['retailer']);
Yevgeniy Afanasyev 2015年

昨天,我基于此答案创建了一个JQuery方法,但可以使用多重选择和输入数组(名称为“ example []”)。您可以在下面的我的答案中找到它。无论如何,神经元的好方法,谢谢!:)
manuman94 '19

在所有答案中,这个最适合我!
VPetrovic '19

这个恕我直言是最好的答案!
拉胡尔

74
document.querySelector('form').addEventListener('submit', (e) => {
  const formData = new FormData(e.target);
  // Now you can use formData.get('foo'), for example.
  // Don't forget e.preventDefault() if you want to stop normal form .submission
});

这是一个挑剔的答案,但让我解释一下为什么这是一个更好的解决方案:

  • 我们正在正确处理表单提交,而不是按按钮。有些人喜欢按下Enter键。有些人使用替代输入设备,例如语音输入或其他辅助功能设备。处理表单提交,您将为每个人正确解决。

  • 我们正在研究提交的实际表单的表单数据。如果以后更改表单选择器,则不必更改所有字段的选择器。此外,您可能有几种具有相同输入名称的表格。无需消除过多的ID的歧义,只需根据提交的表单跟踪输入即可。如果适合您的情况,这还使您可以将单个事件处理程序用于多种形式。

  • FormData接口是一个相当新的接口,但浏览器很好地支持它。这是构建数据收集以获取表单内容的真实价值的好方法。没有它,您将不得不遍历所有元素(例如form.elements),并找出要检查的内容,不检查的内容,值是什么,等等。如果您需要旧的浏览器支持,那么完全有可能,但是FormData界面更简单。

  • 我在这里使用ES6 ...绝对不是必需的,因此如果您需要旧的浏览器支持,请将其更改回ES5兼容。


仅供参考,FormData对象不公开其值。要从中获取普通对象,请参见stackoverflow.com/questions/41431322/…–
phil294

2
@Blauhirn胡说八道,他们当然会揭露价值观。我的答案中的代码有效。你应该试试看。在这里,我为您准备了一个小提琴: jsfiddle.net/zv9s1xq5 如果您想要一个迭代器,请使用formData.entries()
布拉德,

我知道它可以工作,但是无法通过键访问属性。例如,formData.foo 未定义。从您的答案.get() 中可以看出,我认为这是不方便的。也许“不暴露”是错误的。因此,{ foo: 'bar' }要从submit事件中生成类似内容,您需要手动对其进行迭代。因此. To get a plain object from it, see [link]
phil294

1
@Blauhirn你错了。XMLHttpRequest直接支持FormData。 xhr.send(formData);
Brad

1
@Blauhirn JSON.stringify([...formData]) 或者,如果您想将键/值分开... [...formData].reduce((prev, cur) => { prev[cur[0]] = cur[1]; return prev;}, {})
Brad

25

使用.serializeArray()获取数组格式的数据,然后将其转换为对象:

function getFormObj(formId) {
    var formObj = {};
    var inputs = $('#'+formId).serializeArray();
    $.each(inputs, function (i, input) {
        formObj[input.name] = input.value;
    });
    return formObj;
}

如果我有类似的内容,这将覆盖我的复选框<input type="checkbox" name="someList" value="one" /> <input type="checkbox" name="someList" value="two" />。如果两者都选中,则该对象仅包含第二个复选框值。
dmathisen 2015年

2
这不是someList应该的情况type="radio"吗?
dylanjameswagner 2015年

赞成,因为接受的答案不会返回带有以下内容的键的对象:name:value
马特马克思主义

24

这是一个非常简单且简短的解决方案,甚至不需要Jquery。

var formElements=document.getElementById("myForm").elements;    
var postData={};
for (var i=0; i<formElements.length; i++)
    if (formElements[i].type!="submit")//we dont want to include the submit-buttom
        postData[formElements[i].name]=formElements[i].value;

1
这不适用于单选按钮:最后一个选项始终是存储到的选项postData
凯尔·法尔康纳

3
感谢您给我们一个非jquery的答案。
Glen Pierce

23

现在是2019年,有更好的方法可以做到这一点:

const form = document.querySelector('form');
const data = new URLSearchParams(new FormData(form).entries());

或者如果您想要一个普通对象

const form = document.querySelector('form');
const data = Object.fromEntries(new FormData(form).entries());

尽管请注意,这不适用于重复键,例如您从具有相同名称的多选和重复复选框中获得。


完全。虽然,我没有为所有具有相同名称的输入列表获取数组,这意味着我不得不使用document.getElementsByClassName一个for循环,但是,嘿,它仍然比要求jQuery等更好
alphanumeric0101

1
这个答案是我的最爱。但是它应该读document.querySelector而不是仅仅读querySelector
adabru '19

注意:“ FormData将仅使用使用名称属性的输入字段”-来自MDN
binaryfunt,


13

我用这个:

jQuery插件

(function($){
  $.fn.getFormData = function(){
    var data = {};
    var dataArray = $(this).serializeArray();
    for(var i=0;i<dataArray.length;i++){
      data[dataArray[i].name] = dataArray[i].value;
    }
    return data;
  }
})(jQuery);

HTML表格

<form id='myform'>
  <input name='myVar1' />
  <input name='myVar2' />
</form>

获取数据

var myData = $("#myForm").getFormData();

请注意,此插件不适用于存在多个具有相同名称的表单输入项的情况。最后一个条目将替换上一个条目,而预期的行为是将所有值都获得为Array
Milli

1
请注意,一年后,我现在认为这是一个糟糕的答案,没有人可以使用它。如前一条评论所述,单选按钮之类的功能将不起作用。上面有更好的答案,请改用其中之一。
Dustin Poissant

12
$("#form input, #form select, #form textarea").each(function() {
 data[theFieldName] = theFieldValue;
});

除此之外,您可能需要查看serialize()


11

这是一个仅适用于JavaScript的有效实现,可以正确处理复选框,单选按钮和滑块(可能还包括其他输入类型,但我只测试了它们)。

function setOrPush(target, val) {
    var result = val;
    if (target) {
        result = [target];
        result.push(val);
    }
    return result;
}

function getFormResults(formElement) {
    var formElements = formElement.elements;
    var formParams = {};
    var i = 0;
    var elem = null;
    for (i = 0; i < formElements.length; i += 1) {
        elem = formElements[i];
        switch (elem.type) {
            case 'submit':
                break;
            case 'radio':
                if (elem.checked) {
                    formParams[elem.name] = elem.value;
                }
                break;
            case 'checkbox':
                if (elem.checked) {
                    formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
                }
                break;
            default:
                formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
        }
    }
    return formParams;
}

工作示例:

    function setOrPush(target, val) {
      var result = val;
      if (target) {
        result = [target];
        result.push(val);
      }
      return result;
    }

    function getFormResults(formElement) {
      var formElements = formElement.elements;
      var formParams = {};
      var i = 0;
      var elem = null;
      for (i = 0; i < formElements.length; i += 1) {
        elem = formElements[i];
        switch (elem.type) {
          case 'submit':
            break;
          case 'radio':
            if (elem.checked) {
              formParams[elem.name] = elem.value;
            }
            break;
          case 'checkbox':
            if (elem.checked) {
              formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
            }
            break;
          default:
            formParams[elem.name] = setOrPush(formParams[elem.name], elem.value);
        }
      }
      return formParams;
    }

    //
    // Boilerplate for running the snippet/form
    //

    function ok() {
      var params = getFormResults(document.getElementById('main_form'));
      document.getElementById('results_wrapper').innerHTML = JSON.stringify(params, null, ' ');
    }

    (function() {
      var main_form = document.getElementById('main_form');
      main_form.addEventListener('submit', function(event) {
        event.preventDefault();
        ok();
      }, false);
    })();
<form id="main_form">
  <div id="questions_wrapper">
    <p>what is a?</p>
    <div>
      <input type="radio" required="" name="q_0" value="a" id="a_0">
      <label for="a_0">a</label>
      <input type="radio" required="" name="q_0" value="b" id="a_1">
      <label for="a_1">b</label>
      <input type="radio" required="" name="q_0" value="c" id="a_2">
      <label for="a_2">c</label>
      <input type="radio" required="" name="q_0" value="d" id="a_3">
      <label for="a_3">d</label>
    </div>
    <div class="question range">
      <label for="a_13">A?</label>
      <input type="range" required="" name="q_3" id="a_13" min="0" max="10" step="1" list="q_3_dl">
      <datalist id="q_3_dl">
        <option value="0"></option>
        <option value="1"></option>
        <option value="2"></option>
        <option value="3"></option>
        <option value="4"></option>
        <option value="5"></option>
        <option value="6"></option>
        <option value="7"></option>
        <option value="8"></option>
        <option value="9"></option>
        <option value="10"></option>
      </datalist>
    </div>
    <p>A and/or B?</p>
    <div>
      <input type="checkbox" name="q_4" value="A" id="a_14">
      <label for="a_14">A</label>
      <input type="checkbox" name="q_4" value="B" id="a_15">
      <label for="a_15">B</label>
    </div>
  </div>
  <button id="btn" type="submit">OK</button>
</form>
<div id="results_wrapper"></div>

编辑:

如果您正在寻找更完整的实现,请查看我为此所做的项目的这一部分。最终,我将使用我提供的完整解决方案来更新此问题,但这也许会对某人有所帮助。


1
好的解决方案:)我确实使用setOrPush函数发现了一个错误。它不包括检查目标是否已经是数组的检查,如果有多个具有相同名称的选中复选框,则会导致创建深度嵌套的数组。
Wouter van Dam

@KyleFalconer不错!您为什么不合并收音机和复选框的开关盒-它们将正常工作(我想)。
伊桑(Ethan)

@Ethan这是因为一个复选框可以选择多个值,而一个收音机只能选择一个值,所以我存储值的方式发生了变化。
凯尔·法尔康纳

@KyleFalconer是的,我理解。借助“ SetOrPush”例程,用于处理“复选框”的代码也处理了“无线电”的单个可能选择。
伊桑

@Ethan哦,我想我知道您在说什么。可以用任何一种方法完成,但是我想这样做是因为我只需要一个值,而不是值数组。
凯尔·法尔康纳

9

如果您使用的是jQuery,则这里有一个小功能可以满足您的需求。

首先,在表单中添加一个ID(除非它是页面上唯一的表单,否则您可以仅使用“ form”作为dom查询)

<form id="some-form">
 <input type="radio" name="foo" value="1" checked="checked" />
 <input type="radio" name="foo" value="0" />
 <input name="bar" value="xxx" />
 <select name="this">
  <option value="hi" selected="selected">Hi</option>
  <option value="ho">Ho</option>
</form>

<script>
//read in a form's data and convert it to a key:value object
function getFormData(dom_query){
    var out = {};
    var s_data = $(dom_query).serializeArray();
    //transform into simple data/value object
    for(var i = 0; i<s_data.length; i++){
        var record = s_data[i];
        out[record.name] = record.value;
    }
    return out;
}

console.log(getFormData('#some-form'));
</script>

输出如下所示:

{
 "foo": "1",
 "bar": "xxx",
 "this": "hi"
}

7

您也可以使用FormData对象。FormData对象使您可以编译一组键/值对,以使用XMLHttpRequest发送。它主要用于发送表单数据,但可以独立于表单使用以传输密钥数据。

        var formElement = document.getElementById("myform_id");
        var formData = new FormData(formElement);
        console.log(formData);

谢谢,但是如果您没有身份证怎么办?如果您有一个表单作为JQuery对象怎么办?var form = $(this).closest('form'); ?应该var formElement = document.getElementById(form [0]); 工作而不是您的第一线?不幸的是,它无法正常工作。你知道为什么吗?
Yevgeniy Afanasyev

实际上,并非所有浏览器都支持FormData :(所以最好使用其他方法
numediaweb

谢谢。我使用了最新版的chrome,但仍然无法正常工作。所以我从这里得到了#neuront的答案。
Yevgeniy Afanasyev

6

这会将所有表单字段附加到JavaScript对象“ res”:

var res = {};
$("#form input, #form select, #form textarea").each(function(i, obj) {
    res[obj.name] = $(obj).val();
})

可能是因为此答案已经在2010
。– nathanvda

我不知道 对于这么短的答案,这不足为奇。即使这样,参考在哪里?
gamliela,2015年

认真吗 您不相信没有参考的我的评论,甚至无法查看答案列表以查看它们是否相同?stackoverflow.com/a/2276469/216513
nathanvda

我认为您的意思是另一个问题的答案。我现在不记得细节和原因了。可能是因为不完全相同
gamliela

1
对于希望它可以进行输入,选择多个和textarea的人的完美答案。因为,使用序列化不会获得在select标签中选择的所有项目。但是,使用.val(),您将获得所需的数组。简单直接的答案。
Sailesh Kotha '17

6

我提供了答案,还可以返回所需的对象。

function getFormData(form) {
var rawJson = form.serializeArray();
var model = {};

$.map(rawJson, function (n, i) {
    model[n['name']] = n['value'];
});

return model;
}

这根本不会处理数组。foo[bar][] = 'qux'应该序列化到{ foo: { bar: [ 'qux' ] } }
amphetamachine,

6

基于神经元的响应,我创建了一个简单的JQuery方法,该方法以键值对的形式获取表单数据,但它适用于多选和name ='example []'的数组输入。

使用方法如下:

var form_data = $("#form").getFormObject();

您可以在下面找到其定义及其工作方式的示例。

// Function start
$.fn.getFormObject = function() {
    var object = $(this).serializeArray().reduce(function(obj, item) {
        var name = item.name.replace("[]", "");
        if ( typeof obj[name] !== "undefined" ) {
            if ( !Array.isArray(obj[name]) ) {
                obj[name] = [ obj[name], item.value ];
            } else {
               obj[name].push(item.value);
            }
        } else {
            obj[name] = item.value;
        }
        return obj;
    }, {});
    return object;
}
// Function ends

// This is how it's used
$("#getObject").click( function() {
  var form_data = $("#form").getFormObject();
  console.log(form_data);
});
/* Only to make view better ;) */
#getObject {
  padding: 10px;
  cursor:pointer;
  background:#0098EE;
  color:white;
  display:inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<form id="form">
  <input type="text" name="text" value="Hola amigo" /> 
  
  <input type="text" name="text_array[]" value="Array 1" /> 
  <input type="text" name="text_array[]" value="Array 2" /> 
  <input type="text" name="text_array[]" value="Array 3" /> 
  
  <select name="multiselect" multiple>
    <option name="option1" selected> option 1 </option>
    <option name="option2" selected> option 2 </option>
  </select>
  
  <input type="checkbox" name="checkbox" value="checkbox1" checked/>
  <input type="checkbox" name="checkbox" value="checkbox2" checked/>
  
  <input type="radio" name="radio" value="radio1" checked/>
  <input type="radio" name="radio" value="radio2"/>

</form>

<div id="getObject"> Get object (check the console!) </div>


5
var formData = new FormData($('#form-id'));
params   = $('#form-id').serializeArray();

$.each(params, function(i, val) {
    formData.append(val.name, val.value);
});

4
function getFormData($form){
    var unindexed_array = $form.serializeArray();
    var indexed_array = {};

    $.map(unindexed_array, function(n, i){
        if(indexed_array[n['name']] == undefined){
            indexed_array[n['name']] = [n['value']];
        }else{
            indexed_array[n['name']].push(n['value']);
        }
    });

    return indexed_array;
}

4

您可以使用此函数从表单获取对象或JSON。

使用它:

var object = formService.getObjectFormFields("#idform");

 function  getObjectFormFields(formSelector)
        {
            /// <summary>Função que retorna objeto com base nas propriedades name dos elementos do formulário.</summary>
            /// <param name="formSelector" type="String">Seletor do formulário</param>

            var form = $(formSelector);

            var result = {};
            var arrayAuxiliar = [];
            form.find(":input:text").each(function (index, element)
            {
                var name = $(element).attr('name');

                var value = $(element).val();
                result[name] = value;
            });

            form.find(":input[type=hidden]").each(function (index, element)
            {
                var name = $(element).attr('name');
                var value = $(element).val();
                result[name] = value;
            });


            form.find(":input:checked").each(function (index, element)
            {
                var name;
                var value;
                if ($(this).attr("type") == "radio")
                {
                    name = $(element).attr('name');
                    value = $(element).val();
                    result[name] = value;
                }
                else if ($(this).attr("type") == "checkbox")
                {
                    name = $(element).attr('name');
                    value = $(element).val();
                    if (result[name])
                    {
                        if (Array.isArray(result[name]))
                        {
                            result[name].push(value);
                        } else
                        {
                            var aux = result[name];
                            result[name] = [];
                            result[name].push(aux);
                            result[name].push(value);
                        }

                    } else
                    {
                        result[name] = [];
                        result[name].push(value);
                    }
                }

            });

            form.find("select option:selected").each(function (index, element)
            {
                var name = $(element).parent().attr('name');
                var value = $(element).val();
                result[name] = value;

            });

            arrayAuxiliar = [];
            form.find("checkbox:checked").each(function (index, element)
            {
                var name = $(element).attr('name');
                var value = $(element).val();
                result[name] = arrayAuxiliar.push(value);
            });

            form.find("textarea").each(function (index, element)
            {
                var name = $(element).attr('name');
                var value = $(element).val();
                result[name] = value;
            });

            return result;
        }


2
虽然此链接可以回答问题,但最好在此处包括答案的基本部分,并提供链接以供参考。如果链接的页面发生更改,仅链接的答案可能会失效。- 来自点评
Wahyu Kristianto

但是此链接具有帮助他(我认为)的功能。但是我下次要放代码。
Marcos Costa

3

我写了一个库来解决这个问题:JSONForms。它采用一种形式,遍历每个输入并构建一个易于阅读的JSON对象。

说您有以下形式:

<form enctype='application/json'>
  <input name='places[0][city]' value='New York City'>
  <input type='number' name='places[0][population]' value='8175133'>
  <input name='places[1][city]' value='Los Angeles'>
  <input type='number' name='places[1][population]' value='3792621'>
  <input name='places[2][city]' value='Chicago'>
  <input type='number' name='places[2][population]' value='2695598'>
</form>

将表单传递给JSONForms的encoding方法将返回以下对象:

{
  "places": [
    {
      "city": "New York City",
      "population": 8175133
    },
    {
      "city": "Los Angeles",
      "population": 3792621
    },
    {
      "city": "Chicago",
      "population": 2695598
    }
  ]
}

这是您的表格演示


外观和效果很好,谢谢。缩小版仅需一件事,即称为映射文件,应该是可选的imo。
adi518

2

$( "form" ).bind( "submit", function(e) {
    e.preventDefault();
    
    console.log(  $(this).serializeObject() );    

    //console.log(  $(this).serialize() );
    //console.log(  $(this).serializeArray() );

});


$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();

    $.each( a, function() {
        if ( o[this.name] !== undefined) 
        {
            if ( ! o[this.name].push ) 
            {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        }
        else 
        {
            o[this.name] = this.value || '';
        }
    });

    return o;
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<form>

    <input type="radio" name="foo" value="1" checked="checked" />
    <input type="radio" name="foo" value="0" />
    <input name="bar" value="xxx" />

    <select name="this">
        <option value="hi" selected="selected">Hi</option>
        <option value="ho">Ho</option>
    </select>

    <input type="submit" value="Submit" />

</form>

码笔


2

对于那些偏爱Object序列化字符串而不是序列化字符串的人(例如,由$(form).serialize()和返回的字符串,并在上稍作改进$(form).serializeArray()),请随时使用以下代码:

var Form = {
    _form: null,
    _validate: function(){
        if(!this._form || this._form.tagName.toLowerCase() !== "form") return false;
        if(!this._form.elements.length) return false;
    }, _loopFields: function(callback){
        var elements = this._form.elements;
        for(var i = 0; i < elements.length; i++){
            var element = form.elements[i];
            if(name !== ""){
                callback(this._valueOfField(element));
            }
        }
    }, _valueOfField: function(element){
        var type = element.type;
        var name = element.name.trim();
        var nodeName = element.nodeName.toLowerCase();
        switch(nodeName){
            case "input":
                if(type === "radio" || type === "checkbox"){
                    if(element.checked){
                        return element.value;
                    }
                }
                return element.value;
                break;
            case "select":
                if(type === "select-multiple"){
                    for(var i = 0; i < element.options.length; i++){
                        if(options[i].selected){
                            return element.value;
                        }
                    }
                }
                return element.value;
                break;
            case "button":
                switch(type){
                    case "reset": 
                    case "submit": 
                    case "button":
                        return element.value;
                        break;
                }
                break;
        } 
    }, serialize: function(form){
        var data = {};
        this._form = form;

        if(this._validate()){
            this._loopFields(function(value){
                if(value !== null) data[name] = value;
            });
        }
        return data;
    }
};

要执行它,只需使用Form.serialize(form),函数将返回Object与此类似的内容:

<!-- { username: "username", password: "password" } !-->
<input type="text" value="username">
<input type="password" value="password">

另外,这意味着您不必仅为一个序列化功能安装整个jQuery捆绑包。


1

我编写了一个函数,该函数负责多个复选框和多个选择。在这种情况下,它将返回一个数组。

function getFormData(formId) {
    return $('#' + formId).serializeArray().reduce(function (obj, item) {
        var name = item.name,
            value = item.value;

        if (obj.hasOwnProperty(name)) {
            if (typeof obj[name] == "string") {
                obj[name] = [obj[name]];
                obj[name].push(value);
            } else {
                obj[name].push(value);
            }
        } else {
            obj[name] = value;
        }
        return obj;
    }, {});
}

1

显示表单输入元素字段和输入文件以提交表单而不刷新页面,并在其中包含文件的情况下获取所有值

<form id="imageUploadForm"   action="" method="post" enctype="multipart/form-data">
<input type="text" class="form-control" id="fname" name='fname' placeholder="First Name" >
<input type="text" class="form-control" name='lname' id="lname" placeholder="Last Name">
<input type="number" name='phoneno'  class="form-control" id="phoneno" placeholder="Phone Number">
<textarea class="form-control" name='address' id="address" rows="5" cols="5" placeholder="Your Address"></textarea>
<input type="file" name="file" id="file" >
<input type="submit" id="sub" value="Registration">					   
</form>
在Submit按钮页面上,会将ajax请求发送到您的php文件。
$('#imageUploadForm').on('submit',(function(e) 
{
     fname = $('#fname').val();
     lname =  $('#lname').val();
     address =  $('#address').val();
     phoneno =  $('#phoneno').val();
     file =  $('#file').val();
     e.preventDefault();
     var formData = new FormData(this);
     formData.append('file', $('#file')[0]);
     formData.append('fname',$('#fname').val());
     formData.append('lname',$('#lname').val());
     formData.append('phoneno',$('#phoneno').val());
     formData.append('address',$('#address').val());
     $.ajax({
		type:'POST',
                url: "test.php",
                //url: '<?php echo base_url().'edit_profile/edit_profile2';?>',

                data:formData,
                cache:false,
                contentType: false,
                processData: false,
                success:function(data)
                {
                     alert('Data with file are submitted !');

                }

     });

}))


这里需要什么新的FormData?
Sahu V Kumar'17年

1
@VishalKumarSahu我正在上传文件,所以这就是为什么我使用formData的原因。
Mohsin Shoukat

1
$(form).serializeArray().reduce(function (obj, item) {
      if (obj[item.name]) {
           if ($.isArray(obj[item.name])) {
               obj[item.name].push(item.value);
           } else {
                var previousValue = obj[item.name];
                obj[item.name] = [previousValue, item.value];
           }
      } else {
           obj[item.name] = item.value;
      }

     return obj;
}, {});

它将解决问题:不能与多重选择一起使用。


0

你们都不完全正确。您不能写:

formObj[input.name] = input.value;

因为这样,如果您有多选列表-它的值将被最后一个覆盖,因为它的传输方式为:“ param1”:“ value1”,“ param1”:“ value2”。

因此,正确的方法是:

if (formData[input.name] === undefined) {
    formData[input.name] = input.value;
}
else {
    var inputFieldArray = $.merge([], $.isArray(formData[input.name]) ? formData[input.name] : [formData[input.name]]);
    $.merge(inputFieldArray, [input.value]);
    formData[input.name] = $.merge([], inputFieldArray);
}

0

这种方法应该做到这一点。它序列化表单数据,然后将它们转换为对象。还要照顾复选框组。

function getFormObj(formId) {
  var formParams = {};
  $('#' + formId)
    .serializeArray()
    .forEach(function(item) {
      if (formParams[item.name]) {
        formParams[item.name] = [formParams[item.name]];
        formParams[item.name].push(item.value)
      } else {
        formParams[item.name] = item.value
      }
    });
  return formParams;
}

适用于复选框,但不适用于控件共享name属性的单选按钮。
凯尔·法尔康纳

0

这是我编写的一个很好的香草JS函数,用于提取表单数据作为对象。它还具有用于将附加项插入对象以及清除表单输入字段的选项。

const extractFormData = ({ form, clear, add }) => {
  return [].slice.call(form.children).filter(node => node.nodeName === 'INPUT')
  .reduce((formData, input) => {
    const value = input.value
    if (clear) { input.value = '' }
    return {
      ...formData,
      [input.name]: value
    }
  }, add)
}

以下是将其用于发布请求的示例:

submitGrudge(e) {
  e.preventDefault()

  const form = e.target
  const add = { id: Date.now(), forgiven: false }
  const grudge = extractFormData({ form, add, clear: true })

  // grudge = {
  //  "name": "Example name",
  //  "offense": "Example string",
  //  "date": "2017-02-16",
  //  "id": 1487877281983,
  //  "forgiven": false
  // }

  fetch('http://localhost:3001/api/grudge', {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(grudge)
  })
    .then(response => response.json())
    .then(grudges => this.setState({ grudges }))
    .catch(err => console.log('error: ', err))
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.