CODEWITHSUNDEEP
javascriptfunction
ACP
ACP

Reputation: 35268

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().

Upvotes: 16

Views: 120233

Answers (11)

Kangkan
Kangkan

Reputation: 15571

Change 

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

to 

OnClientClick="javascript: if(validateView()) ShowDiv1();">

Upvotes: 1

Hrushi
Hrushi

Reputation: 309

  <asp:Button ID="btnSubmit" runat="server"  OnClientClick ="showDiv()"
   OnClick="btnImport_Click" Text="Upload" ></asp:Button>

Upvotes: 0

John K
John K

Reputation: 28869

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

Upvotes: 28

sana
sana

Reputation: 1

At times it gives syntax error that "return is not a function" so in that case just remove return and it will work fine :) as shown below

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

Upvotes: 0

Gaurav Tailor
Gaurav Tailor

Reputation: 416

if there are more than 2 js function then following two ways can also be implemented:

  1. if you have more than two functions you can group them in if condition

    OR

  2. you can write two different if conditions.

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

OR

2 OnClientClick="var b = validateView(); if(b) {

ShowDiv1();

testfunction();

} return b">

Upvotes: 0

Johnson John
Johnson John

Reputation: 1

btnSAVE.Attributes.Add("OnClick", "var b = DropDownValidate('" + drp_compcode.ClientID + "') ;if (b) b=DropDownValidate('" + drp_divcode.ClientID + "');return b");

Upvotes: -1

raj
raj

Reputation: 3811

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

Use this:

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

Upvotes: 4

perilbrain
perilbrain

Reputation: 8197

And of course you can never call the two functions at the same time. Not any one in the world except you are working on two processors simultaneously.

The best way is to call a JavaScript parent function and in that, specify all the sequence of function you want to call. For example,

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;
    }
    ShowDiv1();
    return true;
}

Upvotes: 0

elizabeth
elizabeth

Reputation: 21

Try this .... I got it... onClientClick="var b=validateView();if(b) var b=ShowDiv1();return b;"

Upvotes: 2

Jim Greenleaf
Jim Greenleaf

Reputation: 376

I think that since return validateView(); will return a value (to the click event?), your second call ShowDiv1(); will not get called.

You can always wrap multiple function calls in another function, i.e.

<asp:LinkButton OnClientClick="return display();">

function display() {
   if(validateView() && ShowDiv1()) return true;
}

You also might try:

<asp:LinkButton OnClientClick="return (validateView() && ShowDiv1());">

Though I have no idea if that would throw an exception.

Upvotes: 0

Chris Thompson
Chris Thompson

Reputation: 35598

It isn't getting called because you have a return statement above it. In the following code:

function test(){
  return 1;
  doStuff();
}

doStuff() will never be called. What I would suggest is writing a wrapper function

function wrapper(){
   if (validateView()){
     showDiv();
     return true;
   }
}

and then call the wrapper function from your onclick handler.

Upvotes: 0

Related Questions