Question

I have a form like this

<form id="myform">
<input type="hidden" name="a" value="a1"/>
<input type="hidden" name="b" value="b2"/>
<select name="c"><option value="c3" selected="true"/></select>
<input type="text" name="d" value="d4"/>
</form>

Now, I want to get list of all input and select elements in the form

  var mydata = new Array();
  $('#myform').find('input, select').each(function ()
  {
    mydata.push($(this).val());
  });

Result I am getting is: a1, b2, d4, c3
But what I want to get is: a1,b2,c3,d4 (in the same sequence as displayed in UI).

Note: I can give some dummy class (say: mydatafields) to all the input and select elements and use:

$('mydatafields').forEach()

something like, but I am checking if there is a better solution.

Thanks in advance.

Answer 1

The most efficient way is by adding a temporary attribute (e.g class name) to your elements, then loop through each element, and finally remove it.

var mydata = [];
$('#myform').find('input, select').addClass('temporaryClassName');
$('.temporaryClassName').each(function() {
    mydata.push($(this).val());
}).removeClass('temporaryClassName');

An alternative method consists of selecting ever input element using :input, and filter the desired elements. For this example, filtering is not strictly needed. I have included the line for educative purposes.

var mydata = [];
$('#myform').find('input, select').each(function() {
    if(!/^input|select$/i.test(this.nodeName)) return; //Filter non-input/select
    mydata.push($(this).val());
});
alert(mydata)