jQuery DOM node with additional selectors

Question

I'm trying to do additional selections after I pass in a DOM node in jQuery. In this example, I'm trying to show a "hidden" submit button after a change in the select box (notice, I'm passing in the FORM element, NOT the SELECT element:

<form id="UpdateRegistrationStatusForm">
   <select id="registration_status" onchange="AdjustRegistrationStatus(this.form)">
         <option value="1">approved</option>
         <option value="2">cancelled</option>
   </select>
   <input id="registration_status_update" type="submit" style="display:none" value="update"/>
</form>

So, the jQuery code that I WANT TO DO, BUT DOESN'T WORK looks something like this...

function AdjustRegistrationStatus(myForm)
{
     jQuery(myForm "#registration_status_update").show();
     if (jQuery(myForm "#registration_status").val() == 1)
     {
          //do some other things here...
     }
}

I want to start with a FORM DOM object and add additional "string" selectors. Any help please?

Answer 1

For this, use an #id selector (an id should be unique, doesn't matter what it's relative to):

jQuery("#registration_status_update").show();

In other cases, use .find() like this:

jQuery("#registration_status_update").show();

.find() finds all descendants matching the selector, it's one of many tree traversal functions used for moving around.

Answer 2

I suspect you're looking for the find function, but I'm a bit confused because the subordinate elements have IDs, so you don't really need to start with the form. If they had some other, non-unique thing (like a class) you might do this:

var form = $('#UpdateRegistrationStatusForm');
form.find('.regupdate').show();
if (form.find('.regstatus').val() == 1)
{
    //...
}

..but with IDs there's not much reason to.