using two submit buttons inside single form

Question

I have a form with two submit buttons in my asp.net mvc (C#) application. When i click any submit button in Google Chrome, by default the value of submit button is the first submit button's value.

Here is the html:

 <input type="submit" value="Send" name="SendEmail" />
 <input type="submit" value="Save As Draft" name="SendEmail" />
 <input type="button" value="Cancel" />

When i click the Save As Draft button, in the action of the controller, it gets "Send" as the value for SendEmail.

Here is the action:

public ActionResult SendEmail(string SendEmail, FormCollection form)
 {
       if(SendEmail == "Send")
       {
          //Send Email
       }
       else
       {
          //Save as draft
       }
       return RedirectToAction("SendEmailSuccess");
 }

When i get the value from FormCollection, it shows "Send". i.e. form["SendEmail"] gives Send

What may be the problem or work around i need to do to get the actual value of the clicked submit button?

Salonika

Your code looks fine, that technique should work. Might try checking the HTTP POST to see what exactly is being sent back to the server. – Incapacity

It happens only in Google chrome, but in IE and Firefox, it works good. – Salonika

What is it with Chrome?! – Lovelace

Answer 1

Show this page.

ASP.NET MVC – Multiple buttons in the same form - David Findley's Blog

Create ActionMethodSelectorAttribute inherit class.

Polyhedron

this link also shows how to handle multiple buttons without using an ActionMethodSelectorAttribute (which is what I needed!) Thanks! – Polliwog

Answer 2

Try this instead:

<input type="submit" value="Send" name="send" />
<input type="submit" value="Save As Draft" name="save" />

and:

public ActionResult SendEmail(string send, FormCollection form)
{
    if (!string.IsNullOrEmpty(send))
    {
        // the Send button has been clicked
    } 
    else
    {
        // the Save As Draft button has been clicked
    }
}

Imperceptible

Its returning the value "Send" when clicking either of the buttons in Google Chrome, but in IE, it returns null when clicking "Save As Draft". The problem is only when using google chrome – Salonika

Are you reading my post carefully? Have you noticed the names of the buttons and the name of the parameter passed to the action? – Imperceptible

yes i changed my code as per your answer, but the problem is same. I dont know whats weird with google chrome. – Salonika

Answer 3

Hidden Html elements will be submitted with your form, so you could add a hidden element and modify it on button click before submission. Return true to continue with form submission.

@Html.Hidden("sendemail", true)
<input type="submit" value="Send"
       onclick="$('#sendemail').val(true); return true" />
<input type="submit" value="Save As Draft"
       onclick="$('#sendemail').val(false); return true;" />

Now you can just pull the value out of your form collection.

public ActionResult SendEmail(FormCollection form)
{
   if(Boolean.Parse(form["sendemail"]))
   {
      //Send Email
   }
   else
   {
      //Save as draft
   }
   return RedirectToAction("SendEmailSuccess");
}

---

Rather than using the FormCollection directly though, the best practice would be to create a view model that contains the specified property.

View Model

public class FooViewModel
{
  public bool SendEmail { get; set; }
  // other stuff
}

HTML

// MVC sets a hidden input element's id attribute to the property name, 
// so it's easily selectable with javascript
@Html.HiddenFor(m => m.SendEmail)

// a boolean HTML input can be modified by setting its value to
// 'true' or 'false'
<input type="submit" value="Send"
       onclick="$('#SendEmail').val(true); return true" />
<input type="submit" value="Save As Draft"
       onclick="$('#SendEmail').val(false); return true;" />

Controller Action

public ActionResult SendEmail(FooViewModel model)
{
   if(model.SendEmail)
   {
      //Send Email
   }
   else
   {
      //Save as draft
   }
   return RedirectToAction("SendEmailSuccess");
}

Reflector

Answer 4

work around: use javascript for submiting the form instead of submit buttons

Pantaloons