layui教程(一) form 表單的提交問題

點擊打開表單頁面(彈出層形式)如:   

 

父頁面打開子頁面的代碼

layer.open({
	  		type:2,          //類型爲1時可以爲html,和代碼,爲2時頁面地址
	  		title: title,    //彈出層的標題
	  		area: [width, heigth],  //大小
	  		fixed: false, //不固定     
	          maxmin: true, 
	          content: url,        //彈出層的地址
	          btn: ['確定', '取消'],   //按鈕名稱
	          yes: function(index,layero){
	          	var submit = layero.find('iframe').contents().find(submitButId);   //子頁面提交表單的按鈕
	          	submit.click();  //按鈕提交表單
	          	return false;
	          },
	          btn2: function(){
	            layer.closeAll();
	          },
	          zIndex: layer.zIndex, //重點1
	          success: function(layero,index){
//	             layer.setTop(layero); //重點2
	        	 layer.iframeAuto(index);
	          }
	});

子頁面提交表單的按鈕代碼

<button style="display:none" lay-submit lay-filter="submitBut" id="submitBut"></button>
//按鈕樣式爲隱藏,當點擊彈出層的確定按鈕時,相當於提交表單

 

子頁面提交表單代碼

form.on('submit(submitBut)', function(data){
	 var loading = layer.msg('正在保存', {icon: 16, shade: 0.3, time:0});
	   $.ajax({
		         method:"POST",
			   	 url:saveUrl,       //提交表單的地址
			   	 data:data,      //提交表單的數據
			   	 success:function(res){
			   		 if(res.stateType == 0){
			   			 var index = parent.layer.getFrameIndex(window.name);
		   			      parent.layer.close(index);  
		   			  	  parent.layer.msg(res.stateMsg, { icon: 1});
		   			      parent.layui.table.reload(tableName);
					}else{
						  layer.msg(res.stateMsg,{icon: 2});
				    }
			   	 },
			   	 error:function(){
			   		 console.log("caozuosibai")
			   		 layer.close(loading);
			   		 layer.msg('操作失敗',{icon: 2});
			   	 }
			});
	  	     return false;  //防止表單提交兩次
        }); 

注意:form.on()表單監控事件中一定要加 return false;如果不加的話,後端不會報錯,而前端代碼中會運行到error中,不同瀏覽器也有不同效果,谷歌瀏覽器有時會報錯,火狐和其他瀏覽器100%報錯