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>

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>

• javascript
• jquery
• jquery-validate

• post the root of the function, where this handler is called. – Shaunak D Commented May 30, 2014 at 6:19
• Added the edit. please find. – A.J. Commented May 30, 2014 at 6:28

6 Answers 6

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/

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);
            }

        },

    });
});

//make sure this code executes after dom loads
$(function () {

   //all submits inside 'form' 
   var _buttons = $('input[type="submit"]', form);

   //all buttons inside 'form' 
   var _buttons = $('button', form);

   //attach a click handler

   _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

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 +'"/>');