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获取每月的第一天和最后一天
// 获取当前年份.月份.日期 Calendar cale = null; cale = Calendar.getInstance(); // 获取当月第一天和最后一天 SimpleDateForma ...
- Scala函数式编程(四)函数式的数据结构 下
前情提要 Scala函数式编程指南(一) 函数式思想介绍 scala函数式编程(二) scala基础语法介绍 Scala函数式编程(三) scala集合和函数 Scala函数式编程(四)函数式的数据结 ...
- 《Java练习题》习题集三
编程合集: https://www.cnblogs.com/jssj/p/12002760.html Java总结:https://www.cnblogs.com/jssj/p/11146205.ht ...
- ElasticSearch 7.4.2 Root mapping definition has unsupported parameters
新建索引 PUT people { "settings":{ "number_of_shards":3, "number_of_replicas&qu ...
- Shell(六):输入/输出重定向
重定向的作用是将命令的执行结果输出到指定的文件中. 重定向命令列表如下: 文件描述符 0 通常是标准输入(STDIN),1 是标准输出(STDOUT),2 是标准错误输出(STDERR). 1.输出重 ...
- Win10系统重做
一.准备工作: 1.电脑(台式电脑.笔记本电脑): 2.U盘(内存大于4G): 3.软碟通(UltraISO):下载地址:https://pan.baidu.com/s/1tpCiIyIwK_7LaL ...
- 《Web Development with Go》Mangodb查询一条记录
select加where package main import ( "fmt" "log" "time" "gopkg.in/m ...
- C#线程学习笔记一:线程基础
本笔记摘抄自:https://www.cnblogs.com/zhili/archive/2012/07/18/Thread.html,记录一下学习过程以备后续查用. 一.线程的介绍 进程(Proce ...
- 获取本机的IP地址
/// <summary> /// 获取本机IP地址 /// </summary> /// <returns>本机IP地址</returns> publ ...
- springboot使用hibernate validator
前言 在开发中经常需要写一些字段校验的代码,比如字段非空,字段长度限制,邮箱格式验证等等,写这些与业务逻辑关系不大的代码个人感觉有两个麻烦: 验证代码繁琐,重复劳动 方法内代码显得冗长 每次要看哪些参 ...