Question

What if I have 2 forms on 1 page:

<form id="form1">
    <input type="text" />
    <input type="text" />
</form>

<form id="form2">
    <input type="text" />
</form>

And I want to access the input elements of the first one. I do the following:

$(document).ready(function() {
    var bla = $('#form1:input');
    alert(bla.length);
}); 

But it displays 0 count. I’ll appreciate if somebody can advise.

---

Thank you. The following syntax worked for me:

$('#form1 :input')

that is, putting the space.

Answer 1

Add a space to your selector.

#form1:input means #form1 is an :input

#form1 :input grabs an :input within #form1

---

When you combine selectors without a space or comma, you’re saying “not only does it qualify as X, but as Y and Z. e.g.:

div.foo#bar

The above means it’s a <div> element, that also has the foo class and has an ID of bar. e.g.
<div class="foo" id="bar"></div>

However:

div .foo .bar

The above means to look for a div that contains another element with the class foo which also contains another element with the class of bar. e.g.
<div><p class="foo"><img class="bar" /></p></div>