Using closest for getting form object

Question

Recently, I am reviewing client side code written by another programmer. I am surprised with code which is used for getting form object.

HTML for Login Form

<form id="frm_login" action="">
  <input type="text" name="username" id="username">
  <input type="password" name="pwd" id="pwd">
</form>

He has used following code to get form object

$frm = $("input[type='password']").closest("form");

But there is simple code for getting form object which I prefer:

$frm = $("#frm_login");

Is there any reason to use closest to get form object in above scenario?

I would really like to know if there is any performance issues.

Answer 1

The id of element is supposed to be unique. If there is single form on page then there is no need to relate it to its parent using closest. It would have more sense if the form does not have id. Getting form through id seem more straight forward and fast.

If there are multiple forms and one have to get the form in which the element exists then using closest make sense. This could be understood with the following example.

Live Demo

Html

<form id="frm_login1" action="">
    <input type="text" name="username" id="username1" />
    <input type="password" name="pwd" id="pwd1">
    <table>
        <tr>
            <td>
                <input type="text" class="myInputClass" />
            </td>
        </tr>
    </table>
</form>
<form id="frm_login2" action="">
    <input type="text" name="username" id="username2">
    <input type="password" name="pwd" id="pwd2">
    <table>
        <tr>
            <td>
                <input type="text" class="myInputClass" />
            </td>
        </tr>
    </table>
</form>

Javascript

$("input[type='password']").closest("form").each(function(){
   alert($(this).find('.myInputClass').val()); 
});

Answer 2

If there is single form on page then there is no need to relate it to its parent using closest. It would have more sense if the form does not have id. Getting form through id seem more straight forward and fast.

But The Closest() method is very cool and very useful, especially when you start to deal with event delegation in which events are trapped at a higher level in the node tree than are the elements that triggered the event.

the closest() method searches through these elements and their ancestors in the DOM tree and constructs a new jQuery object from the matching elements.

Answer 3

as others said, if you have id, no need to use closest to get parent form. and using id is faster.

HOWEVER, in some cases you need to use closest to get form, for example, if you write a universal function for validating every password input in every form, in this case you don't like to get forms by ids and search for its childes passwordfields to prevent auto submitting, so i guess the guy who wrote the code, is doing this(a function which validates passwords before submit)

$("input[type='password']").each(function(){
   $frm = .closest("form");
   $frm.submit(function(event){
       if( not valid password){
          ......
          return false;
       }
   });

});