mvc form method='post' with two submit buttons

Question

I've reviewed several posts here for a solution. I'll try a fresh question.

my form:

<form method="post" action="@Url.Action("Manage")"  data-cs-ajax="true" data-cs-target="#catalogList" >

It has an auto complete field and paging, very similar to the OdeToFood example from Scott Allen.

There is :

<input type="submit" value="Update" class="btn btn-default" />

which updates some filtered items to selected from - all works great - and also:

<input type="submit" name="btnSave" id="btnSave" value="Save" class="btn btn-default" />

They both successfully hit:

//POST: /WebCatalog/Manage/5
[HttpPost, ActionName("Manage")]
[ValidateAntiForgeryToken]
public ActionResult Manage([Bind(Include = "Id,CatalogId,CatalogColourId,CatalogSizeId,CatalogCategoryId,CatelogSupplierId,StartDate,EndDate,Active,isSubmitted")] WebCatalogViewModel model, string searchTerm = null, int page = 1)
    { ...

They do hit the controller action because of the javascript:

$(function () {

var ajaxFormSubmit = function () {
    var $form = $(this);

    var options = {
        url: $form.attr("action"),
        type: $form.attr("method"),
        data: $form.serialize()
    };

    $.ajax(options).done(function (data) {
        var $target = $($form.attr("data-cs-target"));
        var $newHtml = $(data);
        $target.replaceWith($newHtml);
        var options = {};
        $newHtml.effect("highlight", options, 500, doneEffect);
    });

    return false;
};

Now...

I want to set a field in the model to let the controller know the second btnSave button was clicked...to save the record, of course....

Soo...

$(function () {

    $("#btnSave").click(function () {

        $("isSubmitted").val("1");
        return true;
    });

});

And that fires: before the page is submitted via ajax in ajaxFormSubmit, the button jQuery code for $(#btnSave") does successfully fire.

However, in the controller action, isSubmitted is always 0.

I've tried :

$("isSubmitted").val(1);

I've tried the form as method='get' and still no post - although, I might try to then change the method with javascript in the btnSave.click js function - not sure how to do that...if I can't save a value in a form control, then why would I be able to change the form method??

I've tried an $Ajax.ActionLink - but always get a 500 IIS error.

Basically, I need a way to know that the user clicked the save button, rather than the Update button.

Any advice is appreciated!

Answer 1

@Robert Achmann, here is my answer

It seems the selector in $("isSubmitted") is missing, e.g. $("#isSubmitted") for an input with an id isSubmitted.

Answer 2

You don't need a hidden value to tell the controller which button was clicked. What you need to do is name the 2 buttons as follow

<input type="submit" name="btnAction" value="Update" class="btn btn-default" />
<input type="submit" name="btnAction" value="Save" id="btnSave" class="btn btn-default" />

As you can see, they have the same name but different values (update vs save).

In the controller, add another parameter called btnAction, which is the name of the buttons, to the action.

[HttpPost, ActionName("Manage")]
[ValidateAntiForgeryToken]
public ActionResult Manage(string btnAction, [Bind(Include = "Id,CatalogId,CatalogColourId,CatalogSizeId,CatalogCategoryId,CatelogSupplierId,StartDate,EndDate,Active,isSubmitted")] WebCatalogViewModel model, string searchTerm = null, int page = 1)
{
     if(btnAction.ToLower() == "save")
     {
          // The save button was clicked
     }
     else if(btnAction.ToLower() == "update")
     {
          // The update button was clicked
     }
     else
     {
          // default ...
     }
}

Basically, the parameter btnAction will get the value of the submit button triggering the form to get post.

Hope this help.

Answer 3

You could a hidden field in your form to store the value of what field was clicked (controlling this with jquery event handlers) , and for this you could make your button type="button" instead of type="submit" (in order to submit your form from your Jquery code) or you could use eventPreventDefault.

Well, here is a code sample that might help you:

    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("#bt1").click(function(){
        alert(' Save button');
        $("#operation").val('save');
        $("#frm").submit();
      });

      $("#bt2").click(function(){
        alert(' Update button');
        $("#operation").val('update');
        $("#frm").submit();
      });
    });
    </script>
    </head>

    <body>
       <form id="frm">
        <div id="div1"><h2> Form buttons - What of then was clicked? </h2></div>
        <button id="bt1"> Save button </button>
        <button id="bt2"> Update button </button>
         <input type="hidden" id="operation" name="operation" value=""/>
        </form>     
        </body>
        </html>