How to handle two submit buttons in one form?

Question

I have two submit buttons and one form. How to check which submit button was selected in my jquery code?

<% using (Html.BeginForm("UserInfo", "Home", FormMethod.Post, new { id  = "formNext" })) { %> 
.... 
<input id="submitHome" type="submit" name="goHome" value="Home" />  
<input id="submitNext" type="submit" name="getNext" value="Next" /> 
<% } %>


$(document).ready(function() {       
$('#formNext').submit(function() {      
        //Code Does not work but looking at something like this...
        //$('#submitHome').click(function() {
        //      navigate to Home;
        //});
        //$('#submitNext').click(function() {
        //      return true;
        //});
    });
});

Answer 1

$('#submitHome').click(function() {
      //navigate to Home;
});
$('#submitNext').click(function() {
      return true;
});

They should work if you pull them out of the .submit () form. (right now, these handlers are attached after the form is submitted, which is too late since the click has already occurred)

Answer 2

You can try something like this

$(function() {
 var buttonpressed;
 $('input[type=submit]').click(function() {
      buttonpressed = $(this).attr('name')
 })
 $('form').submit(function() {
      alert('button clicked was ' + buttonpressed)
        buttonpressed=''
    return(false)
 })
})

Source: https://forum.jquery.com/topic/determining-which-of-two-submit-buttons-were-clicked-in-a-single-form

Answer 3

:

<% using (Html.BeginForm("UserInfo", "Home", FormMethod.Post, new { id = "formNext" })) { %>
....
<input id="submitHome" type="submit" name="goHome" value="Home" />
<input id="submitNext" type="submit" name="getNext" value="Next" />
<% } %>


$(document).ready(function() {
  $('#submitHome').click(function(e) {
    e.preventDefault(); // prevent the page to do the usuall onclick event (from reloading the page)
    // navigate to Home;
  });
  $('#submitNext').click(function(e) {
    e.preventDefault();
    // return true;
  });
});

Answer 4

$(function(){
  $(".submitButton").click(function(e){
    alert($(this).attr("name"));
  });
});​

.

Answer 5

Create two action methods and process the two columns separately, which take the formcollection as param. Add two inputs using the type = button and attach the click event with $ .post to your action method with the values ​​from the form controls that you need for this post.