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中添加一个函数,当点击这个按钮时会增加一行内容: 但是当我实 ...
随机推荐
- python爬虫--图片懒加载
图片懒加载 是一种反爬机制,图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间.为了解 ...
- pipelinedb 常用sql语句
-- 创建普通表create table simple_user (name varchar(80), age int , phone varchar(30), birthday date ); -- ...
- webpack学习_webpack-dev-server自动编译代码
之前每次修改完之后都要执行npm run build来编译,下面有三种方式可以实现代码变化后自动编译代码,下面只重点说webpack-dev-server,其他的请看webpack开发文档 1.web ...
- CCF-CSP题解 201703-4 地铁修建
求1-n最长边最小的路径. 最短路变形.dis值向后延申的方式是:\[dis[j]=min(dis[j],max(dis[i],w(i,j))\] 显然满足dijkstra贪心的选择方式.spfa也当 ...
- hdu 2089 不要62 (数位dp基础题)
不要62 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- poj 1679 The Unique MST (次小生成树模板题)
Given a connected undirected graph, tell if its minimum spanning tree is unique. Definition 1 (Spann ...
- public class 和 class的区别
问题:public class 和 class的区别 public class 公共类 class 普通类 一个java源文件中可以有多个class,但是最多只能有一个public class 可以没 ...
- [译]C# 7系列,Part 6: Read-only structs 只读结构
原文:https://blogs.msdn.microsoft.com/mazhou/2017/11/21/c-7-series-part-6-read-only-structs/ 背景 在.NET世 ...
- C#_.NetCore_WebAPI项目_EXCEL数据导出(ExcelHelper_第二版_优化逻辑)
项目需要引用NPOI的Nuget包:DotNetCore.NPOI-v1.2.2 本篇文章是对WebAPI项目使用NPOI操作Excel时的帮助类:ExcelHelper的改进优化做下记录: 备注:下 ...
- highreport报表工具功能介绍
目前国产报表工具大部分都是Java版本,例如润乾和帆软,而C#写的报表工具国内还没有,介绍一款VS2010(C#)写的国产报表工具(highreport),采用类Excel设计,零代码实现复杂报表展示 ...