mvc form method='post' with two submit buttons
-
21-12-2019 - |
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!
Solution
@Robert Achmann, here is my answer
It seems the selector in $("isSubmitted") is missing, e.g. $("#isSubmitted") for an input with an id isSubmitted.
OTHER TIPS
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.
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>