防止submit表单多次提交

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zhezhebie/article/details/82022982

再提交预约信息的时候,想要点击一次提交之后,将提交按钮置为disabled,做了下面尝试:

<button type="submit" class="btn btn-lg btn-primary" id="submit_once" οnclick="getElementById('submit_once).disabled=true">提交</button>

结果是,点击提交按钮之后,的确置为disabled了,但是这时候form表单根本就没有提交,后台收不到数据。

虽想到下面方法,给form表单取个名字

<form class="form-horizontal" action="{{url('student/postAnAppointment')}}" method="post" enctype="multipart/form-data" role="form" name="form1">

然后写一个dosubmit方法,先把提交按钮置为失效,再把form的submit置为disabled,这样就可以了。后台收到数据,前台提交按钮置为不可再次提交,多次点击,效果与预料一致。

<button type="submit" class="btn btn-lg btn-primary" id="submit_once" οnclick="dosubmit()">提交</button>
<script type="text/javascript">
  function dosubmit() {
  var btnSubmit = document.getElementById("submit_once");
  //将表单提交按钮设置为不可用,可以避免用户再次点击提交按钮进行提交
  btnSubmit.disabled = "true";
  document.form1.submit();
  }
</script>
展开阅读全文

没有更多推荐了,返回首页