Get Textbox value inside Gridview using JQuery

0
votes

I have a Gridview and I created a textbox and button inside. I need to get the value of the textbox upon button click.

To make it simpler. I'll just post the fields needed inside the gridview: a textbox and a button.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
  <Columns>
    <asp:TemplateField HeaderText="ID">
      <ItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
      </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField>
      <ItemTemplate>
        <asp:Button ID="Button1" runat="server"  Text="Edit" OnClientClick="return validation();"/>
      </ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>

And here's javascript :

function validation() {
  var dt = new String(document.getElementById("<%=GridView1.ClientID %>[name=TextBox1]").value);                
  if (dt == '') {
    //my code here
    return false;
  }
  return true;
}

It's not getting the value. :( Please help, if you have encountered this problem. Thank you

3
javascriptasp.netgridview

3 Answers

2
votes

You want get text box value according to button click. Please try this.

ASP.NET design.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
   <Columns>
     <asp:TemplateField HeaderText="ID">
         <ItemTemplate>
            <asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
         </ItemTemplate>
     </asp:TemplateField>
     <asp:TemplateField>
         <ItemTemplate>
            <asp:Button ID="Button1" runat="server"  Text="Edit" OnClientClick="return validation(event);"/>
         </ItemTemplate>
      </asp:TemplateField>
   </Columns>
</asp:GridView>

Here jQuery Code

function validation(e) {
  var target = e.target;
  var dt = $(target).closest("td").prev("td").find("[type='text']").val();
  alert(dt);
}

Please refer the jQuery, before running the code.

0
votes

This should do it but you're going to need to load in the jQuery library.

$('#Button1').on('click', function(){
    var textInput = $('#TextBox1').val();
    console.log(textInput);
    return textInput;
});

heres a link to it : https://code.jquery.com/jquery-2.1.4.min.js

0
votes

Try this

    var GridView1 = document.getElementById('<%= GridView1.ClientID %>');

    for (var rowId = 1; rowId < GridView1.rows.length; rowId++) {
        var textValue = GridView1.rows[rowId].cells[0].children[0];
        alert(textValue.value);
    }