In this article I will review how you code a button click event in JavaScript, and how it differs from a button click event in JQuery. I’ll also show some integration of the client-side JavaScript with server-side code in both identifying an ASP.NET button control in JavaScript, and in making the button click event trigger a post-back to the Web server.
Structure of the Example
As you can see in the image above (and the example code below), I’ve coded both a JavaScript and a JQuery button, and have added ASP.NET button controls beside each that will get clicked when the user clicks the JavaScript or JQuery button.
I have written further useful articles about JQuery and JavaScript that are worth having a look at if you are interested in these languages.
Getting the Server Side Control Ids in JavaScript/JQuery
The first step in writing the JavaScript/JQuery functions is to get the Id of the button Server controls. In ASP.NET this is quickly done using the ClientID method along the lines of:
<%= buttonID.ClientID %>
Calling the Button Click Event in JavaScript/JQuery
Once you have the Id of the control that you want to programmatically click, you can use the JavaScript .click() function to trigger a button click event. Naturally the JavaScript and JQuery syntax is slightly different, in particular with how the click event is hooked up to the button. In traditional JavaScript you need to add an onClick() method to the HTML object itself. On the other hand, JQuery encourages separating script from HTML markup in adding the click event to the button in the $(document).ready( code block.
The specifics of calling the click event are then also slightly different between JavaScript and JQuery. Here is the actual call to the click event in each syntax:
JavaScript:
document.getElementById('<%= netButton1.ClientID %>').click();
JQuery:
$('#<%= netButton2.ClientID %>').click();
Code Example of Clicking a Button by Id in JavaScript and JQuery
Here is a fully functional code example of using JavaScript/JQuery to click an ASP.NET button for a page postback:
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void netButton1_Click(object sender, EventArgs e)
{
netButton1.Text = "**JavaScript Postback Complete**";
}
protected void netButton2_Click(object sender, EventArgs e)
{
netButton2.Text = "**JQuery Postback Complete**";
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script language="javascript" type="text/javascript">
function clickPostBackButton() {
document.getElementById('<%= netButton1.ClientID %>').click();
}
$(document).ready(function () {
$('#jqButton1').click(function () {
$('#<%= netButton2.ClientID %>').click();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<!-- JavaScript Click Event -->
<input id="jsButton1" type="button" value="JavaScript Button" style="width:200px;" onClick="clickPostBackButton()"/> -Trigger JavaScript PostBack Press-->
<asp:Button ID="netButton1" runat="server" Text="PostBack Button 1" OnClick="netButton1_Click" style="width:200px;"/><br \>
<!-- JQuery Click Event -->
<input id="jqButton1" type="button" value="JQuery Button" style="width:200px;"/> -Trigger JQuery PostBack Press----->
<asp:Button ID="netButton2" runat="server" Text="PostBack Button 2" OnClick="netButton2_Click" style="width:200px;"/>
</form>
</body>
</html>
Justin Cooney 