防止button重复提交

最新推荐文章于 2024-10-09 16:45:04 发布

nxiaosheng

最新推荐文章于 2024-10-09 16:45:04 发布

阅读量2.8k

点赞数

分类专栏： js 图片 button 文章标签： js

本文链接：https://blog.youkuaiyun.com/u012394981/article/details/50251461

版权

js 同时被 3 个专栏收录

3 篇文章

订阅专栏

图片

3 篇文章

订阅专栏

button

1 篇文章

订阅专栏

为提升用户体验，防止button重复提交，当前推荐的方法是在提交后禁用button。通过设置`disable`属性，可以避免用户多次点击提交。示例代码包含JS实现。此外，讨论了在表单验证中，采用优雅的JS提示而非简单的alert，以增强表单验证的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为了防止button重复提交，现在已经不推荐锁表的操作方式了，直接让button变成disable就可以了，代码如下：

<button style="display: block; width: 200px; height: 30px; margin: 0 auto;" id="btnWorth" onclick="startSetworth()">开始计算</button>

以下是js代码：

<script>
var url = '{:U("Account/new_html",array("page"=>1))}';
function startSetworth(){
    $('#btnWorth').attr('disabled',true);
    $('#newfrm').attr('src',url);
}
</script>

还有就是一些很常见的js的写法，比如给某一个div加很多的属性，或者说img一切的都可以。

<p style="background-color: #EEEEEE;">完成进度：<span id="show">0</span>


<script type="text/javascript">
    var page = <?php echo $page;?>;
    var tpage = <?php echo $t_page;?>;
    if(0<page && tpage>=page){
        setTimeout(function(){
            window.parent.document.getElementById('newfrm').src = '<?php echo $url;?>';
        },1000);

    }
</script>

form表单的js提交

document.getElementById('thisfor_on').submit();

因为经常表单中有很多的需要验证的地方，不能总是alert不，还是需要好看一点的提示比较符合用户的体验了。所以我从公司的代码里面找到了一个，包括js的代码

//以下是tusi.js的完整代码，如果有需要的话，可以进行更改。
/**
 * Created by Administrator on 15-3-23.
 */
function tusi(txt,fun){
    $('.tusi').remove();
    var div = $('<div style="background: url(../../../../Public/common/images/tusi.png);max-width: 85%;min-height: 77px;min-width: 270px;position: absolute;left: -1000px;top: -1000px;text-align: center;border-radius:10px;"><span style="color: #ffffff;line-height: 77px;font-size: 23px;">'+txt+'</span></div>');
    $('body').append(div);
    div.css('zIndex',9999999);
    div.css('left',parseInt(($(window).width()-div.width())/2));
    var top = parseInt($(window).scrollTop()+($(window).height()-div.height())/2);
    div.css('top',top);
    setTimeout(function(){
        div.remove();
        if(fun){
            fun();
        }
    },2000);
}

这个是需要背景图片的。

你需要用的时候，直接引用tusi.js ，直接写tusi("显示tusi.js")