How to trigger the Submit button in MVC razor view?

Question

_{Wednesday, October 16, 2013 10:03 PM}

Hi, I have a Submit button in my mvc 4 razor view like this:  <input type="submit" value="Save" id="PerfSubmit"/>

It located inside of @using (Html.BeginForm()) {... , so the MVC form (view) is submitted when the Save is clicked.

Now, I want to create another button call "Approve", so when manager click it, some fields on the view will be updated such as Status will be changed to "Approved", this button may locate on action bar which is outside ot html.BeginForm section, so I use these codes:

<input type="button" id="AppPlan" name="ApprovePlan" value="Approve" onclick="Approve()" /> in razor view.

and javascript code like this:

function Approve() {                 

obj1 = document.getElementById("Status");

           obj1.value = "Approved";           

 obj2 = document.getElementById("LastApprovedDate");          

  obj2.value = new Date();                      

 obj3 = document.getElementById("Signature");           

 obj3.value = "@principal.GivenName" + "  " +  "@principal.Surname";

           mySubmitButton = document.getElementById("PerfSubmit");         

   mySubmitButton.click();         

   window.history.back();     

   }

But the data can not be saved after click Approve button, I used debug to check, the codes in Controller have never be called at all, that is why the data was not saved.

Does anybody know how to make it work? thanks a lot for any help,

All replies (4)

_{Wednesday, October 16, 2013 10:11 PM ✅Answered}

It would be better to get the form and calling submit, but calling the click on a summit button should work. But believe your history nav is canceling the submit.

_{Thursday, October 17, 2013 4:10 AM ✅Answered}

Hi Peter,

Replace  these lines of code

 mySubmitButton = document.getElementById("PerfSubmit");         

   mySubmitButton.click();         

with below code the form will get submitted

$('form')[0].submit();

or

mySubmitButton.trigger("click");

Thanks,

Atthota.

_{Wednesday, October 16, 2013 10:25 PM}

You could submit the form to a controller first, "approve" it and then do this in the controller

ViewBag.approved = true;

return View(model);

then when the view is rendered again, view fields will be populated with model properties and you will use ViewBag.approved to display the approved message

Basically you will have two submit buttons, but you will need to distinguish the action, so you need a @Html.HiddenFor(x => x.SubmitForApprovalOnly) that your real submit would set to false

_{Thursday, October 17, 2013 4:22 AM}

Hi,

You can make an ajax call to update this status. This will improve the performance as well.