How to call a javascript function before and after button click event call in asp.net

Question

i have created "ButtonClick" function in ASP.NET as following:

<asp:Button ID="btnLogin" runat="server" Text="Login" CssClass="button" CausesValidation="true" onclick="btnLogin_Click"/>

i want to know, is it possible to call a javascript function before and after calling asp.net button click function...???

Thanks.

@Amir: Sometimes someone does not have time for research and has to submit task at very short notice. So pleases do not discourage someone from asking a question next time. Please maintain a healthy environment. Thank u. — Murtaza Munshi, Jun 01 '15 at 11:06

score 15 · Answer 1 · answered Jan 20 '14 at 06:56

Yes it's possible, here is quick example: Java script function to call.

<script type="text/javascript">
    function clientValidate() {
        alert("execute before");
        return true;
    }

    function executeAfter() {
        alert("execute after");
    }
</script>

Here is snapshoot for button

<asp:Button ID="btnLogin" runat="server" Text="Login" CausesValidation="true" OnClientClick="clientValidate()" onclick="btnLogin_Click"/>

Notice property onClientClick="clientValidate()", it will be trigger script before button click on the server.

On the server side:

protected void btnLogin_Click(object sender, EventArgs e)
        {
        ScriptManager.RegisterClientScriptBlock(this, GetType(), "none", "<script>executeAfter();</script>", false);
        }

Notice executeAfter();, it will trigger javascript execution after server event.

Don't forget to place <asp:ScriptManager runat="server"></asp:ScriptManager> in your aspx file.

Hope it help

score 4 · Answer 2 · answered Jan 20 '14 at 07:36

put this on your page and make sure you have a scriptmanager. these codes will handle your pre & post postbacks.

var prm, postBackElement;
if (typeof Sys != "undefined") {
    prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);
}

function InitializeRequest(sender, e) {
    postBackElement = e.get_postBackElement();
    if (postBackElement.id == "btnLogin") {
        // before click codes
    }
}
function EndRequest(sender, e) {
    if (postBackElement.id == "btnLogin") {
        // after click codes
    }
}

score 3 · Answer 3 · answered Mar 14 '16 at 18:04

Before:

<script type="text/javascript">
    function executeBefore() {
        alert("execute before");   
    }
</script>

<asp:Button ID="btnLogin" runat="server" Text="Login" CausesValidation="true" OnClientClick="executeBefore()" onclick="btnLogin_Click"/>

After:

<script type="text/javascript">
    function executeAfter() {
        alert("execute after ");    
    }
</script>

Add this code to your server side event:

Page.ClientScript.RegisterStartupScript(GetType(), "none", "<script>executeAfter();</script>", false);

If you don't have a master page, or are not using ajax, there is no need to add ScriptManager.

score 2 · Answer 4 · answered Jan 20 '14 at 06:51

You can call Java scrip function before server side click using OnClientClick():

aspx(design)

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function Test() {
            alert('client click');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button Text="btn" runat="server" ID="btn" 
                        OnClick="btn_Click" OnClientClick="Test()" />
    </div>
    </form>
</body>
</html>

.cs

 protected void btn_Click(object sender, EventArgs e)
 {
    Response.Write("Server Click");
 }

score 1 · Answer 5 · answered Jan 20 '14 at 06:34

First time you can call your javascript function in Button's OnClientClick event passing your function name.

<asp:Button ID="btnLogin" runat="server" Text="Login" CssClass="button" CausesValidation="true" onclick="btnLogin_Click" OnClientClick="return functionNAME();"/>

Second time, in your button click event btnLogin_Click call js as follow

ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "script", "<script type='text/javascript'>functionNA();</script>", false);

score 0 · Answer 6 · answered Jan 20 '14 at 06:33

0

For calling it before, you could consider using onload function, like this example:

<body onload="myFunction()">

For calling it afterwards, just link the button to execute JS onClick?

I don't think I quite understand your intentions.

answered Jan 20 '14 at 06:33

ChoiceMC

95
5

How to call a javascript function before and after button click event call in asp.net

6 Answers6

Linked