jQuery序列化和serializeArray不适用于谷歌浏览器

Question

I have following html.

<fieldset id="fieldset-step_3">   
       <input type="text" value="2" id="rule_form-lead_time" name="rule_form[lead_time]"> 
       <select class="w50" id="rule_form-operator" name="rule_form[operator]">
            <option label="&lt;" value="&lt;">&lt;</option>
            <option selected="selected" label="&gt;" value="&gt;">&gt;</option>
       </select>
       <button type="button" id="next" name="next">Next</button>
</fieldset>

I use following jquery code for get values when click next button.

   $('#next').click(function () {
        var values = $('#fieldset-step_3').serialize();
        alert(values);          
   });

This code working for firefox 8 and opera 11.60 beta. But it does not work for google chrome 15.0.874.121.

Please help me. Give me another idea for get field-set values from jquery.

Answer 1

You seem to have found a bug. I tried this in Chrome 11 and saw the same thing. If I serialize the form, it works. If I serialize individual form elements, it works. If I try to serialize a div containing all of the form elements, or your fieldset tag, it doesn't.

Answer 2

I run into this today. $('#formid').serialize(); works fine with firefox,but nothing came out in chrome. After some tests,here's my answer:

in chrome,the form name and id must be the same to make serialize work.

Answer 3

This is quite a simple way, but does the job, and u can customize it the way u want.

parseField = function( $object ){
  result = new Array();
  $object.find('select[value!=""], input[value!=""]').each(function(){
    var obj = {};
    obj.key = $(this).attr('name');
    obj.val = $(this).val();
    result.push( obj );
  });
  return result;
}

You can use it like:

var values = parseField( $('#fieldset-step_3') );
$.each(values, function(i,obj){
  alert( 'My key is: ' + obj.key + ' and my value: ' + obj.val );
});

Answer 4

mmm try adding

<input type="text" value="2" id="rule_form-lead_time" name="rule_form[lead_time]" />

insted of

<input type="text" value="2" id="rule_form-lead_time" name="rule_form[lead_time]">

when validating this i found

end tag for "input" omitted, but OMITTAG NO was specified

…ut type="text" value="2" id="rule_form-lead_time" name="rule_form[lead_time]"> 


You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".