当前位置:   article > 正文

点击button自动提交表单原因及解决方案_button 提交

button 提交

分析
情景描述
有时候我们可能需要在表单中放置多个按钮,比如表单页面常见的按钮有创建和取消。点击创建按钮会触发单击响应事件,在单击响应事件中进行提交表单,这没有任何问题。点击取消按钮的时候,触发对应的单击响应事件,这个单击响应事件中主要处理关闭表单页面逻辑,所以会关闭页面,这也正常。但是!打开控制台监听请求会发现,它也会提交表单。

图示

关于途中三个按钮的代码片段

  1. <!-- 新增分区按钮 -->
  2. <div class="layui-inline parti-table" style="left:100px">
  3. <button type="button" class="layui-btn layui-btn-normal" data-type="addNewLine">新增分区</button>
  4. </div>
  5. <!-- 确定和取消按钮 -->
  6. <div class="layui-btn-container">
  7. <button type="button" class="layui-btn" lay-submit lay-filter="createIndex" style="margin-bottom: 0px;">
  8. <i class="layui-icon">&#xe605;</i> 确定
  9. </button>
  10. <button class="layui-btn layui-btn-primary" id="cancel" style="margin-bottom: 0px;">
  11. <i class="layui-icon">&#x1006;</i> 取消
  12. </button>
  13. </div>

原因
出现上述的问题主要是button标签的type属性惹的祸,button的type属性值有三个分别为button、submit、reset。当我们在利用button标签写一个按钮且没有指定其type属性时,IE7以下版本(具体是IE7以下还是IE5以下给忘了)会默认指定为button,其他会被默认指定为submit。当按钮的type属性被指定为submit的时候,点击它会提交表单。

解决
当需在form标签中放置一个button的时候,如果这个按钮不是做提交表单的,切记一定要设置其type为button。
 

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/运维做开发/article/detail/771754
推荐阅读
相关标签
  

闽ICP备14008679号