首页 > 其他分享 >layui弹出层按钮提交iframe表单

layui弹出层按钮提交iframe表单

时间:2023-07-13 17:33:24浏览次数:48  
标签:function layer 提交 form layui 表单 iframe find

1、当使用layer.open打开一个iframe的子页面:进行添加编辑时,保存提交是在layer.open()中进行处理的。

 

问题来了:当我们提交表单时,就要获取form表单对象

 

第一种:在layer.open中iframe页面的form提交:使用form.submit()    这种提交是没有返回结果的,单向的提交。

【这种会导致刷新列表不好控制,提交后台还未处理完直接刷新,造成数据问题】

     layer.open({
title: title, type: 2, offset: '150px', //弹窗居中 area: [width, height], content: addurl, btn: ['保存', '关闭'], success: function(layero, index){ //成功打开弹窗事件 alert(22); //var loading = layer.load(1, {shade: [0.1, '#fff']}); }, yes: function(index, layero){ //保存按钮事件 //拿到的是form表单所有元素对象 var form = layero.find("iframe").contents().find("body").find('#formobj')[0]; form.submit(); //提交表单,没有返回结果,不好处理
layer.close(index); layer.msg("操作成功", {icon: 1, time: 3000}); location.reload(); //刷新页面 }, end: function(){ //关闭按钮事件 //location.reload(); //刷新页面 } });

 

 

第二种:使用ajax提交form表单,得到返回结果再处理

主要是这段代码:拿到form表单所有字段的序列化值,提交到后台

top.layer.getChildFrame('body',index).find("#formobj").serialize();

        layer.open({
            title: title,
            type: 2,
            offset: '150px', //弹窗居中
            area: [width, height],
            content: addurl,
            btn: ['保存', '关闭'],
            success: function(layero, index){
                //成功打开弹窗事件 alert(22);
                //var loading = layer.load(1, {shade: [0.1, '#fff']});
                
            },
            yes: function(index, layero){
                //保存按钮事件
                
                //拿到的是form表单所有元素对象
                var form = layero.find("iframe").contents().find("body").find('#formobj')[0];

                //拿到form表单的所有字段参数并序列化:id=&orgId=1234&operType=test2224
                var formParam = top.layer.getChildFrame('body',index).find("#formobj").serialize();
                
                      //form.action可得到form表单的action属性,它的值路径

                //使用ajax提交form表单
                       //请求后台
            $.ajax({
               async : false,
               cache : false,
               type : 'POST',
                  dataType: "json",
               data : formParam,
               url : form.action,// 请求的action路径
               error : function() {// 请求失败处理函数
               },
               success : function(data) {
            
               }
             });  


 },  end: function(){ //关闭按钮事件 //location.reload(); //刷新页面 }



});

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

标签:function,layer,提交,form,layui,表单,iframe,find
From: https://www.cnblogs.com/spll/p/17551596.html

相关文章

  • element 新增修改公用一个弹窗,表单resetFields不生效
    编辑时表单赋值使用 this.$nextTick即可this.$nextTick(()=>{this.formData={id:row.id,taskCode:row.taskCode,fullName:row.fullName,priority:row.priority,taskType:row.taskType,robotId:row.robotId,starTtime......
  • layui layer.open弹框iframe最大化下面有空白处理
    思考为什么最大化会导致下面有空白这个时候我们去看这个时候就会发现其实他并没有任何去设置了他的一个高度我们的一个高度只不过是基于我们的弹框设置了多少高度那么他就是多少高度最终需要最大化处理一下他的那个方法 需要去获取到他的谈款的iframe这个引入然后去处理掉他。......
  • Vue + Element ui 实现动态表单,包括新增行/删除行/动态表单验证/提交功能
    总结/朱季谦最近通过Vue+Elementui实现了动态表单功能,该功能还包括了动态表单新增行、删除行、动态表单验证、动态表单提交功能,趁热打铁,将开发心得记录下来,方便以后再遇到类似功能时,直接拿来应用。简化的页面效果图如下:最开始,我是用了纯粹的表格形式,后来发现,这种形式在提交......
  • Element el-form 根据选择条件动态控制表单必填项
    Html:<el-form-itemlabel="审核意见"prop="remark":rules="recordForm.status=='10'?rules.remark:[{required:false}]"><el-inputtype="textarea"v-model="recordForm.remark">......
  • layui表格内可编辑下拉框
    表格内可编辑下拉框扩展自别人的表格内下拉框一、列模板<scripttype="text/html"id="selectTpl"><divclass="inputdiv"><inputclass="layui-input"name="method"z-filter="input"data-tableName=&q......
  • django中使用form表单或者ajax提交数据时如何验证csrftoken
    使用form表单来提交数据时,如何验证csrftokenajax提交数据时验证csrftoken在需要提交的html页面引入以下js文件就行引入csrf.js文件<scriptsrc="{%static'js/csrf.js'%}"></script>文件内容:/***根据cookie的name获取对应的值*@paramname*@returns{null}......
  • js如何动态清除form表单中input款下的错误信息
    form表单<formaction=""method="post"novalidateid="myform">{%csrf_token%}{%forforminform_obj%}<divclass="form-group"><labelfor="{{form.i......
  • 通过aop 注解的方式防止表单重复提交
    pom.xml<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><a......
  • iframe嵌套其它网站页面 全屏设置
    背景:今天在使用iframe时,发现嵌套页面中有个【全屏】功能,不好使,查了一下,发现iframe还有1个属性allowfullscreen设置,可以设置是否支持全屏,默认是false,现在把iframe的基础属性整理一下。iframe基本属性通常我们使用iframe主要设置 src,宽、高,是否滚动,其实有一些不常用的属性<if......
  • Element-常用组件-表格-表单-对话框-分页工具条
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><!--格式--><style>.el-table.warning-row{background:oldlace;......