how to get Textbox value in Jquery/Javascript if id created dynamically based on condition

Question

I have multiple rows and with text box and button, I created a jQuery function to get the value of Text-box on class click. I tried so long but unable to get value. what I am doing wrong here.? Thanks in Advance. Text-box Code:-

$('input.R_Insert').click(function() {

  var roundNum = 0; // row no get from db (1,2,3,4,5..)

  var bb = "#TextBox" + roundNum;
  var x = $("bb").val();
  alert(x);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tbody>
  <tr>
    <td>
      <div id="">
        <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" CssClass="form-control" Rows="5" Text="" Enabled="false"></asp:TextBox>
        <asp:Button ID="btnSubmit1" runat="server" Text="Submit" CssClass="add_top_10 R_Insert" Enabled="false" />
      </div>
    </td>
    <td>
      <div id="">
        <asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine" CssClass="form-control" Rows="5" Enabled="false"></asp:TextBox>
        <asp:Button ID="btnSubmit2" runat="server" Text="Submit" CssClass="add_top_10 R_Insert" Enabled="false" />
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div id="">
        <asp:TextBox ID="TextBox3" runat="server" TextMode="MultiLine" CssClass="form-control" Rows="5" Text="" Enabled="false"></asp:TextBox>
        <asp:Button ID="btnSubmit3" runat="server" Text="Submit" CssClass="add_top_10 R_Insert" Enabled="false" />
      </div>
    </td>
    <td>
      <div id="">
        <asp:TextBox ID="TextBox4" runat="server" TextMode="MultiLine" CssClass="form-control" Rows="5" Enabled="false"></asp:TextBox>
        <asp:Button ID="btnSubmit4" runat="server" Text="Submit" CssClass="add_top_10 R_Insert" Enabled="false" />
      </div>
    </td>
  </tr>
</tbody>

Does the #Textbox0 element exist in your HTML? If so, where is it? Also note the selector should be $(bb), not $('bb') - note the lack of quotes as you're providing a variable, not a string literal — Rory McCrossan
– Rory McCrossan, Commented Jul 14, 2017 at 11:12
No ,` '#Textbox0` element does not exist. and I have tried $('bb') also but failed. — Adesh Mishra
– Adesh Mishra, Commented Jul 14, 2017 at 11:19

LogicalDesk · Accepted Answer · 2017-07-14 11:23:01Z

1

just remove the double quotes-

var bb = "#TextBox" + roundNum;
            var x = $(bb).val();

answered Jul 14, 2017 at 11:23

LogicalDesk

1,2974 gold badges20 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bharatsing Parmar · Accepted Answer · 2017-07-14 12:43:46Z

0

You can also try this one that work with textbox,dropdown, textarea.

$('.R_Insert').click(function () {
  //This will work for textarea,input, select controls
  var x = $(this).parent().find('.form-control').val();         
  alert(x);
});

answered Jul 14, 2017 at 12:43

Bharatsing Parmar

2,4551 gold badge11 silver badges18 bronze badges

Comments

Mohammed Athar Imran Ahmed · Accepted Answer · 2017-07-17 03:30:46Z

Here is a working code. You may play @ https://jsfiddle.net/wmfn5t7c/

<table>

<tbody>
                    <tr>
                        <td>
                            <div id="">
                                <input type='TextBox' ID="TextBox1" runat="server" TextMode="MultiLine" CssClass="form-control" Rows="5" Text="" Enabled="false" />
                                <input type='Button' ID="btnSubmit1" runat="server"  Text="Submit" CssClass="add_top_10 R_Insert" Enabled="false" />
                            </div>
                        </td>
                        <td>
                            <div id="">
                                <asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine" CssClass="form-control" Rows="5" Enabled="false"></asp:TextBox>
                                <asp:Button ID="btnSubmit2" runat="server" Text="Submit" CssClass="add_top_10 R_Insert" Enabled="false" />
                            </div>
                        </td>
                    </tr>
                 <tr>
                        <td>
                            <div id="">
                                <asp:TextBox ID="TextBox3" runat="server" TextMode="MultiLine" CssClass="form-control" Rows="5" Text="" Enabled="false"></asp:TextBox>
                                <asp:Button ID="btnSubmit3" runat="server" Text="Submit" CssClass="add_top_10 R_Insert" Enabled="false" />
                            </div>
                        </td>
                        <td>
                            <div id="">
                                <asp:TextBox ID="TextBox4" runat="server" TextMode="MultiLine" CssClass="form-control" Rows="5" Enabled="false"></asp:TextBox>
                                <asp:Button ID="btnSubmit4" runat="server" Text="Submit" CssClass="add_top_10 R_Insert" Enabled="false" />
                            </div>
                        </td>
                    </tr>
                </tbody>
</table>

 $('#btnSubmit1').click(function () {

            var roundNum = 1; // row no get from db (1,2,3,4,5..)

            var bb = "#TextBox" + roundNum;
            var x = $(bb).val();
            alert(x); 
            });

Collectives™ on Stack Overflow

how to get Textbox value in Jquery/Javascript if id created dynamically based on condition

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related