Question

我正在尝试使用jQuery实现一个小的ajax形式。

我的简化形式看起来像这样，我给了所有输入和textareas class =“form_one_inputs”：

<form action="myform" id="form_one" method="post" >
     <div class="formleft">
          <p>Name</p>
     </div>
     <div class="formright">
          <input name="name" type="text" class="form_one_inputs" ></div>
     </div>
 ...
           <input id="email" maxlength="45" name="email" class="form_one_inputs" type="email">
 ...
           <textarea id="Comments" name="Comments" class="form_one_inputs" >
 ...

在我的jquery函数中，如果我将所有表单数据放入此对象，我可以使我的ajax提交工作：

 var formData = {
    'name'      : $('input[name=name]').val(),
    'email'     : $('input[name=email]').val(),
    'Comments'  : $('textarea[name=Comments]').val(),
    'subject'   : $('input[name=subject]').val()
  };

我可以遍历所有输入和textareas，如下所示：

$('.form_one_inputs').each(function(index, obj){
     alert(index + " : " + obj.value +  ":" + obj.name);
     //
     // need to add each input to formData object
 });

如何概括我的代码以将class =“form_one_inputs”的所有元素放入formData对象中。我一直在尝试，但没有成功使用formData.push（）

Answer 1

尝试这种方式：

$('.form_one_inputs').each(function(){
    var item = $(this);
    alert("name:" + item.attr('name') + " value:" + item.val());
 });

使用这种方式将所有项添加到formData对象：

var formData = {}; 
$('.form_one_inputs').each(function(){
    var item = $(this);
    formData[item.attr('name')] = item.val();
 });

如果要将表单中的所有元素序列化为JSON格式，请使用以下函数：

var jsonSerializer = function (form) {
    var data = {};
    var items = form.serializeArray();
    for (var i = 0; i < items.length; i++)
       data[items[i].name] = items[i].value;
       return data;
};

var formData = jsonSerializer($('form'));

以这种方式，您不需要知道输入的名称

Answer 2

var formData = {};
$('.form_one_inputs').each(function(){
    var $this = $(this);
    formData[$this.attr('name')] = $this.val();
});

保持我的所有输入类型（即那些不使用val（））的人不会工作;

Answer 3

试试这段代码：

$('.form_one_inputs').each(function(index, obj){
     alert(index + " : " + obj.value +  ":" + obj.name);
     formData.append(obj.name, obj.value);
 });

Answer 4

$('.form_one_inputs').each(function(index, obj){
     formData[obj.name] = obj.value;
 });

喜欢这个吗？

Answer 5

(function($){
    $.fn.serializeObject = function(){

        var self = this,
            json = {},
            push_counters = {},
            patterns = {
                "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
                "key":      /[a-zA-Z0-9_]+|(?=\[\])/g,
                "push":     /^$/,
                "fixed":    /^\d+$/,
                "named":    /^[a-zA-Z0-9_]+$/
            };


        this.build = function(base, key, value){
            base[key] = value;
            return base;
        };

        this.push_counter = function(key){
            if(push_counters[key] === undefined){
                push_counters[key] = 0;
            }
            return push_counters[key]++;
        };

        $.each($(this).serializeArray(), function(){

            // skip invalid keys
            if(!patterns.validate.test(this.name)){
                return;
            }

            var k,
                keys = this.name.match(patterns.key),
                merge = this.value,
                reverse_key = this.name;

            while((k = keys.pop()) !== undefined){

                // adjust reverse_key
                reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');

                // push
                if(k.match(patterns.push)){
                    merge = self.build({}, self.push_counter(reverse_key), merge);
                }

                // fixed
                else if(k.match(patterns.fixed)){
                    merge = self.build({}, k, merge);
                }

                // named
                else if(k.match(patterns.named)){
                    merge = self.build({}, k, merge);
                }
            }

            json = $.extend(true, json, merge);
        });

        return json;
    };
})(jQuery);

var myobj = $('.form_one_inputs').serializeObject();

...

Answer 6

您正在尝试使用推送。推送用于阵列。在您的情况下，您需要创建一个哈希，其中键是输入的名称，值是输入的值。

var formData = {};
$('.form_one_inputs').each(function(index, obj){
  formData[obj.name] = obj.value
});

您是否尝试使用表单序列化？

如何将名称值对象推入数组？

6 个答案: