Form表单中的button按钮，默认会自动提交表单

最新推荐文章于 2023-07-21 16:11:54 发布
最新推荐文章于 2023-07-21 16:11:54 发布
阅读量2.9k 收藏 2
点赞数
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhou_1997/article/details/103807675
版权

Form表单中的button按钮，默认会自动提交表单

在表单页面中，需要添加个其他功能按钮，不需要提交表单或刷新。
但表单内设置< input type=“button” >时，如果没有指定其type类型的时，默认为type=”submit”。那么将该input的button设置一个类型type=“button”，就可以啦。
而且表单提交的url为其action属性的值，如果没有设置action属性，那么默认的表单还是提交给当前页面。
参考：form表单中 button 、 input type=“button” 、 input type=“submit” 的区别
在写表单页面的时候，点击button按钮就会出现自动提交表单的情况

zhou_1997
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2023.11.21使用＜button＞元素来触发form表单和数据提交
leigh_chen的博客
11-21 1742
除了使用``中的`submit`方式进行form表单和数据提交，还可以使用button方式，两种方式视使用场景，各有优点。
踩坑：form表单中button按钮，点击后提交表单
这是我的笔记本，记录学习历程，分享学习经验，菜鸡一枚，感谢支持！
05-22 1036
我当时是在JSP中写的这段代码，我一直以为只是JSP的问题，然后又开始怀疑jQuery的问题，都没有解决。然后终于在网上找到了相关的文章。以下来自MDN的官网文档中的说明。
form表单中button按钮的触发问题
m0_51557131的博客
03-03 651
1<form action=""> <button onclick="">按钮</button> </form> 点击按钮提交刷新 2 onclick绑定一个submit事件 <form action=""> <button onclick="submit">按钮</button> </form> 点击按钮刷新提交 3 为了防止提交可以设置button的type为button &lt
form中button会自动提交的问题（实用，赞）
chelen_jak的专栏
11-13 1233
原文出处：https://blog.csdn.net/hani_wen/article/details/88413957 <form> ...... <button class='btn' (click)='handleClick'>选择</button> ...... </form> 当点击选择按钮butt...
form表单的默认提交行为
liudanyang_21的博客
08-21 2165
一 如果<form></form>表单中只有一个<input type="text"/>，则使文本框获取焦点，并单击回车，form会自动提交。 提交路径为action属性拼接到当前路径（action属性默认为空字符串，如果form没有action属性，则提交路径与当前路径相同）。 浏览器表现：Chrome（桌布版、移动版）会出现此问题，Android手机会出现。Safari（桌面版、移动版）不会出现。 解决方法：禁止表单提交。 1 设置成...
JavaScript在form表单中使用button按钮实现submit提交方法
10-20
在form表单提交中，使用button来间接完成submit的提交更为灵活。接下来通过本文给大家介绍JavaScript在form表单中使用button按钮实现submit提交方法，需要的朋友参考下吧
解决layui中的form表单与button的点击事件冲突问题
12-01
layui的form表单位置和button标签的位置重合，会使得button的click事件得不到响应，如图： 蓝色底为form的位置，“重新搜索”为<button>标签的位置，此时，button标签的click事件无法响应。 必须将form的宽度...
通过button将form表单的数据提交到action层的实例
08-29
通常情况下，我们会使用 Form 表单的 action 属性来指定提交的路径，但是在某些情况下，我们可能需要使用按钮来提交 Form 表单数据。今天，我们将通过一个实例来演示如何通过按钮将 Form 表单数据提交到 Action 层。...
html点击按钮后页面刷新的问题，form表单中button按钮触发submit点击事件
MaYuKang的博客
10-09 6946
html点击按钮 有如下form表单，包含了一个button按钮： 情况1： <form action=""> <button onclick="">我是按钮</button> </from> 尽管button按钮没有执行任函数，但是点击按钮后，页面刷新。 情况2： <form action="http://www.baidu.com"> <button onclick="">我是按钮</button> </fr
表单form中<button>提交表单
dre的博客
08-10 2万+
表单中有button一旦点击就会自动提交表单，要给加上type=“button”属性才可以 阻止表单提交 如果没有type=“button” 注册按钮也会提交表单 login_check()返回值为true时才会提交表单
layui踩坑记录之form表单下的button按钮默认自动提交
最新发布
acoolgiser的博客
07-21 2255
因此，当我们在使用form的时候，如果没有添加标准的提交按钮，会自动默认把其他的普通按钮认为是提交按钮，因为button的type默认值为“submit”。其实就是使用form的时候，应该对应有一个提交按钮，配套使用。其他功能按钮相加多少就加多少，但是必须要有一个提交按钮。2.在不需要提交的场景使用form时尽量使用a标签按钮来代替button，比如筛选功能中的查询按钮；1.在form中使用button时添加type属性：button、submit、reset；layui的官网说的也是比较清楚的，通过。
点击button自动提交表单
许诗宇的博客
12-29 6343
一个button在一个表单内，点击它直接会让表单提交 如一个&lt;button&gt;test&lt;/button&gt; 原因是button如果不设置它的type，它的type默认是submit，而button在表单会让它自动提交 所以要设置它的type="button"...
html——form表单提交方法及表单提交注意点
肖的博客
08-19 7万+
1、type=”submit” &amp;amp;amp;amp;amp;amp;lt;form name=”form” method=”post” action=”#&amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;input type=”submit” name=”submit” value=”提交&amp;amp;amp;amp;amp;quo
button的默认提交方式
cauchy6317的博客
07-18 3544
button的type 属性，IE的默认是 “button”，非IE默认是 “submit”。  如果想不提交需要指定type为”button”。 &lt;form&gt; &lt;button type="button"&gt;button&lt;/button&gt;&lt;!--不提交form--&gt; &lt;button type="submit"&gt;b
form中的button默认提交事件
阿锦的博客
08-22 2097
form中的button默认提交事件 <form action=""> <input autocomplete="off" type="text" name="" id="m"> <button>Send</button> </form> 在form中的button默认的时候点击会执行form的提交事件（相当于默认为type=submit类型） 如果需要阻止它,方法有： （1）将button的type修
button按钮无法提交表单问题发现与解决
weixin_33795806的博客
07-27 2752
前些天，我在用html制作登录框时遇到一个问题，form表单中的button不能提交表单中的数据。 相信你知道，input的type="submit"有提交表单的功能，当然，我们自己也可以给一个input的type="button"的按钮自定义点击事件以提交表单。 在这里我不用submit而用自定义的button的原因是，submit是无条件提交表单，而登录框需要对用...
Form中button的默认提交
猿起于此
02-25 311
1.  当使用button标签时，不需要加入任何事件。当点击时会自动提交form表单。onsumbit的验证也会起不到作用。 2.   解决此问题，可以将button标签换成div标签。此时要添加点击事件，手动提交表单。 &lt;form action="&lt;%=basePath%&gt;orderManage/saveRemark.do" method="post" id="...
form表单提交方式
热门推荐
菜鸟一缕清风的博客
01-05 9万+
form表单提交方式总结一下： 一、直接上代码&lt;script type=&quot;text/javascript&quot;&gt; function check(form) { if(form.userId.value=='') { alert(&quot;请输入用户帐号!&quot;); form.userId.focus();
在form表单中的button按钮
J78807的博客
10-19 527
button按钮在form表单中具有默认功能，提交（submit)和重置(reset)数据 解决方案 用preventDefault方法，取消浏览器对当前事件的默认行为。（最开始我其实以为是要用stopPropagation方法，组织事件冒泡—组织事件在DOM中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前结点上其他的事件监听函数—因为一开始我认为是button按钮产生了冒泡事件，让form表单提交和重置了，实验后才知道不是。） 点击重置按钮后，发现reset重置事件发
通过ajax提交form表单中的按钮
05-23
可以使用jQuery的ajax方法来提交form表单中的按钮。首先，需要在form标签中添加一个id属性，以便于在jQuery中选取该表单。然后，在按钮的click事件中，使用ajax方法向服务器发送表单数据。 以下是一个示例代码： HTML部分： ```html <form id="myForm" action="submit.php" method="post"> <input type="text" name="name"> <input type="email" name="email"> <button type="submit" name="submitBtn" id="submitBtn">提交</button> </form> ``` jQuery部分： ```javascript $(document).ready(function() { $('#submitBtn').click(function(event) { event.preventDefault(); // 阻止默认提交事件 var formData = $('#myForm').serialize(); // 获取表单数据 $.ajax({ url: $('#myForm').attr('action'), type: 'POST', data: formData, success: function(response) { // 处理服务器响应 }, error: function() { // 处理错误 } }); }); }); ``` 在上面的代码中，我们使用了preventDefault()方法来阻止按钮的默认提交事件。然后，使用serialize()方法获取表单数据，并使用ajax方法将数据发送到服务器。在success回调函数中，我们可以处理服务器响应，而在error回调函数中，我们可以处理错误情况。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值