Sometimes, we have a situation to access the server side ASP.NET controls and its values using client side script like JavaScript. In this post I’m going to explain how to do that with a simple example.

A word about Client ID

As all of us know server side controls are submitted and processed by the ASP.NET engine, which emits the respective HTML to the browser. At that time the ASP.NET engine takes the server controls and provide ID (which can be varied across ASP.NET versions) for it.

Consider the following example, which has 3 text boxes, entered values in first 2 text boxes when the user clicks the button then JavaScript function called which will add the values and put it in 3rd text box. These controls are Server controls.

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head runat="server">
  4. <title></title>
  5. <script type="text/javascript">
  6. function Add()
  7. {
  8. var intFirstNo = document.getElementById("<%= txtFirstNo.ClientID %>")
  9. .value;
  10. var intSecondNo = document.getElementById("<%= txtSecondNo.ClientID %>")
  11. .value;
  12. var intResult = parseInt(intFirstNo) + parseInt(intSecondNo);
  13. document.getElementById("<%= txtResult.ClientID %>")
  14. .value = intResult;
  15. }
  16. </script>
  17. </head>
  19. <body>
  20. <form id="form1" runat="server">
  21. <table>
  22. <tr>
  23. <td> Enter First Number: </td>
  24. <td>
  25. <asp:textbox clientidmode="Predictable" id="txtFirstNo" runat="server"></asp:textbox>
  26. </td>
  27. </tr>
  28. <tr>
  29. <td> Enter Second Numer: </td>
  30. <td>
  31. <asp:textbox id="txtSecondNo" runat="server"></asp:textbox>
  32. </td>
  33. </tr>
  34. <tr>
  35. <td> Addition is: </td>
  36. <td>
  37. <asp:textbox id="txtResult" runat="server"></asp:textbox>
  38. </td>
  39. </tr>
  40. <tr>
  41. <td align="center" colspan="2">
  42. <asp:button id="btnResult" onclientclick="Add(); return false;" runat="server" text="Calculate"> </asp:button>
  43. </td>
  44. </tr>
  45. </table>
  46. </form>
  47. </body>
  49. </html>
Consider this JavaScript line:
  1. var intFirstNo = document.getElementById("<%= txtFirstNo.ClientID %>").value;
When the above line is read by the ASP.NET engine, it will search the Server control ID “txtFirstNo” and get the respective client ID, which has been assigned by ASP.NET engine. In other words, ASP.NET get the Client ID for that Server control “txtFirstNo” and substitute there in between the double quotes. As a result when viewing the view source of the page we can read the above one as follows:
  1. var intFirstNo = document.getElementById("txtFirstNo").value;
We also return false (in line no 42) after calling the JavaScript function "Add" to avoid the postback when we click the button.

Just copy the above sample in a webform and try it yourself. Please leave your valuable comment which improves every article.

Happy coding!