Laravel&JQuery表单按钮点击动画仅在表单无效时发生一次，然后有效 - Laravel & JQuery form button click animation happens only once when form invalid then valid

Laravel & JQuery form button click animation happens only once when form invalid then valid

我在发送电子邮件表单上有一个按钮，我想将其动画化为"发送"，直到帖子响应返回值。除非用户不符合输入验证（例如，未输入电子邮件），否则它工作得很好。显示一条错误消息，我的代码将按钮更改回正常，这很好。问题是，如果他们随后将输入更改为有效并再次单击发送按钮，则该按钮不会更改，但帖子仍然会发生。只是这一次，用户不知道它当前正在发送，因为按钮尚未更改或禁用。总体目标是在加载发送按钮时停止多次单击发送按钮。

HTML（在 .blade.php 文件中使用 Laravel 语法）：

{{ Form::button('SEND',array('class'=>'btn-green medium pull-right','id'=>'completeExportToMail')) }}

Jquery：

$("#completeExportToMail").click(function(){
    var formData = $("#mailExportForm").serialize();
    var modal = '#modalEmailSave';
    $("#addError").empty();
    $('#modalEmailSave .help-inline').remove();
    $('#modalEmailSave .control-group').removeClass('error');
    validateForm();
    if($("#mailExportForm").valid()){
        $("#completeExportToMail").html('Sending... <img src="../../../assets/img/loading.gif" alt="." style="width:15px; height:15px; margin-top:-4px;"></img>');
        $('#completeExportToMail').prop('disabled', true);
        $.post(site+'object/mail', formData, function(response){
            if(response.status){
               $(modal).modal('hide');
               $(modal).on('hidden', function () {
                  $(modal+' #email').val('');
               });
            }
            else{
                $("#mailError").text(response.errors);
            }
            //Button reset whether or not email actually sends
            $("#completeExportToMail").html('Send');
            $('#completeExportToMail').prop('disabled', false);
        },'json');
    }
});

谢谢！

我想通了！在网上看到一大块用于切换按钮的代码后，我只是在 JQuery 的末尾添加了 return false; 并且它起作用了！

$("#completeExportToMail").click(function(){
var formData = $("#mailExportForm").serialize();
var modal = '#modalEmailSave';
$("#addError").empty();
$('#modalEmailSave .help-inline').remove();
$('#modalEmailSave .control-group').removeClass('error');
validateForm();
if($("#mailExportForm").valid()){
    $("#completeExportToMail").html('Sending... <img src="../../../assets/img/loading.gif" alt="." style="width:15px; height:15px; margin-top:-4px;"></img>');
    $('#completeExportToMail').prop('disabled', true);
    $.post(site+'object/mail', formData, function(response){
        if(response.status){
           $(modal).modal('hide');
           $(modal).on('hidden', function () {
              $(modal+' #email').val('');
           });
        }
        else{
            $("#mailError").text(response.errors);
        }
        //Button reset whether or not email actually sends
        $("#completeExportToMail").html('Send');
        $('#completeExportToMail').prop('disabled', false);
    },'json');
    return false;
}
});