2016-11-20 89 views
0

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

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

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

回答

1

禁用按钮提交表单,像这样:

$("#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(); 
    } 
}); 
+0

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

0

多事情可以在这里完成取决于你的完整架构。 你可以使用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值设置为空字符串。