Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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());
<button class="btn btn-primary" name="add" type="submit"> Submit</button>
<button class="btn btn-primary" name="prospect" type="submit"> Submit & Add prospect</button>
In here you could use an undocumented feature of the validate plugin.
submitHandler: function(form){              
    var submitButtonName =  $(this.submitButton).attr("name");
... rest of code 
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/
                This doesn't send which button was clicked on server. I mean POST did not contain the button information in the POST data. Any suggestions?
– A.J.
                Oct 14, 2015 at 19:16
                @Clayton, in all fairness, your original question (now over 18 moths old) mentions nothing about the post array.  Nor did you have any problem with this answer since it was the accepted answer for a year and a half.
– Sparky
                Oct 15, 2015 at 15:47
                Someone just wrote to me and said to review the answer; that if it is the correct and most appropriate, so i just changed it what i was expecting. No hard feelings . +1 though
– A.J.
                Oct 16, 2015 at 10:59
                @Clayton, it's not about hard feelings.  It's about the question and answer making sense together.  In this case, your question mentions nothing about needing to obtain the button within the POST array.  It only asks about how to capture which button within the validation plugin and that is exactly what was answered here.
– Sparky
                Oct 16, 2015 at 14:01
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. :-)
I will go with identifying the button through event object. Since the answer given by "Christopher Wigginton" is a gud one except it gives me "undefined" on first click.
$(event.target).attr('name');
Full example:
jQuery(document).on("click", "#btnSaveDraft, #btnSendNotes", function (event) {
    $('#frmThanksNote').validate({// initialize the plugin
        ignore: [],
        debug: false,
        rules: {
        messages: {
        errorPlacement: function (error, element) {
        submitHandler: function (form) {
            var submitButtonName =  $(event.target).attr("id");
            if(submitButtonName == 'btnSaveDraft'){
                saveNotes();
            }else if(submitButtonName == 'btnSendNotes'){
                saveNotes(true);
                If you add   event.preventDefault(); event.stopPropagation();  to the errorPlacement function, you prevent the form from submitting if there is an error (in code or otherwise)
– Stronghold
                Mar 9, 2021 at 15:40
   _buttons.on("click", function () {
       //the current button that called this handler
       var _currentButton = $(this);
       //do stuff...
       //disable button
       _currentButton.attr("disabled", true);
       //submit form
       form.submit();
here is an example:
Example
                forgot to mention, the example above disables the button before submitting the form instead of in the submit handler, same result but easier to find the calling button
– Banana
                May 30, 2014 at 6:32
The following seemed to work for me.
You can add a hidden field in the form, in the line just above the submit, which will be sent along:
$('.dp-blog-form').append('<input type="hidden" name="theButton" value="'+ this.value +'"/>');
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.