In jQuery, how can I select different elements by the name attribute?

Question

I am trying to loop through some elements in a form (radios, text boxes, and select boxes) and get the value from each element. I am looping through by the name of each element (I don't think I can use ID because a group of radio buttons all have different IDs, but all have the same name).

Here are 2 selectors that encompass all the elements I need:

$("input[name=" + prop + "]")
$("select[name=" + prop + "]")

where prop is the loop iterator.

I want perform the same operation on both selectors, so I tried to combine them:

$("input[name=" + prop + "]", "select[name=" + prop + "]")

But that didn't work.

Is there a way to combine a search for both input elements and select elements in one selector?

Thanks!

Answer 1

You have just one little mistake: You declared the two selectors as two different parameters instead of one parameter with the comma as part of the selector:

$("input[name=" + prop + "], select[name=" + prop + "]")

The way you wrote it uses the elements of the second selector parameter as the context the first selector parameter is resolved from.

Answer 2

If the comma is included in the selector string it will work. You could also do

$("input, select").filter("[name=" + prop + "]")

which eliminates writing "[name=" + prop + "]" twice.

Answer 3

Don't try to shoehorn everything you do into jQuery. The DOM Level 1 HTML standard gives you HTMLFormElement.elements, which is easy, fast and doesn't fail for unusual characters in name like a selector string would.

<form id="x" ...>
    <input type="text" name="foo" />
    <select name="foo"></select>
</form>

<script type="text/javascript">
    var prop= 'foo';
    var form= $('#x')[0];
    var foos= form.elements[prop];
    alert(foos.length+' '+foos[0].type+' '+foos[1].type);  // 2 text select-one
</script>