网站导航
> 文章列表 > 用javascript和layui做一个前端防止重复提交的按钮难不难？

用javascript和layui做一个前端防止重复提交的按钮难不难？

网友: 文章列表 2024-03-21 23:23:54

用javascript和layui做一个前端防止重复提交的按钮难不难？

使用JavaScript和LayUI制作一个防止重复提交的按钮并不难。这里是一个简单的示例，演示了如何在前端实现防止重复提交的按钮：

  1. 首先，确保您的HTML页面包含LayUI的CSS和JavaScript引用。

  2. 在HTML文件中，添加一个表单和一个按钮：

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Prevent Multiple Submissions Example</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css"><script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.all.js"></script>
</head>
<body><form class="layui-form" id="dataForm" lay-filter="dataForm"><div class="bottom"><div class="footer"><button type="button" class="layui-btn" lay-submit="" lay-filter="formYes">确定</button><button type="button" class="layui-btn">取消</button></div></div></form><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script></script>
</body>
</html>
  3. 接下来，编写JavaScript代码，监听提交按钮的点击事件，并在提交过程中禁用按钮： 
    	<script>//前端防止重复提交// 使用属性选择器代替id选择器document.querySelector("button[lay-submit]").addEventListener("click", disableButton);function disableButton(event) {// 使用event.target获取触发事件的元素var button = event.target;// 使用触发事件的元素添加类$(button).addClass("layui-btn-disabled");}</script>

  4. 完整示例

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Prevent Multiple Submissions Example</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css"><script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.all.js"></script>
</head>
<body><form class="layui-form" id="dataForm" lay-filter="dataForm"><div class="bottom"><div class="footer"><button type="button" class="layui-btn" lay-submit="" lay-filter="formYes">确定</button><button type="button" class="layui-btn">取消</button></div></div></form><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>//前端防止重复提交// 使用属性选择器代替id选择器document.querySelector("button[lay-submit]").addEventListener("click", disableButton);function disableButton(event) {// 使用event.target获取触发事件的元素var button = event.target;// 使用触发事件的元素添加类$(button).addClass("layui-btn-disabled");}</script>
</body>
</html>

  5. 完整示例解释说明

    这是一个简单的HTML页面，其中包含一个使用Layui框架样式的表单。当用户点击“确定”按钮时，该按钮将被禁用以防止重复提交。

    下面是代码的详细解释：

    1. 引入必要的CSS和JavaScript文件：

      • Layui CSS文件：https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css
      • Layui JavaScript文件：https://cdn.jsdelivr.net/npm/layui-src/dist/layui.all.js
      • jQuery JavaScript文件：https://code.jquery.com/jquery-3.6.0.min.js

    2. 创建一个表单，包含两个按钮：“确定”和“取消”：

      • 表单的class属性值为layui-form，这是Layui所需的样式。
      • “确定”按钮具有lay-submit和lay-filter属性，这些属性用于触发Layui的表单提交事件。

    3. JavaScript部分：

      • 使用document.querySelector("button[lay-submit]")选择具有lay-submit属性的按钮元素，并为其添加一个click事件监听器。当用户点击该按钮时，将调用disableButton函数。

      • disableButton函数通过event.target获取触发事件的元素（即“确定”按钮）。然后，使用jQuery的addClass方法为按钮添加layui-btn-disabled类，使其看起来处于禁用状态。这可以防止用户在表单处理过程中多次点击按钮，从而防止重复提交。

  6. 如果您还想在表单提交完成后重新启用按钮，可以参考以下代码：

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Prevent Multiple Submissions Example</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css"><script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.all.js"></script>
</head>
<body><form class="layui-form" id="dataForm" lay-filter="dataForm"><div class="bottom"><div class="footer"><button type="button" class="layui-btn" lay-submit="" lay-filter="formYes">确定</button><button type="button" class="layui-btn">取消</button></div></div></form><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>layui.use(['form', 'layer'], function() {var form = layui.form;var layer = layui.layer;form.on('submit(formYes)', function(data) {var button = document.querySelector("button[lay-submit]");disableButton(button);// 通过AJAX提交表单数据// 注意：此处仅为示例，您需要根据实际情况修改$.ajax({url: '/submit-url', // 替换为实际提交地址type: 'POST',data: data.field,success: function(response) {// 处理成功响应layer.msg('提交成功！', {icon: 6, time: 2000});// 启用提交按钮enableButton(button);},error: function() {// 处理失败响应layer.msg('提交失败！', {icon: 5, time: 2000});// 启用提交按钮enableButton(button);}});return false; // 阻止表单默认提交行为});});function disableButton(button) {$(button).addClass("layui-btn-disabled");}function enableButton(button) {$(button).removeClass("layui-btn-disabled");}</script>
</body>
</html>

  7. 表单提交完成后重新启用按钮详细说明

    这是一个包含Layui表单的HTML页面。页面上的“确定”按钮在点击后会禁用以防止重复提交，并使用AJAX提交表单数据。在请求完成后，根据响应情况，页面将显示成功或失败的消息，并重新启用按钮。

    以下是代码的详细解释：

    1. 引入必要的CSS和JavaScript文件：

      • Layui CSS文件：https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css
      • Layui JavaScript文件：https://cdn.jsdelivr.net/npm/layui-src/dist/layui.all.js
      • jQuery JavaScript文件：https://code.jquery.com/jquery-3.6.0.min.js

    2. 创建一个表单，包含两个按钮：“确定”和“取消”：

      • 表单的class属性值为layui-form，这是Layui所需的样式。
      • “确定”按钮具有lay-submit和lay-filter属性，这些属性用于触发Layui的表单提交事件。

    3. JavaScript部分：

      • 使用layui.use(['form', 'layer'], function() {})初始化Layui的form和layer模块。

      • 绑定表单的提交事件：form.on('submit(formYes)', function(data) {})。这里的formYes是lay-filter属性的值，用于识别对应的表单提交事件。

      • 在表单提交事件内，首先通过document.querySelector("button[lay-submit]")获取提交按钮并调用disableButton函数禁用它。

      • 使用jQuery的$.ajax方法提交表单数据。请注意，这里的url需要替换为实际的提交地址。

      • 在AJAX请求的success和error回调函数中，根据响应情况显示相应的消息（成功或失败），并重新启用提交按钮。

      • disableButton和enableButton函数分别用于禁用和启用提交按钮。它们通过添加或删除layui-btn-disabled类来实现。

      • 在表单提交事件的最后，返回false以阻止表单的默认提交行为。

    4. 这个示例包含了一个简单的表单提交处理过程，根据实际情况，您可能需要对表单验证、错误处理等方面进行进一步优化。

网络标签：

相关问题