layui教程(一) form 表单的提交问题

点击打开表单页面(弹出层形式)如:

layui教程(一) form 表单的提交问题 - 图1

父页面打开子页面的代码

  1. layer.open({
  2.               type:2,          //类型为1时可以为html,和代码,为2时页面地址
  3.               title: title,    //弹出层的标题
  4.               area: [width, heigth],  //大小
  5.               fixed: false, //不固定     
  6.               maxmin: true, 
  7.               content: url,        //弹出层的地址
  8.               btn: ['确定', '取消'],   //按钮名称
  9.               yes: function(index,layero){
  10.                   var submit = layero.find('iframe').contents().find(submitButId);   //子页面提交表单的按钮
  11.                   submit.click();  //按钮提交表单
  12.                   return false;
  13.               },
  14.               btn2: function(){
  15.                 layer.closeAll();
  16.               },
  17.               zIndex: layer.zIndex, //重点1
  18.               success: function(layero,index){
  19. //                 layer.setTop(layero); //重点2
  20.                  layer.iframeAuto(index);
  21.               }
  22.     });

子页面提交表单的按钮代码

  1. <button style="display:none" lay-submit lay-filter="submitBut" id="submitBut"></button>
  2. //按钮样式为隐藏,当点击弹出层的确定按钮时,相当于提交表单

子页面提交表单代码

  1. form.on('submit(submitBut)', function(data){
  2.      var loading = layer.msg('正在保存', {icon: 16, shade: 0.3, time:0});
  3.        $.ajax({
  4.                  method:"POST",
  5.                     url:saveUrl,       //提交表单的地址
  6.                     data:data,      //提交表单的数据
  7.                     success:function(res){
  8.                         if(res.stateType == 0){
  9.                             var index = parent.layer.getFrameIndex(window.name);
  10.                              parent.layer.close(index);  
  11.                                parent.layer.msg(res.stateMsg, { icon: 1});
  12.                              parent.layui.table.reload(tableName);
  13.                     }else{
  14.                           layer.msg(res.stateMsg,{icon: 2});
  15.                     }
  16.                     },
  17.                     error:function(){
  18.                         console.log("caozuosibai")
  19.                         layer.close(loading);
  20.                         layer.msg('操作失败',{icon: 2});
  21.                     }
  22.             });
  23.                return false;  //防止表单提交两次
  24.         });

注意:form.on()表单监控事件中一定要加 return false;如果不加的话,后端不会报错,而前端代码中会运行到error中,不同浏览器也有不同效果,谷歌浏览器有时会报错,火狐和其他浏览器100%报错