title: JavaScript - 'this.form' returns undefined
body: <p>I am trying to change the functionality of a part of my website.
  Currently, I have a Validate button that is outside of my table. Whenever the user clicks on that button, the Validation occurs.</p>
  
  <p>However, I am changing that in a way that the Validate button will be removed and the functionality will be moved to a Link Button that resides inside the table. </p>
  
  <p>Below is my code for this:</p>
  
  <pre><code>&lt;table width="100%" cellpadding="4"&gt;
  &lt;tr&gt;
      &lt;td valign="top"&gt;
          //something else here
      &lt;/td&gt;
      &lt;td valign="top" align="right"&gt;
          &lt;asp:GridView ID="myGridView" runat="server" OnRowDataBound="myGridView_RowDataBound"&gt;
          &lt;Columns&gt;
              &lt;asp:TemplateField HeaderText="Column 1"&gt;
                  &lt;ItemTemplate&gt;
                      // some control
                  &lt;/ItemTemplate&gt;
              &lt;/asp:TemplateField&gt;
              &lt;asp:TemplateField HeaderText="Column 2"&gt;
                  &lt;ItemTemplate&gt;
                      // some control
                  &lt;/ItemTemplate&gt;
              &lt;/asp:TemplateField&gt;
              &lt;asp:TemplateField HeaderText="Column 3"&gt;
                  &lt;ItemTemplate&gt;
                      // some control
                  &lt;/ItemTemplate&gt;
              &lt;/asp:TemplateField&gt;
              &lt;asp:TemplateField HeaderText="Column 4"&gt;
                  &lt;ItemTemplate&gt;
                      &lt;asp:LinkButton ID="lbValidate" runat="server" Text="Validate" OnClientClick="return MyValidation__Submit(this.form)" CausesValidation="true" OnClick="btnValidate_Click"&gt;&lt;/asp:LinkButton&gt;
                  &lt;/ItemTemplate&gt;
              &lt;/asp:TemplateField&gt;
          &lt;/Columns&gt;
          &lt;/asp:GridView&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;    
  &lt;div style="margin:10px 0px 10px 0px;"&gt;
      &lt;asp:Button ID="btnValidate" runat="server" Text="Validate" OnClientClick="return MyValidation__Submit(this.form)"  CommandArgument="Save" CausesValidation="true" OnClick="btnValidate_Click" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is sample of the JavaScript block which does the validation:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function MyValidation__Submit(formName) {
          alert("Test   :" + formName);
          // do validations
  
          var joForm = document.getElementById(formName.id);
  
          for (var i = 0; i &lt; joForm.elements.length; i++) {
              // do something
          }
  
          return true;
      }
   &lt;/script&gt;
  </code></pre>
  
  <p>This works very well when the Validate button is clicked but not on the LinkButton.
  To test it, I had to put the <code>alert("Test   :" + formName);</code> line. Whenever I fire the Validate button, the system alert returns a string value of "[object HTMLFormElement]" which I assume is okay considering that it functions the way I want it to. However, when I try to fire the Validate LinkButton which resides inside the table, the system alert returns "undefined" making the whole of my validation code useless.</p>
  
  <p>Can someone please point out what i'm missing here? I'm guessing it has something to do with the hierarchy of the controls since that's the only thing that's changed.</p>
  
  <p>Thanks!</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>This is the furthest I can go but I still can't get to the form.
  This one returns <code>HTMLDivElement</code>.</p>
  
  <pre><code>&lt;asp:LinkButton ID="lbValidate" runat="server" Text="Validate" OnClientClick="return MyValidation__Submit(this.parentNode.parentNode.parentNode.parentNode.parentNode)" CausesValidation="true" OnClick="btnValidate_Click"&gt;&lt;/asp:LinkButton&gt;
  </code></pre>
  
  <p>Yes, you read that right. It has 5 <code>.parentNode</code>. </p>