Laravel 和 JQuery 表单按钮单击动画仅在表单无效然后有效时发生一次答案

【问题标题】：Laravel & JQuery form button click animation happens only once when form invalid then validLaravel 和 JQuery 表单按钮单击动画仅在表单无效然后有效时发生一次
【发布时间】：2015-05-13 22:00:17
【问题描述】：

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

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

谢谢！

【问题讨论】：

标签： php jquery laravel onclick blade

【解决方案1】：

我想通了！在网上看到一大段切换按钮的代码后，我刚刚在我的 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;
}
});

【讨论】：