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自动刷新页面问题的更多相关文章

  1. 点击 button 自动刷新页面

    问题:为什么点击 button 会刷新页面 ? 原因:你代码的写法可能如下图,把 <button> 按钮 写在 <form> </form> 标签里边啦. < ...

  2. form表单中的button按钮

    如果在form表单中 , 存在button元素,button元素就充当了submit的角色

  3. Jquery实现form表单提交后局部刷新页面的多种方法

    最近做一个小项目,刚好需要用到搜索功能,实现搜索框内输入数据然后按回车或者点击“提交”,然后给后台数据库处理并返回数据给前端,在前端局部更新数据. 但是遇到了一个小问题,就是form表单下任意输入框输 ...

  4. 点击button自动刷新页面的奇葩错误

    以前在写练习的时候遇到过这样一个问题,自己在html中写了一个button <button>test1</button> 在没有给其附上onclick事件时是点击是不会有任何反 ...

  5. 如何阻止form表单中的button按钮提交

    <form action="#" method="post"> <input type="text" name=" ...

  6. HTML Button自动刷新页面的问题

    一.问题<button class="am-btn am-btn-default am-btn-xs am-text-secondary" data-id="99& ...

  7. form表单中新增button按钮,点击按钮表单会进行提交

    原生button控件,在非ie浏览器下,如果不指定type,默认为submit类型.如果不想自动提交表单,指定type=“button”

  8. 关于form表单中button按钮自动提交问题

    坑:点击确认按钮,form表单提交2次,发送后台2次请求 //错误代码: <Button id="btnSubmit" name="btnSubmit" ...

  9. 【小瑕疵】表单中的button会自动提交?

    在表单中使用button标签的时候会发现,即使什么类型都没有设置,但是在点击的时候会发现,表单会自动提交 比如: 我在一个表单的button中添加一个函数,当点击这个按钮时会增加一行内容: 但是当我实 ...

随机推荐

  1. java中小数点位数

    import java.math.BigDecimal;import java.text.DecimalFormat;import java.text.NumberFormat;import java ...

  2. HPS端如何通过AXI Bridge控制FPGA端口的GPIO

    该笔记主要记录HPS端如何通过AXI Bridge控制FPGA端口的GPIO,主要是如何操作FPGA侧的Led 1.AXI Bridge         AXIB主要包括H2FB.F2HB.LWH2F ...

  3. luogu1337 [JSOI2004]平衡点 / 吊打XXX(模拟退火)

    推荐博客:模拟退火总结(模拟退火)by FlashHu.模拟退火的原理,差不多就是不断地由现有的值不断地试探,不断地转到更优的值,并在一定概率下转到较差的值. 题目传送门:luogu1337 [JSO ...

  4. ACM-ICPC 2018 徐州赛区网络预赛 H. Ryuji doesn't want to study (线段树)

    Ryuji is not a good student, and he doesn't want to study. But there are n books he should learn, ea ...

  5. 构建 CDN 分发网络架构简析

    构建 CDN 分发网络架构 CDN的基本目的:1.通过本地缓存实现网站的访问速度的提升 CDN的关键点:CNAME在域名解析:split智能分发,引流到最近缓存节点

  6. 分布式事物 - 基于RPC调用 - TCC模式

    前提 前端业务(主服务)可以以同步或异步调用TCC框架,或者TCC框架本身就是同步异步兼备的. 假定TCC框架拥有断电后的自动恢复能力.同时,在下游业务出现无限失败的情况下,也会进行无限的重试,以达到 ...

  7. JS---DOM---案例:模拟百度搜索框

    模拟百度搜索框 我的思路整理: 1. 注册文本框抬起事件(onkeyup) 2. 处理函数: --->创建临时数组,循环遍历文本框键入的文字内容和keywords数组,用keyWords[i]. ...

  8. 数据库学习笔记day03

    创建两个表,一个名为emp,一个名为dept,并且插入数据 create table emp(empno number(4,0),ename varchar2(10),job varchar2(9), ...

  9. Pikachu-Sql Inject

    Pikachu-Sql Inject 在owasp发布的top10排行榜里,注入漏洞一直是危害排名第一的漏洞,其中注入漏洞里面首当其冲的就是数据库注入漏洞. 一个严重的SQL注入漏洞,可能会直接导致一 ...

  10. 2019蚂蚁金服中高级Java工程师面试题及答案

    面试基础 谈谈一致hash算法? 按照hash算法来将对应的key哈希到一个具有2^32次方个桶的空间中,即0~(2^32)-1的数字空间.将这些数字头尾相连,想象成一个闭合的环形.如果集群中加入新的 ...