CODEWITHSUNDEEP
jqueryasp.net-mvc-4controllers
Chethan
Chethan

Reputation: 300

click event triggering another buttons event

I have MVC4 Application with Save, Print Landscape and Print Portrait functionality. below is the html code for all the three buttons with events.

<input type="submit" id="btnSave" value="Save" class="button-new red" onclick=" return SaveDetails();" style="width: 20px;" />

<input type="submit" id="btnExportLandscape" value="Print Landscape" onclick="return ExportForPrint(1);" class="button-new red" style="width: 110px;" />

<input type="submit" id="btnExportPortrait" value="Print Portrait" onclick="return ExportForPrint(2);" class="button-new red" style="width: 90px;" />

on click I have javascript function 

function SaveDetails()
{
      ....
      if()
        return true
}

function ExportForPrint(type)
{
      if(type=1)
        document.formCreateDetails.action="CreateDetails/ExportLandscape"; //Call to controller method
      else if (type=2)
        document.formCreateDetails.action="CreateDetails/ExportPortrait";
}

If I click save directly without clicking Print Portrait/Landscape button, SaveDetails's controller method is getting triggered. But if I click Print Portrait/Landscape and then click Save, its still triggering Print Portrait/Landscape event.

Upvotes: 0

Views: 545

Answers (4)

Gara
Gara

Reputation: 626

Using Jquery Id selector we can write like this 

 $(document).ready(function(){
     $("#btnSave").on('click',function(){
         // Do some thing.....
     });

     $("#btnExportLandscape").on('click',function(){
         // Do some thing.....
     });

     $("#btnExportPortrait").on('click',function(){
         // Do some thing.....
     });
 });

Upvotes: 1

Chethan
Chethan

Reputation: 300

thanks for your answers.

the actual issue was, since i am assigning document action to print related controller methods, which i was not doing in SaveDetails() method.

document.formCreateDetails.action="CreateDetails/ExportLandscape";

or

document.formCreateDetails.action="CreateDetails/ExportPortrait";

I re-wrote my code as shown below for save event and it worked.

function SaveDetails()
{
  ....
  if()
    {
    document.formCreateDetails.action="CreateDetails/Index";
    return true
    }
}

Thanks for all your answers, I really appreciate it. Happy coding....

Upvotes: 0

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62498

you can go with only one action on post you can check submit button value like this:

View:

<input type="submit" id="btnSave" name="Save" value="Save" class="button-new red" onclick=" return SaveDetails();" style="width: 20px;" />

<input type="submit" id="btnExportLandscape" name="Save" value="Print Landscape" onclick="return ExportForPrint(1);" class="button-new red" style="width: 110px;" />

<input type="submit" id="btnExportPortrait" name="Save" value="Print Portrait" onclick="return ExportForPrint(2);" class="button-new red" style="width: 90px;" />

Controller:

[HttpPost]
public ActionResult Save(FormCollection form)
{

if(form["Save"].ToString() == "Print Landscape")
{
// do landscape work
}
else if(form["Save"].ToString() == "Save")
{
// save
}
else if(form["Save"].ToString() == "Print Portrait")
{
}
}

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85575

You need to use comparision operator (two times equal) to check the condition.

Upvotes: 0

Related Questions