form表单中的button自动刷新页面问题
form表单中如果存在button的话,有可能会出现一个问题:点击button,触发了页面的自动刷新事件。
原因是因为<button>标签默认的类型是submit,即默认的button点击就会触发表单的提交事件。
<button></button>
<!-- 两者是相当的 -->
<button type="sumbit"></button>
解决的办法有三个。
1.在<button>标签中添加属性type="button"。
<button type="button"></button>
2.将<button>标签改为<input>标签。
<input type="button" />
3.在button的点击事件中加入阻止默认事件执行的代码段(JavaScript/jQuery)。
$('button').on('click', function(e) {
e.preventDefault();
});
另外,其实现在一般是不建议使用button标签的,而是使用a标签做按钮,一个是样式的定制问题,一个就是上面的问题。
"人最强大的时候,不是坚持,而是放下。"
form表单中的button自动刷新页面问题的更多相关文章
- 点击 button 自动刷新页面
问题:为什么点击 button 会刷新页面 ? 原因:你代码的写法可能如下图,把 <button> 按钮 写在 <form> </form> 标签里边啦. < ...
- form表单中的button按钮
如果在form表单中 , 存在button元素,button元素就充当了submit的角色
- Jquery实现form表单提交后局部刷新页面的多种方法
最近做一个小项目,刚好需要用到搜索功能,实现搜索框内输入数据然后按回车或者点击“提交”,然后给后台数据库处理并返回数据给前端,在前端局部更新数据. 但是遇到了一个小问题,就是form表单下任意输入框输 ...
- 点击button自动刷新页面的奇葩错误
以前在写练习的时候遇到过这样一个问题,自己在html中写了一个button <button>test1</button> 在没有给其附上onclick事件时是点击是不会有任何反 ...
- 如何阻止form表单中的button按钮提交
<form action="#" method="post"> <input type="text" name=" ...
- HTML Button自动刷新页面的问题
一.问题<button class="am-btn am-btn-default am-btn-xs am-text-secondary" data-id="99& ...
- form表单中新增button按钮,点击按钮表单会进行提交
原生button控件,在非ie浏览器下,如果不指定type,默认为submit类型.如果不想自动提交表单,指定type=“button”
- 关于form表单中button按钮自动提交问题
坑:点击确认按钮,form表单提交2次,发送后台2次请求 //错误代码: <Button id="btnSubmit" name="btnSubmit" ...
- 【小瑕疵】表单中的button会自动提交?
在表单中使用button标签的时候会发现,即使什么类型都没有设置,但是在点击的时候会发现,表单会自动提交 比如: 我在一个表单的button中添加一个函数,当点击这个按钮时会增加一行内容: 但是当我实 ...
随机推荐
- pipelineDB学习笔记-3. Continuous Transforms (连续转换)
以下内容为本人根据pipelineDB官网内容进行翻译,如有不妥之处请指正,谢谢大家 Continuous Transforms (连续转换) 一.定义: Continuous Transforms ...
- Go 面试每天一篇(第 65 天)
Go 面试每天一篇(第 65 天) 1.下面列举的是 recover() 的几种调用方式,哪些是正确的? A. 1func main() { 2 recover() 3 panic(1) 4} B. ...
- 【转载】[C++ STL] deque使用详解
转载自 https://www.cnblogs.com/linuxAndMcu/p/10260124.html 一.概述 deque(双端队列)是由一段一段的定量连续空间构成,可以向两端发展,因此不论 ...
- UWP 从创建到发布流程一栏
# UWP的产品新建到发布流程一览 1,UWP开发特性 U: Universal(通用) W: Windows P: Plantform(平台) 运行在Windows10设备 比WPF更加多样化和完善 ...
- 【后端C#】后台通过http post 调用 webservice 的方法
定义http post 调用webservice的某个方法 /// <summary> /// http Post调用 WebService /// </summary> pu ...
- 前端小白webpack学习(四)
.less文件与.scss文件使用与.css文件相仿 less-loader使用需要借助less插件,终端输入npm i less less-loader -D安装; sass-loader使用需要借 ...
- Ant Design 错误记录
Ant Design 错误记录 一: 标签页Tabs 1:设置activeKey或defaultActiveKey,绑定默认值不起作用: => 需要同时设置activeKey和defaul ...
- xml-mapping xml 与 java 对象转换映射框架,像 XStream 一样优雅地读写xml
xml xml 是 java 实现的 xml 框架. 希望以最优雅的方式进行 xml 和 java 之间的转换处理,一行代码搞定一切. 特点 对象的和 xml 的互相映射 支持注解 @Alias 指定 ...
- visual studio 的快键键(持续更新)
目录 1. CTRL+ Tab 2. Prop+ Tab 3. CTRL+. 4. 断点相关 5.快速搭建类的构造函数 6.查看需要引用的包 1. CTRL+ Tab 自动生成无参构造函数 2. Pr ...
- pyhton的安装,环境变量的设置,pycharm的安装下载,中文汉化和字体的设置
1.下载pycharm https://www.7down.com/soft/336988.html 1.pycharm的汉化下载汉化包:resources_cn.jar 放到pycharm的安 ...