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

最新推荐文章于 2024-11-28 21:51:45 发布

张同学tty

最新推荐文章于 2024-11-28 21:51:45 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： layui 文章标签： javascript 前端 layui java html5

本文链接：https://blog.csdn.net/juedaifenghua2/article/details/130150342

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

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

在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>

接下来，编写JavaScript代码，监听提交按钮的点击事件，并在提交过程中禁用按钮：

	<script>
		//前端防止重复提交
		// 使用属性选择器代替id选择器
		document.querySelector("button[lay-submit]").addEventListener("click", disableButton);
		
		function disableButton(event) {
			// 使用event.target获取触发事件的元素
			var button = event.target;
			// 使用触