Oscar Oscar - 3 months ago 13
Javascript Question

Calling multiple JavaScript functions on a button click

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

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();"
Comments