How to detect input button value with jquery .on() submit

Question

How can I detect which input button is pressed on this form using jquery .on() submit?

<form name="input" action="none" method="post">
 <input type="text" name="user">
 <input id="submit" type="submit" value="Submit">
 <input id="cancel" type="submit" value="Cancel">
</form>​​​​​​​​​​​​​​​



$('body').on('submit', 'form', function(e) {
      console.log($(this).attr("value"));
      return false;})

​ A jsfiddle example is here http://jsfiddle.net/dansalmo/suZHg/

I have looked many places and tried many different ways of trying to detect the input submit button value within the .on() method but I can't get it.

In my example $(this).attr("value") and $(this).val() come up undefined

I then want to be able to submit the form using ajax so just detecting the button is not the point of this question. If there is no way to do it using .(on) submit then it would be helpful to know that as opposed to answering with alternate button detection methods that do not involve form submission.

Answer 1

I don't see any way from the submit handler to get this information, but you can get the information from the button click events and then use it in the submit event.

$('body').on('submit', 'form', function(e) {
      console.log($(this).data('clicked'));
      return false;
});
$('form').on('click', 'input[type=submit]', function(e) {
      $(this.form).data('clicked', this.value);
});

http://jsfiddle.net/suZHg/15/

Answer 2

You could intercept the click events for the submit buttons and then trigger the form submit manually, passing in a reference to the originating button:

        $("input:submit").on("click", function () {
            $("form[name='input']").trigger("submit", this);
            return false;
        });

        $('body').on('submit', 'form', function (e, button) {
            console.log($(button).val());
            return false;
        })