阻止表单提交按钮多次提交的完美解决方法

如果表单是通过onsubmit进行Ajax提交，注意将表单提交按钮input type属性设为button，尽量不要设置为submit类型。

另外，在提交事件发出后，最好将提交按钮设置为disabled，防止由于网络延时问题，让用户有机会进行多次点击重复提交。

onclick事件里面执行 $(this).attr('disabled','disabled'); 在点击一次后立马将按钮设置为不可使用。

或者向如下方法另行定义一个jQuery函数来进行控制：

  $("form").submit(function(){
  $(":submit",this).attr("disabled","disabled");
  });

以上这篇阻止表单提交按钮多次提交的完美解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript阻止表单提交方法（附代码）

    <body> <form action="clock.html" method="post" onsubmit="return checkLength()"> <p>name:<input type="text" name="user" id="user"></p> <input type="submit&quo

  • 使用Ajax方法实现Form表单的提交及注意事项

    写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说想要将控制权放在前端,通过js来操作页面的跳转或者数据变化. 一般这种异步的操作,我们都会想到ajax方式,因此在实现了功能后就整理了这篇文章,通过ajax方法实现form表单的提交并进行后续的异步操作. 常见的form表单提交方式 <!DOCTYPE HTML PUBLIC "-//W3C/

  • 利用JavaScript阻止表单提交的两种方法

    在JavaScript中,阻止表单默认提交行为的方法有两种,分别是: (1) return false 示例代码 <form name="loginForm" action="login.aspx" method="post"> <button type="submit" value="Submit" id="submit">Submit</button&g

  • onsubmit阻止form表单提交与onclick的相关操作

    1. return 的返回值问题,函数中return一旦有返回值,就不在执行下面的语句,直接跳到函数调用的地方.如下PHP函数代码,第一个if条件符合则函数值返回布尔型false,可以返回一个函数的值,并且跳出这个函数:只要遇到return语句,程序就在那一行代码停止执行,执行控制将立刻返回到调用该程序的代码处.function 复制代码 代码如下: function chkinput(form) { if(form.title.value=="") { alert("请输入

  • 用JavaScrip正则表达式验证form表单的方法

    用JavaScrip正则表达式验证form表单的方法

    document:标签之间 location:url history:前进后退 <html> <head> <script type="text/javascript"> function show() { //弹出一个提示框 window.alert("hh"); } //将show方法绑定到按钮上 window.onload=function() { //定位到按钮 var buttonElement=document.for

  • javascript下阻止表单重复提交、防刷新、防后退

    1 服务器端的解决方法.这是我最为推荐的方法.优点是判断准确,兼容性最大. 做法:a页面显示表单,然后提交b页面处理,处理完后重定向到c页面显示结果. 1.0 在访问a页面时在session里生成一个标志ID,例如 //伪代码  session("submitID")=random()  然后把这个值写到表单的一个hidden的input里 //伪代码  <%response.write("<input name=submitID2 type=hidden val

  • JS去掉字符串前后空格、阻止表单提交的实现代码

    $.trim(str) jQuery内部实现为: function trim(str){ return str.replace(/^(\s|\u00A0)+/,'').replace(/(\s|\u00A0)+$/,''); } 使用JS和JQuery 阻止表单提交的两种方法 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk">

  • vue 表单验证按钮事件交由父组件触发的方法

    vue 表单验证按钮事件交由父组件触发,不直接再子组件上操作的方法 子组件: //内容部分 <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80"> <FormItem label="Age" prop="age"> <Input type="

  • 表单Form的submit事件不响应的解决方法

    一.问题描述 类比一下,我用input.select()做了测试,却能响应select事件.这个原因先放一边,我们看看先怎么把眼下的问题解决了. 不响应事件的代码示例: var form = document.getElementById('form1'); form.onsubmit = function() { alert(1); }; form.submit(); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 实际运行,不会有alert出来. 虽然用submit方法来提交表单

  • Django表单外键选项初始化的问题及解决方法

    Django表单外键选项初始化的问题及解决方法

    问题描述 先说明一下问题的由来: Django的模型中经常会用ForeignKey来关联其他表格数据 class MeasureTask(models.Model): taskname = models.CharField(max_length=LEN_FULLNAME, verbose_name="任务名称") road = models.ForeignKey(Road, on_delete=models.CASCADE, verbose_name="设计路段")

  • 阻止表单提交按钮多次提交的完美解决方法

    如果表单是通过onsubmit进行Ajax提交,注意将表单提交按钮input type属性设为button,尽量不要设置为submit类型. 另外,在提交事件发出后,最好将提交按钮设置为disabled,防止由于网络延时问题,让用户有机会进行多次点击重复提交. onclick事件里面执行 $(this).attr('disabled','disabled'); 在点击一次后立马将按钮设置为不可使用. 或者向如下方法另行定义一个jQuery函数来进行控制: $("form").submi

  • php实现表单多按钮提交action的处理方法

    表单内有两个提交按钮,要实现当点击不同的提交按钮时,分别进行两个不同的处理过程,在这里有实现表单多按钮提交action的处理方法分享给大家. 用PHP判断,一个表单两个按钮,按钮的name属性设为相同,但值设为不同,表单提交后,只需要判断提交上来的值就可以转到不同的处理过程去,这个方法比较合理,适合多个按钮在一个表单里. PHP方法,代码如下: <?php echo "$sub<br>\n"; if ("s1"==$sub) { ... } els

  • js实现表单多按钮提交action的处理方法

    之前一篇文章介绍了php实现表单多按钮提交action的处理方法,今天再介绍一种js实现表单多按钮提交action的处理方法,希望能够帮助到大家. 用JS实现一个表单多个按钮的方法,两个onclick事件处理,代码如下: <html> <head> <script> function submitit1() //交由程序1处理 { document.myForm.action = "http://www.site.com/cgi1.php" docu

  • jQuery实现form表单基于ajax无刷新提交方法详解

    本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

随机推荐