Jquery Validation, Get button clicked in submitHandler()

Question

I have two buttons on the from type='Submit'' After the validation, in submitHandler I want to get which one of these button is clicked.

And depending on this, i want to disable that button.

Handler

$("#add_customer").validate({
    rules: {
        name: {
            required: true
        },
        annual_sales_weight: {
            required: true,
            number: true
        }

    },
    errorClass: "help-inline",
    errorElement: "span",
    highlight: highlightJquery,
    unhighlight: Unhilight,
    submitHandler: function (form) {
        var btn = $(form).find('button');
        disable(btn)
        sendAjaxRequest(url,data=form.serialize());

    }
});

HTML

<button class="btn btn-primary" name="add" type="submit"> Submit</button>
<button class="btn btn-primary" name="prospect" type="submit"> Submit & Add prospect</button>

Answer 1

In here you could use an undocumented feature of the validate plugin.

submitHandler: function(form){              
    var submitButtonName =  $(this.submitButton).attr("name");

... rest of code 

Answer 2

You have two submit buttons on your form so by the time you get to the submitHandler it's too late. If you want to know which button is clicked you'll have to capture that event ahead of time.

Change them both to type="button" so you can control the submit.

<button class="btn btn-primary" name="add" type="button">Submit</button>
<button class="btn btn-primary" name="prospect" type="button">Submit &amp; Add prospect</button>

Then add this...

$('button[name="add"], button[name="prospect"]').on('click', function (e) {
    e.preventDefault();
    if ($('#myform').valid()) {
        $(this).prop('disabled', 'disabled');
        $('#myform').submit();
    }
});

DEMO: http://jsfiddle.net/etHcZ/

Answer 3

I had this same problem and didn't want to rely on another event firing off to ensure that I had the right value. As it happens validate.js will add the value of the button pressed as a hidden field on the form right before it calls the submitHandler:

return n.settings.submitHandler ? 
  (n.submitButton && (i = e("<input type='hidden'/>").attr("name",
   n.submitButton.name).val(e(n.submitButton).val()).appendTo(n.currentForm))

It then calls the submitHandler with the form as the first argument.

It is worth knowing that if you then modify the form this newly appended hidden field is removed! In this case you can retrieve it first and then append it back again...

submitHandler: function(myForm) {
  var button = $(myForm).find('input[type=hidden][name=mySubmitButtonName]');
  // .. do something with myForm
  $(myForm).append(button) && myForm.submit();
}

I hope that helps someone. :-)