click event triggering another buttons event

Question

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.

Answer 1

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

Answer 2

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.....
     });
 });

Answer 3

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

Answer 4

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")
{
}
}