How to get value of textbox inside of gridview

Question

My GridView has a ContentTemplate containing ItemTemplate. ItemTemplate has textbox and button.

Here is a fragment of the code:

     <asp:TemplateField HeaderText="Email">  
      <ItemTemplate>
         <asp:TextBox runat="server" ID="txtEmail" Text='<%#Eval("CustEmail") %>' />
              <asp:Button id="btnUpdate" Text="Update Email" ButtonType="Button" CommandName="UpdateEmail" 
               Visible="true" runat="server"
               OnClientClick="return ValidateEmail(this)" />

         </ItemTemplate>
     </asp:TemplateField>

What I'm doing is calling ValidateEmail() method to validate my email field. For this I need to get email field value to validate it.

This is my ValidateEmail() method:

        function ValidateEmail(btnObj)
        {

        alert(btnObj.id);
        var email = $(btnObj).closest('input').attr('id');
        alert(email)
        return false;
    }

I'm able to get id for my button which is MainContent_GridView1_btnUpdate_0

This is my rendered html for the GridView:

<div>
<table cellspacing="0" id="MainContent_GridView1" style="border-collapse:collapse;">
    <tr>
        <th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$MainContent$GridView1&#39;,&#39;Sort$CustID&#39;)">Customer ID</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$MainContent$GridView1&#39;,&#39;Sort$CustFirstName&#39;)">First Name</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$MainContent$GridView1&#39;,&#39;Sort$CustLastName&#39;)">Last Name</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$MainContent$GridView1&#39;,&#39;Sort$CustCity&#39;)">City</a></th><th scope="col">Email</th>
    </tr><tr>
        <td>
          <span id="MainContent_GridView1_lblCustID_0">12</span>
        </td><td>
          <span id="MainContent_GridView1_lblFirstName_0">Anders</span>
        </td><td>
          <span id="MainContent_GridView1_lblLastName_0">Rohansen</span>
        </td><td>
         <span id="MainContent_GridView1_lblCity_0">Takoma Park</span>
       </td><td>
         <input name="ctl00$MainContent$GridView1$ctl02$txtEmail" type="text" value="a.rohansen@testemail.com" id="MainContent_GridView1_txtEmail_0" />
          <span data-val-controltovalidate="MainContent_GridView1_txtEmail_0" data-val-errormessage="Must enter Email Address" data-val-validationGroup="grpEmail" id="MainContent_GridView1_ctl00_0" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="visibility:hidden;">Must enter Email Address</span>
           <input type="submit" name="ctl00$MainContent$GridView1$ctl02$btnUpdate" value="Update Email" onclick="return ValidateEmail(this);WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$GridView1$ctl02$btnUpdate&quot;, &quot;&quot;, true, &quot;grpEmail&quot;, &quot;&quot;, false, false))" id="MainContent_GridView1_btnUpdate_0" ButtonType="Button" />

         </td>
    </tr><tr style="background-color:#EEEEEE;">
        <td>
          <span id="MainContent_GridView1_lblCustID_1">8</span>
        </td><td>
          <span id="MainContent_GridView1_lblFirstName_1">Deborah</span>
        </td><td>
          <span id="MainContent_GridView1_lblLastName_1">Damien</span>
        </td><td>
         <span id="MainContent_GridView1_lblCity_1">Fresno</span>
       </td><td>
         <input name="ctl00$MainContent$GridView1$ctl03$txtEmail" type="text" value="d.damien@testemail.com" id="MainContent_GridView1_txtEmail_1" />
          <span data-val-controltovalidate="MainContent_GridView1_txtEmail_1" data-val-errormessage="Must enter Email Address" data-val-validationGroup="grpEmail" id="MainContent_GridView1_ctl00_1" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="visibility:hidden;">Must enter Email Address</span>
           <input type="submit" name="ctl00$MainContent$GridView1$ctl03$btnUpdate" value="Update Email" onclick="return ValidateEmail(this);WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$GridView1$ctl03$btnUpdate&quot;, &quot;&quot;, true, &quot;grpEmail&quot;, &quot;&quot;, false, false))" id="MainContent_GridView1_btnUpdate_1" ButtonType="Button" />

         </td>
    </tr><tr>
        <td>
          <span id="MainContent_GridView1_lblCustID_2">7</span>
        </td><td>
          <span id="MainContent_GridView1_lblFirstName_2">Derek</span>
        </td><td>
          <span id="MainContent_GridView1_lblLastName_2">Chaddick</span>
        </td><td>
         <span id="MainContent_GridView1_lblCity_2">Fairfield</span>
       </td><td>
         <input name="ctl00$MainContent$GridView1$ctl04$txtEmail" type="text" value="d.chaddick@testemail.com" id="MainContent_GridView1_txtEmail_2" />
          <span data-val-controltovalidate="MainContent_GridView1_txtEmail_2" data-val-errormessage="Must enter Email Address" data-val-validationGroup="grpEmail" id="MainContent_GridView1_ctl00_2" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="visibility:hidden;">Must enter Email Address</span>
           <input type="submit" name="ctl00$MainContent$GridView1$ctl04$btnUpdate" value="Update Email" onclick="return ValidateEmail(this);WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$GridView1$ctl04$btnUpdate&quot;, &quot;&quot;, true, &quot;grpEmail&quot;, &quot;&quot;, false, false))" id="MainContent_GridView1_btnUpdate_2" ButtonType="Button" />

         </td>
    </tr>
</table>
 </div>

How can I get the id for email text box?

Thank you

Answer 1

  function ValidateEmail(btnObj) {            
      alert(btnObj.id);
      var email = $(btnObj).siblings('input:text').attr('id');
      alert(email);
      return false;
  }

This will return the id of the text input using your JavaScript solution.

Working example using some of your code.

Answer 2

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if(e.Row.RowType == DataControlRowType.DataRow)
    {
        TextBox txtEmail= e.Row.FindControl("yourEmailTextBox") as TextBox;
        txtEmaill.AddAtrribute("blur",'ValidateEmail(this)');
    }
}

this should be enough,you can also read this post