'how to access usercontrol value in js/jquery

Suppose i created a user control which contain two textbox, one button

 --Start UserControl UserDetails--
 <asp:TextBox runat="server" id="txtName"></asp:TextBox>
 <asp:TextBox runat="server" id="txtAddress"></asp:TextBox>
--End UserControl UserDetails-

in aspx if i use the same user control,

<uc1:UserDetails runat="server" ID="UserDetails1" />
  1. how do i access the txtName using user control id UserDetails1?
  2. How do i make $('#UserDetails1').val() to return value of txtName?


Solution 1:[1]

Try this, using Jquery

$("[id$='txtName']").val();
$("[id$='txtAddress']").val(); 

Solution 2:[2]

Use data keys inside your text boxes.

      --Start UserControl UserDetails--
     <asp:TextBox runat="server" id="txtName" data-key="name"></asp:TextBox>
     <asp:TextBox runat="server" id="txtAddress" data-key="address"></asp:TextBox>
    --End UserControl UserDetails-

<uc1:UserDetails runat="server" ID="UserDetails1" data-usercontrol = "UserDetails1" />

in jquery,

$("[data-usercontrol='UserDetails1']").find("[data-key='name']").val();
$("[data-usercontrol='UserDetails1']").find("[data-key='address']").val();

You can use id selector. But since you have used asp.net, it might be rendered with different id in HTML.

Hope this helps!

Solution 3:[3]

Copy the id of particular textbox from Developer Tools and then just use that id like below

var textLength = $("#ContentBody_ucMFA1_txtACode").val().length;

enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Vishal Surjuse
Solution 2 Anoop H.N
Solution 3 Appu