Tuesday, February 8, 2011

How to find out the value of the server side control using jquery?

It happens many time that we do have the controls which are declared with runat="server". Accessing the value of those control is not so easy. For example


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>

<script src="jquery.js" type="text/javascript"></script>

</head>
<body>
<form id="form1" runat="server">
<div>
<input runat="server" id="TextBox1" type="text" /><br />
<asp:Button ID="TestButton" runat="server" Text="Button" />
</div>
</form>
</body>

<html>


We can access or set the value like this:
<script type="text/javascript">
$(function() {
$('#<%= TestButton.ClientID %>').click(function(e) {
var testValue = 'Test Value';
$('#<%= TextBox1.ClientID %>').val(testValue);

e.preventDefault();
});
});
</script>



Every control which is declared at server side will have different id assign by the framework.For accessing those control we need to use the clientID along with the control id.

No comments:

Post a Comment