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中添加一个函数,当点击这个按钮时会增加一行内容: 但是当我实 ...
随机推荐
- 《Java基础知识》Java内部类及其实例化
在 Java 中,允许在一个类(或方法.语句块)的内部定义另一个类,称为内部类(Inner Class),有时也称为嵌套类(Nested Class). 内部类和外层封装它的类之间存在逻辑上的所属关系 ...
- 5. abp集成asp.net core
一.前言 参照前篇<4. abp中的asp.net core模块剖析>,首先放张图,这也是asp.net core框架上MVC模块的扩展点 二.abp的mvc对象 AbpAspNetCor ...
- MySQL密码正确却无法本地登录-1045 Access denied for user 'root'@'localhost' (using password:YES
MySQL密码正确却无法本地登录 报错如下: ERROR 1045 (28000): Access denied for user ‘root‘@‘localhost‘ (using password ...
- linux路径问题
在 Linux 中,简单的理解一个文件的路径,指的就是该文件存放的位置,例如,在<Linux文件系统的层次结构>中提到的 /home/cat 就表示的是 cat 文件所存放的位置.只要我们 ...
- Java 包(package)的概念及实例
包的作用 1.把功能相似或相关的类或接口组织在同一个包中,方便类的查找和使用. 2.如同文件夹一样,包也采用了树形目录的存储方式.同一个包中的类名字是不同的,不同的包中的类的名字是可以相同的,当同时调 ...
- Go学习笔记(持续更中,参考go编程基础,go边看边练)
使用关键字 var 定义变量,自动初始化为零值.如果提供初始化值,可省略变量类型. 在函数内部,可用更简略的 := 方式定义变量.空白符号_ package main import "fmt ...
- Grafana = 可视化分析 + 监控告警
Grafana是一个完美地分析和监控的开发平台 可以把Grafana理解为一个可视化面板(Dashboard),其实Kibana也是一个分析和可视化平台,只不过在大家的日常使用中Kibana是跟着Lo ...
- PlayJava Day028
1.网络程序中套接字(Socket)用于将应用程序与端口连接起来 套接字是一个假想的连接装置,就像插插头的设备”插座“,用于连接电器与电线,如下所示 客户端:应用程序 <----> Soc ...
- Unity容器<1>
参考地址: https://docs.microsoft.com/en-us/previous-versions/msp-n-p/dn170416(v=pandp.10) 总览 Unity是一个轻量级 ...
- springcloud vue.js 微服务分布式 前后分离 集成代码生成器 shiro权限 activiti工作流
1.代码生成器: [正反双向](单表.主表.明细表.树形表,快速开发利器)freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本.处理类.service等完整模块2. ...