layui表单自动提交问题
最近使用layui的表单提交时,遇到了这个问题:在form内的按钮总是会自动提交。
而按钮放在form外面就不会出现这种问题,很让人头痛。
下面让我们来看看如何解决form内按钮自动提交问题的吧。
<form class="layui-form">
<label class="layui-form-label">银行卡号</label>
<input type="text" name="bankCard" lay-verify="required" class="layui-input">
<label class="layui-form-label">银行卡开户行</label>
<input type="text" name="bankInfo" lay-verify="required" class="layui-input">
<button class="layui-btn layui-btn-sm" lay-submit lay-filter="formDemo">评审完成</button>
<button class="layui-btn layui-btn-sm" "window.scrollTo(0,0);">返回顶部 </button>
</from>
<script type="text/javascript">
form.on('submit(formDemo)',function(data){
});
</script>
上面是出现自动提交的代码,点击返回顶部和评审完成都会自动提交表单。
解决的方案:
1、放在表单中的button将其type设置为button,则不会自动提交。
Button按钮的type有三个可选属性:Button,submit,reset,而Button按钮的type属性默认值是submit ,所以在没有指定type属性的情况下,点击Button按钮会触发提交form表单
<button type="button" class="layui-btn layui-btn-sm" "window.scrollTo(0,0);">返回顶部</button>
2、使用a标签做成的按钮来替代button。
<a class="layui-btn layui-btn-sm" "window.scrollTo(0,0);">返回顶部</a>
3、在表单中按钮的js回调函数里添加 return false制止。
form.on('submit(formDemo)',function(data){
......
return false;
});
但是按钮中若没有添加lay-submit属性,layui的form.on的表单提交监听不到这个按钮,那么return false对提交的制止也就失效了。
对应的按钮需要加上lay-filter=“formDemo” , 里面的formDemo标识用于绑定方法。