I have a form with a submit input and I need that when the button gets clicked, my script do some Ajax actions. Also I need to disable that button during the Ajax request. So I need a jQuery mand to avoid real form submit when input is clicked. I tried to use this:

$('input.searchplease').click(function () {
    $(this).attr('disabled', 'disabled');

    alert('Yep');
    //Do Ajax
});

This didn't worked. I mean, the alert shown correctly but form is submitted. So what is your suggestion?

I have a form with a submit input and I need that when the button gets clicked, my script do some Ajax actions. Also I need to disable that button during the Ajax request. So I need a jQuery mand to avoid real form submit when input is clicked. I tried to use this:

$('input.searchplease').click(function () {
    $(this).attr('disabled', 'disabled');

    alert('Yep');
    //Do Ajax
});

This didn't worked. I mean, the alert shown correctly but form is submitted. So what is your suggestion?

• javascript
• jquery

5 Answers 5

Try this:

$('input.searchplease').click(function (e) {
   $(this).attr('disabled', 'disabled');

   alert('Yep');
   //Do Ajax

   e.preventDefault();
});

$('input.searchplease').click(function () {
    alert('yep');
    return false;
});

This should work

You can do this:

$('form').submit(function(){
    ... ajax things

    return false;
});

I would rather not disable the button (and then enable it), unless I have to.

try this way :

$("#id-of-your-form").submit(function() {

    $("#id-of-your-submit-input").attr("disabled", true);

    // do-ajax
    // you can use jquery's ajax plete handler to enable the submit button again

    return false;
});

I think this will do the trick:

$('form').submit(function(event) {
    event.preventDefault();
    $('#submit-button-ID').attr('disabled', 'disabled');
    $.ajax({
        ...,
        success: function() {
                $('#submit-button-ID').removeAttr('disabled');
              }
    });
});