思路:在彈出層頁面form表單中增加一個隱藏的提交按鈕,當彈出層點擊確定按鈕時,觸發彈出層頁面中的隱藏按鈕,觸發提交校驗
彈出層腳本如下:
function LoadDemo(id) { layer.open({ title: '彈出層標題', //彈出層標題 type: 2, content: 'demo.shtml', btn: ['確定', '關閉'], area: ["650px", "550px"], success: function (layero, index) { var body = $(layero).find("iframe")[0].contentWindow; $(body.id).val(id); }, yes: function (index, layero) { var body = $(layero).find("iframe")[0].contentWindow; var form = body.form; //獲取彈出層頁面的form對象 form.on('submit(submitForm)', function (data) { var showResponse = function (result, status) { if (result.success) { layer.msg(result.msg, { time: 1500 }, function () { layer.close(index); }); } else { layer.msg(result.msg, { time: 1500 }, null); } }; var options = { success: showResponse, url: urlPath, //請求接口路徑 type: "post", dataType: "json", }; $(body.myform).ajaxSubmit(options); return false; }) $(body.submit).click(); }, cancel: function () { } }); return false; }
頁面代碼如下:
<form class="layui-form pl20 pr20 pt20 pb20" id="demoForm"> <div class="layui-form-item "> <label class="layui-form-label"><span>*</span>內容:</label> <div class="layui-input-inline"> <input type="text" id="price" name="price" lay-verify="required|number" placeholder="請輸入內容" autocomplete="off" class="layui-input"> </div> </div> <button class="baseInfo-item-submit layui-btn mt15" lay-submit lay-filter="submitForm" style="display:none;" id="submit">保存</button> </form>
<script type="text/javascript">
var form = layui.form; //初始化form
//正常的業務邏輯
</script>