In this article I will explain with an example, how to call ASP.Net Button Click event using JavaScript and jQuery.
First the ASP.Net Button will be referenced using JavaScript or jQuery on Client Side and then its Click event will be executed by calling the JavaScript Click function.
Call ASP.Net Button Click event using JavaScript
HTML Markup
The following HTML Markup consists of an ASP.Net Button and an HTML Anchor Link element. The HTML Anchor Link element has been assigned a Click event handler which makes call to the CallButtonEvent JavaScript function.
Inside the CallButtonEvent JavaScript function, the ASP.Net Button is referenced and its JavaScript Click function is called, which causes PostBack and the Server Side click event of the ASP.Net Button is called.
<asp:Button ID="btnSubmit" Text="Submit" runat="server" OnClick="Submit" />
<hr />
<a id = "lnk" href = "javascript:;" onclick = "CallButtonEvent()">Call Button Event</a>
<script type="text/javascript">
function CallButtonEvent() {
document.getElementById("<%=btnSubmit.ClientID %>").click();
}
</script>
Server Side Button Click event
Inside the following event handler, a JavaScript Alert Message is displayed using ClientScript.RegisterStartupScript function.
protected void Submit(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Button clicked.');", true);
}
Call ASP.Net Button Click event using jQuery
HTML Markup
The following HTML Markup consists of an ASP.Net Button and an HTML Anchor Link element. The HTML Anchor Link element has been assigned a jQuery Click event handler.
Inside the jQuery Click event handler, the ASP.Net Button is referenced and its JavaScript Click function is called, which causes PostBack and the Server Side click event of the ASP.Net Button is called.
<asp:Button ID="btnSubmit" Text="Submit" runat="server" OnClick="Submit" />
<hr />
<a id="lnk" href="javascript:;">Call Button Event</a>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#lnk").click(function () {
$("[id*=btnSubmit]").click();
});
});
</script>
Server Side Button Click event
Inside the following event handler, a JavaScript Alert Message is displayed using ClientScript.RegisterStartupScript function.
protected void Submit(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Button clicked.');", true);
}
Screenshot
![Call ASP.Net Button Click event using JavaScript and jQuery]()
Demo
Downloads
