jquery无法将表单标记识别为Form,无法序列化

时间:2013-02-15 12:18:30

标签: jquery forms

我将一些表单附加到div容器,表单非常依赖于所选的选项,所以我没有任何id相关,因为可以多于一个,

所以我所做的只是

$('.item').each(function(index,element){

    var form= $(element).find('form');
    var formFields = form.serialize();

    console.debug("FORM: "+ formFields);

    //--- do something with those fields
});

但总是空的,所以我试着改变这一行

var formFields = getFormData(form);

并添加了此功能

function getFormData($form){
    var indexed_array = {};

    var selectors = "input,select";

    $form.find(selectors).each(function(i,e){

        var type    = $(e).attr('type');
        var name    = $(e).attr('name');
        indexed_array[name] = value;

    });

    $form.find('textarea').each(function(i,e){
        var name  = $(e).attr('name');
        var value = $(e).html();
        indexed_array[name] = value;
    });


    return indexed_array;
}

它有效,但问题是未选中复选框或单选按钮

所以我尝试更改此选项的选择器

var selectors = ":input"; //didnt work
var selectors = "input[type=text],input:checked,select"; //didnt work
var selectors = "input[type=text],input[type=checkbox]:checked,input[type=radio]:checked,select"; //didnt work

那些选择器尝试,没有回复我的任何东西,就像jquery没有将表单重新组合为表单,并且即使选择,检查或未选择任何输入,也没有检测到任何建议?

HTML,记住可以不止一个

<div class="column-2 item">
    <div class="widget-item">
        <span>12 Months Traffic Trend Unique Visits </span>
        <div class="widget-option">        
            <form>    
            <div class="form-item">   
                <div class="form-label">Compare With Last Year</div>
                <div class="form-element"><input type="checkbox" value="1" name="compareLastYear"></div>
             </div>
            </form>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

  

所以我没有任何相关的id,因为可以不止一个,

然后使用一个类来允许多个实例:

<form class='formClass'>

然后你可以做

$('.formClass').each(function(k,v){

    var form = v; // this is the form
    var fields = $(v).serialize();
});

FIDDLE