Disable submit button when processing form

Question

I have the following code that works well:

$(function() {
      $("input,textarea").jqBootstrapValidation({
            preventSubmit: true,
            submitError: function($form, event, errors) {
              // additional error messages or events
            },
            submitSuccess: function($form, event) {
                event.preventDefault(); // prevent default submit behaviour
                // get values from FORM
                var name = $("input#name").val();
                var email = $("input#email").val();
                var phone = $("input#phone").val();
                var message = $("textarea#message").val();
                var firstName = name; // For Success/Failure Message
                // Check for white space in name for Success/Fail message
                if (firstName.indexOf(' ') >= 0) {
                  firstName = name.split(' ').slice(0, -1).join(' ');
                }
                $.ajax({
                      url: "././mail/contact_me.php",
                      type: "POST",
                      data: {
                        name: name,
                        phone: phone,
                        email: email,
                        message: message
                      },
                      cache: false,
                      success: function() {
                        // Success message
                        $('#success').html("<div class='alert alert-success'>");
                        $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;").append("</button>");
                        $('#success > .alert-success').append("<strong>Su mensaje fue enviado. </strong>");
                        $('#success > .alert-success').append('</div>');
                        //clear all fields
                        $('#contactForm').trigger("reset");
                        ga('send', 'event', {
                          eventCategory: 'Contactos',
                          eventAction: 'Envio contacto',
                          eventLabel: 'Español'
                        });
                      },

I want the form submit button to be exhausted, so you can’t send it back during processing when I leave the submit button disabled during submit? button code:

<button class="btn btn-xl2" type="submit">Enviar </button>

Thanks!

Answer 1

Disable it:

submitSuccess: function($form, event) {
    $('#contactForm').find('.btn.btn-xl2').prop('disabled', true);
    /*...*/
}

And add the callback completeto the ajax method:

complete: function(){
    $('#contactForm').find('.btn.btn-xl2').prop('disabled', false);
}

Answer 2

Add this before $ .ajax ({

$('.btn-xl2').attr('disabled','disabled')

Run codeHide result

Add this to the success function.

$('.btn-xl2').removeAttr('disabled')

Run codeHide result

Answer 3

HTML/CSS.

, type="submit" ( , script , ).

, , .