On form submit determine which submit button action is clicked - backbone.js

Question

How can I get the 'Submit button action' when a form is submitted? For example;
<form data-action="foo">
<button type="submit" name="action" value="update">Update</button>
<button type="submit" name="action" value="cancel">Cancel</button>
</form>
In my Backbone View I am trying to figure which button was clicked:
, events: {
'submit form[data-action="foo"]': 'editSubscription'
}
, editSubscription: function(e)
{
e.preventDefault();
// How can I determine the submit action is 'update' or 'cancel'
// Save the model, ie, implicitly do a POST with action UPDATE or CANCEL
this.model.save({action: 'update' /*or 'cancel'*/}, ...);
}

Answer 1

By getting value of submit button.
$(document).on("click", ":submit", function(e){
alert($(this).val());
});

Answer 2

You can get the button value on click event, use prevent default to stop form submit
var el = document.querySelectorAll('button');
el.forEach(item => {
item.addEventListener('click', function(e){
e.preventDefault();
console.log(e.target.value);
})
})
<form data-action="foo">
<button type="submit" name="action" value="update">Update</button>
<button type="submit" name="action" value="cancel">Cancel</button>
</form>

Answer 3

Here is how you can get notification. Just add id attribute to element and get it from currentTarget.
var eventType = '';
$("button").on("click",function(e){
alert($(e.currentTarget).attr('id')+' clicked');
eventType = $(e.currentTarget).attr('id');
//this.model.save({action: eventType}, ...);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form data-action="foo">
<button type="submit" id="update" name="action" value="update">Update</button>
<button type="submit" id="cancel" name="action" value="cancel">Cancel</button>
</form>

Answer 4

You can achieve that in Vanilla JS in the following way:
document.querySelectorAll('button[type=submit]').forEach(function(btn){
btn.addEventListener('click', function(e){
console.log('You have clicked the button:', this.value);
e.preventDefault();
})
});
<form data-action="foo">
<button type="submit" name="action" value="update">Update</button>
<button type="submit" name="action" value="cancel">Cancel</button>
</form>
OR: If you prefer jQuery:
$('button[type=submit]').on('click', function(e){
console.log('You have clicked the button:', this.value);
e.preventDefault();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form data-action="foo">
<button type="submit" id="update" name="action" value="update">Update</button>
<button type="submit" id="cancel" name="action" value="cancel">Cancel</button>
</form>

Answer 5

The simplest way is by using event.target you can get the value of button and put the condition on that
// you can determine by e.target.value that action is 'update' or 'cancel'
if(e.target.value=='update'){
// Save the model, ie, implicitly do a POST with action UPDATE
this.model.save({action: 'update'}, ...);
}
if(e.target.value=='cancel'){
// Save the model, ie, implicitly do a POST with action CANCEL
this.model.save({action: 'cancel'}, ...);
}
Your updated code:
, events: {
'submit form[data-action="foo"]': 'editSubscription'
}
, editSubscription: function(e)
{
e.preventDefault();
// you can determine by e.target.value that action is 'update' or 'cancel'
if(e.target.value=='update'){
// Save the model, ie, implicitly do a POST with action UPDATE
this.model.save({action: 'update'}, ...);
}
if(e.target.value=='cancel'){
// Save the model, ie, implicitly do a POST with action CANCEL
this.model.save({action: 'cancel'}, ...);
}
}