我有一个带有许多输入字段的表单。

当我用jQuery捕获提交表单事件时,是否有可能在一个关联数组中获得该表单的所有输入字段?


当前回答

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

答案(如上所述)只接受所选择的第一个元素的值,而不是所有元素。它也没有初始化或返回数据,前者会抛出一个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'))

注意:你只需要确保你选择的名称有[]附加到它的末尾,例如:

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

其他回答

试试下面的代码:

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

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

当然,这种解决方案的缺点是必须在[0]索引处访问单例对象。但在我看来,这比使用12行映射解决方案要好得多。

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

我希望这是最简单的方法。

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

在这个问题上有点晚了,但这个更简单:

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

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

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