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

javascript jquery html-form

623381 观看

27回复

21270 作者的声誉

是否有一种简单的单行方式来获取表单的数据,如果它是以经典的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"
}

这样的事情太简单了,因为它没有(正确地)包括textareas,选择,单选按钮和复选框:

$("#form input").each(function() {
 data[theFieldName] = theFieldValue;
});
作者: Bart van Heukelom 的来源 发布者: 2010 年 2 月 16 日

回应 (27)


12

15365 作者的声誉

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

除此之外,你可能想看看serialize() ;

作者: pixeline 发布者: 16.02.2010 09:26

379

16106 作者的声誉

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

演示

作者: chelmertz 发布者: 16.02.2010 09:26

14

3557 作者的声誉

$('#myform').serialize();
作者: Andy Baird 发布者: 16.02.2010 09:28

460

7279 作者的声誉

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

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

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

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

看看这个jsfiddle演示

作者: Paul 发布者: 03.12.2011 05:52

4

1486 作者的声誉

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

var res = {};
$("#form input, #form select, #form textarea").each(function(i, obj) {
    res[obj.name] = $(obj).val();
})
作者: gamliela 发布者: 03.09.2013 03:41

25

251 作者的声誉

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

function getFormObj(formId) {
    var formObj = {};
    var inputs = $('#'+formId).serializeArray();
    $.each(inputs, function (i, input) {
        formObj[input.name] = input.value;
    });
    return formObj;
}
作者: Nils 发布者: 14.11.2013 06:22

151

5075 作者的声誉

基于jQuery.serializeArray,返回键值对。

var data = $('#form').serializeArray().reduce(function(obj, item) {
    obj[item.name] = item.value;
    return obj;
}, {});
作者: neuront 发布者: 03.06.2014 10:32

0

507 作者的声誉

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

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);
}
作者: Alexander 发布者: 12.06.2014 06:29

24

1362 作者的声誉

这是一个非常简单和简短的解决方案,甚至不需要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;
作者: Clox 发布者: 22.06.2014 03:58

6

9616 作者的声誉

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

        var formElement = document.getElementById("myform_id");
        var formData = new FormData(formElement);
        console.log(formData);
作者: numediaweb 发布者: 24.07.2014 09:58

158

46062 作者的声誉

更新了2014年的答案: HTML5 FormData执行此操作

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

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

作者: mikemaccana 发布者: 12.11.2014 04:59

0

316 作者的声誉

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

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;
}
作者: user1101791 发布者: 17.01.2015 09:53

2

3909 作者的声誉

我写了一个库来解决这个问题: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的encode方法会返回以下对象:

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

这是您的表单演示

作者: Cezary Wojtkowski 发布者: 28.01.2015 11:01

8

3389 作者的声誉

如果您正在使用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"
}
作者: RobKohr 发布者: 16.02.2015 02:33

5

1449 作者的声誉

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

$.each(params, function(i, val) {
    formData.append(val.name, val.value);
});
作者: George John 发布者: 01.02.2016 01:22

11

5475 作者的声誉

这是一个有效的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>

编辑:

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

作者: Kyle Falconer 发布者: 17.02.2016 10:19

3

64 作者的声誉

您可以使用此函数从表单中获取对象或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;
        }

作者: Marcos Costa 发布者: 07.07.2016 02:37

1

2903 作者的声誉

我写了一个函数来处理多个复选框和多个选择。在这些情况下,它返回一个数组。

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;
    }, {});
}
作者: István 发布者: 27.07.2016 03:28

3

43 作者的声誉

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;
}
作者: 郭润民 发布者: 08.08.2016 01:20

12

2162 作者的声誉

我用这个:

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();
作者: Dustin Poissant 发布者: 24.08.2016 01:03

1

18 作者的声誉

$(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;
}, {});

它将解决问题:无法使用多选。

作者: ke ke 发布者: 29.10.2016 07:30

1

565 作者的声誉

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

<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>
在提交按钮页面上将向您的php文件发送ajax请求。
$('#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 !');

                }

     });

}))

作者: Mohsin Shoukat 发布者: 24.02.2017 11:36

0

71 作者的声誉

这是一个很好的vanilla 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)
}

以下是与post请求一起使用的示例:

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))
}
作者: IanLancaster 发布者: 04.04.2017 10:12

57

118838 作者的声誉

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
});

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

  • 我们正在处理表单提交而不是按下按钮。有些人喜欢在田野上进入。有些人使用其他输入设备,如语音输入或其他辅助功能设备。处理表单提交,并为每个人正确解决它。

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

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

  • 我在这里使用ES6 ......不是任何要求,所以如果你需要旧的浏览器支持,请将其改回ES5兼容。

作者: Brad 发布者: 23.09.2017 06:13

4

479 作者的声誉

我已经包含了答案,还要回馈所需的对象。

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

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

return model;
}
作者: Tom McDonough 发布者: 12.10.2018 03:25

3

370 作者的声誉

基于neuront的响应,我创建了一个简单的JQuery方法,它以键值对的形式获取表单数据,但它适用于多选和数组输入,其名称为'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>

作者: manuman94 发布者: 01.04.2019 05:27

0

1202 作者的声誉

它是2019年,有一个更好的方法来做到这一点:

const form = querySelector('form');
const data = Object.fromEntries(new FormData(form).entries());
作者: fringd 发布者: 02.07.2019 04:57
32x32