JS禁止FORM的<input type="submit" />提交的方法--测试过--非常有用

最新推荐文章于 2024-05-10 01:05:40 发布
最新推荐文章于 2024-05-10 01:05:40 发布
阅读量4.1k 收藏 1
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ggh19/article/details/27363563
版权 
<!DOCTYPE html>
<html>
<head>
<title>JS禁止FORM的submit按钮提交</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript">
/**
 *ggh
 *用JS阻止FORM的<input type="submit" />提交
 *很有用。既可以使用form的默认提交，又可以对默认提交进行JS干扰.
 */
function sub()
{
	var content = document.getElementById("content").value;
	if(content == "")
	{
		alert("No empty");
	}
	else
	{
		alert(content);
	}
}
</script>
</head>
<body>
<div>
	<form method="POST" onSubmit="return sub()">
	<p><textarea id="content"></textarea></p>
	<p><input type="submit" value="Submit" /></p>	
	</form>
</div>
</body>
</html>


刚刚悟道
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
阻止input type是submit的提交和跳转（button 写onclick函数失败后的反思）
qq_19000887的博客
12-18 1296
阻止input type是submit的提交和跳转（button 写onclick函数失败后的反思）button写onclick函数不能提交利用input submit按钮实现 button写onclick函数不能提交 本人小白，写给笨笨的自己。 之前从来没写过，但是也感觉每次写代码都有绕很多弯路，还是记下来方便自己吧。其实是之前太懒了 （希望能同时方便其他人？不过大家都比我强就是了。） 在做数据...
JavaScript实现表单阻断提交--高效高可用超详细
weixin_42886104的博客
02-26 2020
在web开发共，我们有验证表单的业务，用户的输入符合我们的要求，就可以提交，用户的输入不符合要求，就阻止用户提交，这样能够更好的提高用户体验，减轻服务器的压力。前台能完成的事情，就在前台完成。 效果图：   一、如何阻断提交（写给新手） html中，我们有了type为“submit”的提交按钮，当我们点击它时，表单就会提交到action所指向的地址。 &lt;form name="...
利用JS实现表单的自动提交
weixin_30915275的博客
06-30 727
今天需要将一个chat整合到客户的网站上去，实现网站的注册用户登录本网站之后点击某个链接能够直接登录到chat上去。我保留了chat原有的登录界面，采用JS技术当页面跳转过来的时候自动填充表单，并自动提交表单，从而实现网站用户无需再次登录即可进入chat。具体代码实现如下 JS代码 <script> //取得cookie值 function getCo...
网站开发进阶(四十四)input type=“submit“ 和“button“的区别_input[type=&quot；submit&quot；]
最新发布
2401_84412194的博客
05-10 291
如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】在一个页面上画一个按钮，有四种办法：这就是一个按钮。如果你不写javascript 的话，按下去什么也不会发生。
通过JavaScript屏蔽提交按钮
gc025的专栏
03-11 524
通过js代码，当用户点击提交按钮后，屏蔽提交按钮使用户无法点击提交按钮或点击无效，从而实现防止表单重复提交。 ps：js代码很容易被绕过。比如用户通过刷新页面方式，或使用postman等工具绕过前段页面仍能重复提交表单。因此不推荐此方法。 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%...
javascript阻止form表单自动提交的方法
风如也的博客
07-19 3786
javascript阻止form表单自动提交的方法 JavaScript中，阻止form表单自动提交的方法有两种： （1） 使用preventDefault() 在标准浏览器中，阻止浏览器自动提交form表单的默认行为使用event.preventDefault()。 而在IE6 - 8中，使用returnValue属性来实现。 <form action="login.aspx" metho...
如何防止INPUT按回车自动提交表单FORM
11-29
总结来说，防止`<input>`按回车自动提交`<form>`表单，可以通过增加隐藏的`<input>`元素或者使用JavaScript监听并阻止回车键的默认行为。这两种技术在实际开发中都得到了广泛的应用，可以根据项目需求选择适合的实现...
定义input type=file 样式的方法
12-14
<input type="submit" name="submit" class="btn" value="上传" /> </form> </div> ``` 在这个结构中，`<input type="text">`用于显示用户选择的文件名，`<input type="button">`则作为点击触发文件选择对话框的...
JS表单提交验证、input（type=number） 去三角 刷新验证码
12-08
<button type="submit">提交</button> </form> <script> function checkFrom() { var username = $('#username').val(); var pwd = $('#pwd').val(); if (username == null || username == "") { alert(...
浅谈angular表单提交中ng-submit的默认使用方法
10-17
<button type="button">提交</button> ``` 这样，按钮点击就不会触发表单的提交事件了。 总结一下，`ng-submit`是AngularJS中处理表单提交的关键指令，它允许我们在表单提交时执行自定义的JavaScript代码。在使用`...
form表单input标签回车键禁用表单提交，走js方法提交
qq_21810059的博客
10-20 411
给form标签加 οnkeydοwn=“if(event.keyCode==13)return false;给input标签添加 οnkeydοwn=“BindEnter(event)”或者给body添加 οnkeydοwn=“BindEnter(event)”就会执行 BindEnter()方法了。进止input回车，提交表单。
js阻止表单提交的两种方法
weixin_30411997的博客
02-07 94
下面直接看代码。 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function checkLength(){ ...
js禁止回车提交表单
村长Korbin
04-13 1317
function ifenter(){ if(event.keyCode==13){ return false; }else if(event.srcElement.type=="submit"){ form1.submit(); } } document.onkeydown=ifenter;
【bug】form内的input有值却不提交的原因，这个bug找了一晚上
bin2277904333的博客
08-31 4330
1、程序描述 这个页面有两个表单，表单A和表单B。 因为有些内容在要提交的值 li 标签里，所以就把这些不能直接提交的标签里的值、和表单B的内容，放到了表单A。 要问为什么要有表单A，其实我只打算提交表单B，表单A其实没有也可以。（之前用另一种方式提交参数，那时候留下的） 只要里面的元素存在，然后我把元素的值复制到表单B，然后提交。就可以了 2、bug描述 但是、事情没那么简单...
submit禁止提交的几种方式
热门推荐
u011431550的专栏
09-11 1万+
阻止表单提交。。。
防止表单重复提交的简单有效的策略
Leon_Jinhai_Sun的博客
02-27 289
点击提交按钮两次。 点击刷新按钮。 使用浏览器后退按钮重复之前的操作，导致重复提交表单。 使用浏览器历史记录重复提交表单。 浏览器重复的HTTP请求。 用户提交表单时可能因为网速的原因，或者网页被恶意刷新，致使同一条记录重复插入到数据库中，这是一个 比较棘手的问题。我们可以从客户端和服务器端一起着手，设法避免同一表单的重复提交。 1、js禁掉提交按钮。 表单提交后使用Javascript使...
js按钮的click事件，给Input（submit）按钮添加事件监听addEventListener存在问题
weixin_45881103的博客
06-26 3486
一、提交按钮的点击事件 目的：html中表单按钮，想给提交按钮添加一个点击事件，当点击时实现相应函数功能。 存在问题：点击页面函数执行很快，结果不正确。如图： （1）、HTML部分代码 <form> <input type="submit" class="logbtn" value="Login" id="test"> </form> （2）、JavaScript部分代码 let test=document.getElementById('te
JS中submit提交的问题
yyguy的博客
10-27 7778
&lt;form id="ff" action=" " method="post" &gt; &lt;input type="text" name="username" class="form-control" placeholder="用户名" required&gt; &lt;input type="su
JS-表单脚本
种子不服古怪的博客
05-10 180
1.表单基础知识 在HTML中,表单是由<form>元素来表示的,而在JavaScript中,表单对应的则是HTMLFormElement元素,其特有的属性和方法(挑重点) action:接收请求的URL,等价于HTML中的action特性(action 属性定义了当表单被提交时数据被送往何处) name:表单的名称,等价于HTML中name特性 reset():将所有表单域重置为默...
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>酒店管理系统</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>酒店管理系统</h1> </header> <main> <h2>酒店客房管理</h2> <table> <thead> <tr> <th>ID</th> <th>类型</th> <th>价格</th> <th>编辑</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>单人房</td> <td>¥200</td> <td><button class="edit-btn">编辑</button></td> </tr> <tr> <td>2</td> <td>双人房</td> <td>¥300</td> <td><button class="edit-btn">编辑</button></td> </tr> <tr> <td>3</td> <td>豪华房</td> <td>¥500</td> <td><button class="edit-btn">编辑</button></td> </tr> </tbody> </table> <div class="add-form"> <h3>添加客房</h3> <form> <div> <label for="room-id">ID：</label> <input type="number" id="room-id" required> </div> <div> <label for="room-type">类型：</label> <input type="text" id="room-type" required> </div> <div> <label for="room-price">价格：</label> <input type="number" id="room-price" required> </div> <button type="submit">添加</button> </form> </div> </main> <script src="script.js"></script> </body> </html>给代码逐行加上注释
05-24
<!DOCTYPE html> <!-- 声明文档类型 --> <html> <head> <meta charset="UTF-8"> <!-- 设置字符编码为UTF-8 --> <title>酒店管理系统</title> <!-- 设置网页标题 --> <link rel="stylesheet" href="style.css"> <!-- 引入外部样式表 --> </head> <body> <header> <!-- 设置网页头部 --> <h1>酒店管理系统</h1> <!-- 设置网页标题 --> </header> <main> <!-- 设置网页主体内容 --> <h2>酒店客房管理</h2> <!-- 设置主体内容标题 --> <table> <!-- 创建表格 --> <thead> <!-- 设置表格头部 --> <tr> <!-- 创建表格行 --> <th>ID</th> <!-- 创建表格头部单元格 --> <th>类型</th> <th>价格</th> <th>编辑</th> </tr> </thead> <tbody> <!-- 设置表格内容 --> <tr> <td>1</td> <!-- 创建表格单元格，并填写内容 --> <td>单人房</td> <td>¥200</td> <td><button class="edit-btn">编辑</button></td> <!-- 创建带有“编辑”按钮的单元格 --> </tr> <tr> <td>2</td> <td>双人房</td> <td>¥300</td> <td><button class="edit-btn">编辑</button></td> </tr> <tr> <td>3</td> <td>豪华房</td> <td>¥500</td> <td><button class="edit-btn">编辑</button></td> </tr> </tbody> </table> <div class="add-form"> <!-- 创建添加客房的表单 --> <h3>添加客房</h3> <!-- 设置表单标题 --> <form> <!-- 创建表单 --> <div> <label for="room-id">ID：</label> <!-- 创建表单标签和输入框 --> <input type="number" id="room-id" required> <!-- 设置输入框类型为数字，且必填 --> </div> <div> <label for="room-type">类型：</label> <input type="text" id="room-type" required> <!-- 设置输入框类型为文本，且必填 --> </div> <div> <label for="room-price">价格：</label> <input type="number" id="room-price" required> </div> <button type="submit">添加</button> <!-- 创建提交按钮 --> </form> </div> </main> <script src="script.js"></script> <!-- 引入外部JavaScript文件 --> </body> </html>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值