目的:
在一个表单中有一个btn,
当点击这个btn时,弹窗提示,
当点击弹窗中的‘确定’btn时,才进行表单提交
实现:
当点击表单中的btn时,调layer方法弹窗,注意,这里的btn用<input>做,不要用<button>,因为用<button>时会自动提交表单,当用<input>时,你可以设置参数‘type’人为控制。
以下为实现代码(部分代码,不可以直接运行):
<div class="layui-container" style="margin-top: 100px;">
<form class="layui-form" id="form_test" action="{% url 'test' %}" method="post">
<div class="layui-form-item">
<div class="layui-input-block">
<!--不要用<button>-->
<!--<button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>-->
<input class="layui-btn" id="input_test" data-method="input_submit" type="button" value="弹窗提交表单">
</div>
</div>
</form>
</div>
<script src="../static/layui/layui.all.js"></script>
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form
,$ = layui.jquery;
var active = {
input_submit: function(){
layer.open({
type: 1
,offset: auto
,content: '确定提交吗?'
,btn: ['确定', '取消']
,yes: function(){
$('#form_test').submit();
layer.closeAll();
}
});
};
};
$('#input_test').on('click', function(){
var othis = $(this), method = othis.data('method');
active[method] ? active[method].call(this, othis) : '';
});
});
</script>