`
moqiang02
  • 浏览: 556365 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
文章分类
社区版块
存档分类
最新评论

JQuery脚本-通过禁用按钮防止表单重复提交

 
阅读更多
<script type="text/javascript">
/*
jquer 脚本,避免重复提交
隐藏点击的submit,后在他之后插入同名button伪装成被隐藏的submit
最后禁用全部可见的submit和button
最终效果:点击按钮提交表单后,点击后退按钮,返回提交表单页面,提交按钮已被禁用
注:此方法毕竟在客户端处理,防君子不防小人
*/
    $(document).ready(function() {
        $(":submit").click(function() {
            $(this).hide();
            $(this).after("<input type=\"button\" value=\"" + $(this).val() + "\">");
            $(":submit:visible").attr("disabled", "disabled");
            $(":button:visible").attr("disabled", "disabled");
            alert($(this).val());
        });
    });
</script>

分享到:
评论

相关推荐

    Ajax表单提交插件jquery form

    通过使用jQuery Form插件,可以添加进度条、禁用提交按钮等特性,提供更好的用户体验。例如,当表单正在提交时,可以禁用提交按钮: ```javascript $('#myForm').ajaxForm({ beforeSubmit: function() { $('#...

    jquery提交form表单时禁止重复提交的方法

    1. 利用HTML表单自带的提交控制属性:在表单提交按钮上添加一个属性,比如`disabled`,以禁用提交按钮,防止用户进行重复点击。这种方法简单易用,但是通过审查元素还是可以绕过的。 2. 使用JavaScript变量跟踪表单...

    ThinkPHP 防止表单重复提交的方法

    客户端脚本防止刷新,通常指的是在用户提交表单之后,通过JavaScript或者jQuery来禁用提交按钮或者阻止表单的默认提交行为,以防止用户在表单提交后通过刷新页面导致重复提交。这种方法通常用于一些不需要复杂交互的...

    Gravity-Forms--Disable-Submit:提交表单后,禁用“重力表单”表单中的“提交”按钮(例如,快十倍!!)。

    在“重力表单-禁用提交”的场景中,我们将讨论如何通过PHP编程实现这一功能。 首先,我们需要理解重力表单的工作原理。它基于WordPress的插件系统,通过自定义短代码在页面上插入表单,并使用JavaScript和Ajax处理...

    jquery模仿老外网站注册账号提交表单美化特效代码.zip

    3. **按钮交互**:注册表单中的提交按钮,可以通过jQuery添加悬停、点击等状态的动画效果,使按钮更具动感。 4. **表单提交动画**:在用户点击提交后,可以设计加载动画,如旋转图标、进度条等,以告知用户表单正在...

    jquery表单验证

    - 提交按钮的禁用:在验证通过前禁用提交按钮,避免未验证的数据提交。 - 验证的顺序:根据需要,可以设置验证的执行顺序,例如先验证必填项再验证其他规则。 - 提交后的处理:成功提交表单后,可以使用`.valid()`...

    jquery.mobile-1.4.5.zip

    jQuery Mobile 提供了一套完整的UI组件和交互模式,包括导航栏、滑动面板、表单、按钮、工具提示等,使得开发者能够快速构建具有一致用户体验的多平台应用。其核心特性包括: - **页面结构和数据属性**:通过...

    karma-jasmine-jquery-0.1.1

    这个压缩包的 "package" 文件可能是包含所有必需文件的压缩文件,解压后应该有 karma、jasmine 和 jquery 的配置文件、库文件以及可能的示例或者初始化脚本。这使得开发者可以快速地将这些工具整合到自己的项目中,...

    Jquery的表单插件

    jQuery Form插件还支持其他高级功能,如设置缓存、模拟表单提交、禁用/启用按钮等。此外,还可以与其他jQuery插件如Validator、AjaxQueue结合使用,构建更复杂的表单交互逻辑。 总的来说,jQuery Form插件是处理Web...

    jquery-validation

    使用`.validate()`方法初始化验证插件,然后可以使用`submitHandler`回调函数来控制表单的提交行为,例如,只有当表单验证通过时才提交。 8. **禁用验证**: 对于某些情况,可能希望暂时禁用验证,这可以通过调用...

    jquery表单验证获取短信验证码js脚本,有css样式

    总结一下,本示例通过jQuery和JavaScript实现了点击获取短信验证码的功能,并添加了倒计时和按钮状态控制。同时,通过CSS对按钮进行了美化,提供了一种直观且用户体验良好的交互方式。在实际项目中,你需要根据自己...

    JS147-46jquery日历实用代码

    5. **jquery.datePicker.js**:这是未压缩的jQuery日历插件主脚本,包含了所有必要的函数和逻辑。开发者可以通过阅读这个文件理解插件的工作原理和扩展功能。 6. **jquery.datePicker-min.js**:这是经过压缩的版本...

    jquery.mobile-1.4.5

    **jQuery Mobile 1.4.5 知识点详解** jQuery Mobile 是一个强大的前端框架,专为构建响应式、触控友好的移动Web应用程序而设计。这个版本是1.4.5,它提供了丰富的组件、交互效果和优化,旨在简化跨平台的移动应用...

    jQuery-Uploadify详解.pdf

    例如,在用户未登录或未通过权限验证的情况下禁用上传按钮,或者在用户执行特定操作时开始或停止上传过程。 ### 示例 上传插件的使用通常涉及到HTML、CSS和JavaScript的综合运用。以下是一个简单的Uploadify使用...

    jQuery form表单美化实例代码.zip

    这个实例代码不仅展示了如何使用jQuery进行表单美化,还可能涉及到一些常见的jQuery插件,如`validate`插件用于表单验证,`uniform`插件用于统一表单元素样式,或者`ajaxForm`插件实现异步表单提交。这些插件通过...

    JS表单验证与JS常见问题解决方案

    - 防止重复提交:使用`event.preventDefault()`阻止默认的表单提交行为,同时添加逻辑控制。 - 提交按钮禁用:在验证过程中,可以将提交按钮设为禁用状态,防止用户快速点击导致多次提交。 - 错误消息显示:正确...

    validation-jQuery的validation表单验证插件.pdf

    总的来说,jQuery的validation插件提供了一套完整的解决方案,帮助开发者轻松地实现表单验证,确保用户提交的数据符合预设的规则,从而提高应用的稳定性和用户体验。通过灵活的配置和扩展,你可以根据项目需求定制出...

    jQuery提交多个表单的小例子

    - **防止重复提交**:为了防止用户意外多次点击提交按钮,可以禁用按钮或者显示一个加载指示器,确保数据只被提交一次。 - **异步处理**:如果可能,可以使用Ajax异步提交表单,这样可以提供更好的用户体验,因为...

    jquery插件 star-rating

    2. **读写评分**:插件可以读取和设置评分值,这通常与表单提交或服务器数据交互有关。 3. **半星支持**:允许用户选择半星,增加评分的精确度。 4. **禁用状态**:可以设定是否允许用户更改评分,或者在特定情况...

    jquery时间控件时分秒

    而"jquery时间控件时分秒"是jQuery的一个扩展插件,用于创建用户友好的时间选择器,帮助用户方便地输入或选择时间,通常用于表单中的时间输入字段。这种控件在许多场合都非常实用,比如预订系统、日程安排或时间跟踪...

Global site tag (gtag.js) - Google Analytics