Using jQuery to detect which submit button has been clicked

Question

Having the following form:

<form id="my_form">
    <input type="submit" value="Save" id="my_form_save"/>
    <input type="submit" value="Save and apply" id="my_form_save_apply"/>
</form>

and the following jQuery code:

$('#my_form').submit(function(e) {
    e.preventDefault();
    var clicked_button = e.originalEvent.explicitOriginalTarget.id;
    console.log(clicked_button)
});

I would like to know how to detect which of the two buttons were clicked.

The code above throws this error: Uncaught TypeError: Cannot read property 'id' of undefined.

Also, I found out that e.originalEvent.explicitOriginalTarget.id doesn't work on all browsers so I need another solution.

Venkatesh Konatham · Accepted Answer · 2016-10-30 12:22:32Z

2

What i suggest you is to change your code to use jquery to handle submit button click event. It will work on all browsers

var buttonClicked = "";
$('#my_form').submit(function(e) {
    e.preventDefault();
  alert(buttonClicked);
  buttonClicked=""; 
});
$("#my_form input[type = 'submit']").click(function(e){
 buttonClicked = $(this).attr("id");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><form id="my_form">
    <input type="submit" value="Save" id="my_form_save"/>
    <input type="submit" value="Save and apply" id="my_form_save_apply"/>
</form>

answered Oct 30, 2016 at 12:22

Venkatesh Konatham

8286 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Flyer53 · Accepted Answer · 2016-10-30 15:12:15Z

2

As you already use jQuery I would suggest the following code:

$(document).on('click', 'input', function(e){
  e.preventDefault();
  var targetID = $(e.target).attr('id');
  if (targetID === 'my_form_save') {
    console.log('Save was clicked');
  } else if (targetID === 'my_form_save_apply') {
    console.log('Save and apply was clicked');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my_form">
    <input type="submit" value="Save" id="my_form_save"/>
    <input type="submit" value="Save and apply" id="my_form_save_apply"/>
</form>

answered Oct 30, 2016 at 15:12

Flyer53

7646 silver badges14 bronze badges

Collectives™ on Stack Overflow

Using jQuery to detect which submit button has been clicked

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related