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

是否有一种简单的单行方式来获取表单的数据，就像以经典的仅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;
});

当前回答

这里是一个工作的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;
}

工作的例子:

编辑:

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

2016-02-17 22:19:38

其他回答

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

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

2016-02-01 13:22:21

基于jQuery。serializeArray，返回键值对。

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

2014-06-03 10:32:16

2014年的最新答案:HTML5 FormData做到了这一点

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

然后，您可以准确地发布formData——它包含表单中使用的所有名称和值。

2014-11-12 16:59:31

我编写了一个库来解决这个问题: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
    }
  ]
}

下面是表单的演示。

2015-01-28 23:01:41

我有点惊讶，因为下面没有人提到解决方案。

通过document.forms.namedItem函数获取表单数据

var form = document.forms.namedItem("fileinfo");

form.addEventListener('submit', function(ev) {
   var oData = new FormData(form);
}

HT的

<form name="fileinfo">
  <label>Your email address:</label>
  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
  <label>Custom file label:</label>
  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
  <label>File to stash:</label>
  <input type="file" name="file" required />
  <input type="submit" value="Stash the file!" />
</form>
<div></div>

2021-12-18 08:04:28

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

推荐文章

最新文章

标签