zoukankan      html  css  js  c++  java
  • 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>

    ******************************************************************************************************

    这里提供两种不同情况下的阻止重复点击解决方案。
    1.按钮BUTTON类
    2.<a>标签类

    对于第一类情况,button有一个属性是disabled控制其是否可以点击,看代码:

    <input type="button" value="Click"id="subBtn"/>
    <script type="text/javascript">
    function myFunc(){
        //code
       //执行某段代码后可选择移除disabled属性,让button可以再次被点击
        $("#subBtn").removeAttr("disabled");
    }
    $("#subBtn").click(function(){
        //让button无法再次点击
       $(this).attr("disabled","disabled");
        //执行其它代码,比如提交事件等
        myFunc();
    });
    </script>

    第二类情况,可以使用按钮或链接的click事件来执行预期的单击动作,然后将事件处理重定向,以阻止其余的点击。

    <a href="javascript:;" onclick="return funcOne();">点击</a>
    <scripttype="text/javascript">
    function funcOne(){
        //点击一次后把funcTwo赋给funcOne,funcTwo是一个什么也不执行的函数,因此再次点击不执行任何操作
        funcOne=funcTwo;
    	alert("Clickthe button!");
        return false;
    }
    function funcTwo(){
        return false;
    }
    </script>


  • 相关阅读:
    UVA-448
    算法提高-集合选取
    算法训练Maze
    UVA-10061
    树状数组
    前缀和
    【UVA
    统计Linux下的CPU状态信息
    Android_内部文件读取
    Android打开/data/目录以及导出文件
  • 原文地址:https://www.cnblogs.com/moqiang02/p/4061172.html
Copyright © 2011-2022 走看看