联系表单，点击后禁用提交按钮

问题描述：

我下载了工作联系表并添加了我需要的一些东西，但是现在我有另一个问题，我不知道如何解决。联系表单，点击后禁用提交按钮

表单提交后，该按钮仍然可以点击几次，并将发送多个邮件给我。表单提交后，应该禁用该按钮。

HTML：

<button type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Submit</button> 
<div id="msgSubmit" class="h3 text-center hidden"></div> 
<div class="clearfix"></div>

这里是JavaScript的：

$("#contactForm").validator().on("submit", function (event) { 
    if (event.isDefaultPrevented()) { 
     // handle the invalid form... 
     formError(); 
     submitMSG(false, "Did you fill in the form properly?"); 
    } else { 
     // everything looks good! 
     event.preventDefault(); 
     submitForm(); 
    } 
});

答

禁用按钮提交表单，像这样：

$("#contactForm").validator().on("submit", function (event) { 
    if (event.isDefaultPrevented()) { 
     // handle the invalid form... 
     formError(); 
     submitMSG(false, "Did you fill in the form properly?"); 
    } else { 
     // everything looks good! 
     event.preventDefault(); 
     $("#form-submit").prop("disabled",true); 
     submitForm(); 
    } 
});

这解决了这个问题。谢谢！ – UXRO

答

多事情可以在这里完成取决于你的完整架构。你可以使用jQuery的one函数，虽然我不推荐它，因为这意味着，直到你加载页面，联系表格才能被提交一次。

我要做的就是，我将禁用按钮，$("#form-submit").attr("disabled","disabled"); OR $("#form-submit").addClass("inactive")和你的CSS使用

#form-submit{ 
    pointer-events:none; 
    opacity:0.6; 
    /*etc etc*/ 
}

，当你的AJAX的回报只是做相反（移除被禁用的属性或类）。另外，将input，textarea值设置为空字符串。

联系表单，点击后禁用提交按钮

相关推荐