Question

我有以下适用的代码：

$(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'
                        });
                      },

我希望在表单发送按钮用完时，所以你不能在处理时把他送回去因为我在发送时禁用提交按钮？按钮代码是：

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

谢谢！

Answer 1

在以下位置禁用它：

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

并将complete回调添加到ajax方法：

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

Answer 2

在$ .ajax（{

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

在成功功能中添加此功能

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

Answer 3

对我来说，只需要做一些HTML / CSS操作。

例如，您可以更改该按钮的外观并在处理请求时删除type="submit"参数（因此在这种情况下，您应该在脚本启动时将其删除，并在完成时将其取回）。

当然这不是最好的方式，但我相信最简单的方法。

处理表单时禁用提交按钮

3 个答案: