当前位置: 首页 > 知识库问答 >
问题:

在click事件时停止jquery多次提交表单

叶健柏
2023-03-14

我正在使用jquery submit()函数提交表单,但它多次提交。我用尽了我所知道的一切,但无法阻止它。下面是我的功能:

function submit(){
    $("#save").prop('disabled', true);
    $("#loader").modal('show');
    $("#save").off('click');
    if($("#name").val() == ''){
        alert("Please Enter Name!");
        $("#save").prop('disabled', false);
        $("#save").on('click', submit);
        $("#loader").modal('hide');  
        return false;
    }
    // Other validations as well
    $("#form").submit();  
}

$("#save").off('click').on('click', submit);

下面是我的表格:

<form action="abc.php" method="post" id="form">
    <input type="text" id="name" />
    <button type="button" id="save">save</button>
</form>

但有时如果用户多次点击按钮的速度太快,则点击多次工作。不是每次。有人知道吗?

共有1个答案

宦瀚
2023-03-14

想到的一个选项是在单击时向“Save”按钮添加一个类名,并在回调中检查这个类名,如果类存在,则返回,否则提交。如下所示:

function submit(){
    const $saveBtn = $('#save');
    //if the button has been clicked already, return
    if($saveBtn.hasClass('clicked'){
        return;
    }else{ //add the class to prevent multiple submission
       $saveBtn.addClass('clicked');
    }
    $saveBtn.prop('disabled', true);
    .......
}

编辑

既然您说上面添加className的解决方案不起作用,那么就使用全局布尔值:

在脚本的顶部声明boolean:

let submitted = false;

function submit(){
    //if the boolean is true, return
    if(submitted){
        return;
    }else{ //set to true
        submitted = true;
    }
    const $saveBtn = $('#save');
    $saveBtn.prop('disabled', true);
    .......
}
 类似资料:
  • 本文向大家介绍如何使用jQuery click事件提交表单?,包括了如何使用jQuery click事件提交表单?的使用技巧和注意事项,需要的朋友参考一下 要使用jQuery click事件提交表单,您需要检测Submit事件。让我们使用点击事件而不使用点击事件来提交表单。 示例 您可以尝试运行以下代码以了解如何使用jQuery click事件提交表单-

  • 本文向大家介绍在PHP中提交表单时如何防止多次插入?,包括了在PHP中提交表单时如何防止多次插入?的使用技巧和注意事项,需要的朋友参考一下 提交表单时,PHP会话可用于防止多次插入。PHP会话设置一个会话变量(例如$ _SESSION ['posttimer']),该变量设置POST上的当前时间戳。在PHP中处理表单之前,请检查$_SESSION ['posttimer']变量是否存在,并检查特定

  • 我使用以下代码使用Ajax提交表单: 此函数检查表单元素中所需的类 然后,我有了这段代码,可以使用上述功能自动检查所有表单中的必填字段: 它适用于发布到另一页的表单。 当使用Ajax提交代码时,当出现错误时,它会显示,但它仍会提交表单。

  • 问题内容: 我有一个问题。我有多个表单元素(带有的表单),我还使用AJAX 添加了另一个表单元素。因此,我希望它处理类似的Submit事件: 但是添加了AJAX的表单无法使用。 问题出在哪里?是虫子吗? 问题答案: 您需要将事件委托给文档级别 的工作原理与您使用时相同,但也适用于以后添加的DOM。

  • 问题内容: 停止提交表单的一种方法是从JavaScript函数返回false。 单击提交按钮后,将调用验证功能。我有一个表单验证案例。如果满足该条件,则调用一个名为 returnToPreviousPage() 的函数 。 我正在使用JavaScript和Dojo Toolkit。 而不是返回上一页,它提交了表单。如何取消提交内容并返回上一页? 问题答案: 您可以使用函数的返回值来防止表单提交 和

  • 问题内容: 我有一个要通过jQuery捕获并通过AJAX发送的表单。我的问题是,每次刷新页面时,表单都会提交多次。 我尝试取消绑定“提交”按钮,但通常在第一次提交后发布表单。任何帮助,将不胜感激 问题答案: 您最有可能正在使用或触发ajax事件。试试这个: