Jquery - multiple selectors - get elements in sequence

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.

Seems to be working the way you intend in Chrome & IE 9 - jsfiddle.net/P5pAY/1. What browser are you using (not sure it makes a difference)? — James Hill
– James Hill, Commented Nov 5, 2011 at 21:37
Also, what version of jQuery are you using? @JamesHill's fiddle shows the same error you're having for jQuery 1.2.6, but works for later versions. — nrabinowitz
– nrabinowitz, Commented Nov 5, 2011 at 21:42

Rob W · Accepted Answer · 2011-11-05 21:40:50Z

3

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)

answered Nov 5, 2011 at 21:40

Rob W

350k87 gold badges811 silver badges683 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

FreeCandies · Accepted Answer · 2011-11-05 21:39:55Z

0

try :input selector. It should consider them all as inputs

answered Nov 5, 2011 at 21:39

FreeCandies

1,12310 silver badges21 bronze badges

Comments

rlemon · Accepted Answer · 2011-11-05 22:33:58Z

0

you do not need jquery for this.... here is a non-jquery approach to the problem.

var arr = [];
window.onload = function() {
    getChildElements(document.getElementById("myform"), arr);
    console.log(arr);
};

function getChildElements(element, arr) {
    var elements = element.childNodes;
    for (var i = 0, l = elements.length; i < l; i++) {
        if (elements[i].type == "select-one") {
            getChildElements(elements[i], arr);
        } else if (elements[i].nodeType == 1) {
            arr.push(elements[i]);
        }
    }
}

however if you wanted it to work with jquery just change the elements definition with...

var elements = element.childNodes || element[0].childNodes;

answered Nov 5, 2011 at 22:33

rlemon

17.7k14 gold badges96 silver badges126 bronze badges

Collectives™ on Stack Overflow

Jquery - multiple selectors - get elements in sequence

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related