Calling multiple JavaScript functions on a button click

Question

How to call multiple functions on button click event?

Here is my button,

<asp:LinkButton
    ID="LbSearch"
    runat="server"
    CssClass="regular"
    onclick="LbSearch_Click"
    OnClientClick="return validateView();ShowDiv1();">

But my ShowDiv1 doesn't get called...

My JavaScript functions:

function ShowDiv1() {
    document.getElementById("ReportDiv").style.display = 'block';
    return false;
}

function validateView() {

    if (document.getElementById("ctl00_ContentPlaceHolder1_DLCategory").selectedIndex == 0) {
        document.getElementById("ctl00_ContentPlaceHolder1_ErrorMsg").innerHTML = "Please Select Your Category";
        document.getElementById("ctl00_ContentPlaceHolder1_DLCategory").focus();
        return false;
    }
    if (document.getElementById("ctl00_ContentPlaceHolder1_DLEmpName").selectedIndex == 0) {
        document.getElementById("ctl00_ContentPlaceHolder1_ErrorMsg").innerHTML = "Please Select Your Employee Name";
        document.getElementById("ctl00_ContentPlaceHolder1_DLEmpName").focus();
        return false;
    }
    return true;
}

If the ValidateView() function returns true I should call ShowDiv1().

Answer 1

Because you're returning from the first method call, the second doesn't execute.

Try something like

OnClientClick="var b = validateView();ShowDiv1(); return b"

or reverse the situation,

OnClientClick="ShowDiv1();return validateView();"

or if there is a dependency of div1 on the validation routine.

OnClientClick="var b = validateView(); if (b) ShowDiv1(); return b"

What might be best is to encapsulate multiple inline statements into a mini function like so, to simplify the call:

// change logic to suit taste
function clicked()  {
    var b = validateView(); 
    if (b) 
        ShowDiv1()
    return b;
}

and then

OnClientClick="return clicked();"

Answer 2

That's because, it gets returned after validateView();;

Use this:

OnClientClick="var ret = validateView();ShowDiv1(); return ret;"