jQuery: how to get which button was clicked upon form submission?

IT Nursery

May 23, 2022

I have a .submit() event set up for form submission. I also have multiple forms on the page, but just one here for this example. I’d like to know which submit button was clicked without applying a .click() event to each one.

Here’s the setup:

<html>
<head>
  <title>jQuery research: forms</title>
  <script type="text/javascript" src="https://stackoverflow.com/questions/5721724/jquery-1.5.2.min.js"></script>
  <script type="text/javascript" language="javascript">
      $(document).ready(function(){
          $('form[name="testform"]').submit( function(event){ process_form_submission(event); } );
      });
      function process_form_submission( event ) {
          event.preventDefault();
          //var target = $(event.target);
          var me = event.currentTarget;
          var data = me.data.value;
          var which_button = '?';       // <-- this is what I want to know
          alert( 'data: ' + data + ', button: ' + which_button );
      }
  </script>
</head>
<body>
<h2>Here's my form:</h2>
<form action='nothing' method='post' name="testform">
  <input type="hidden" name="data" value="blahdatayadda" />
  <input type="submit" name="name1" value="value1" />
  <input type="submit" name="name2" value="value2" />
</form>
</body>
</html>

Live example on jsfiddle

Besides applying a .click() event on each button, is there a way to determine which submit button was clicked?

32 Answers
32

I asked this same question: How can I get the button that caused the submit from the form submit event?

I ended up coming up with this solution and it worked pretty well:

$(document).ready(function() {
    $("form").submit(function() { 
        var val = $("input[type=submit][clicked=true]").val();
        // DO WORK
    });
    $("form input[type=submit]").click(function() {
        $("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
        $(this).attr("clicked", "true");
    });
});

In your case with multiple forms you may need to tweak this a bit but it should still apply

Tags: forms jQuery

32 Answers 32

Leave a Reply Cancel reply

32 Answers
32