精华内容
下载资源
问答
  • 今天小编就为大家分享一篇layer关闭弹出窗口触发表单提交问题的处理方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • <form class="layui-form" action="" lay-filter="example" lay-filter="addRelease" id="add" style="width: 490px;...//提交完成后,清空表单 $("#add")[0].reset(); layui.form.render();...
    <form class="layui-form" action="" lay-filter="example" lay-filter="addRelease" id="add" style="width: 490px;"></form>
    ```javascript
    //提交完成后,清空表单
    $("#add")[0].reset();
    layui.form.render();
    ``
    
    ```javascript
    //子页面关闭父页面弹窗
    var index = parent.layer.getFrameIndex(window.name);
    parent.layer.close(index);//关闭当前页
    
    展开全文
  • ![图片说明](https://img-ask.csdn.net/upload/201609/22/1474542427_914615.png)
  • 点击layer弹窗btn按钮,提交弹窗iframe框架内子页面的表单数据,这样子页面可以去掉提交按钮,达到美化目的。
  • 主要为大家详细介绍了layer实现弹窗提交信息的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 今天小编就为大家分享一篇layer弹出层自定义提交取消按钮的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • //提交图片出错后,重新提交绑定在这里 layui图片上传方法 http://www.layui.com/doc/modules/upload.html 方法参考全部参数介绍 layui.use('upload', function(){ var $ = layui

    前端页面

        <button type="button" name="url" class="layui-btn" id="test1">上传图片</button>
        <img class="layui-upload-img" id="photo" width="50" height="50">//点击上传图片选择图片后在这里展示
        <p id="demoText"></p>//提交图片出错后,重新提交绑定在这里
    

    layui图片上传方法
    http://www.layui.com/doc/modules/upload.html 方法参考全部参数介绍

    layui.use('upload', function(){
              var $ = layui.jquery
              ,upload = layui.upload;
              //普通图片上传
              var uploadInst = upload.render({
                 elem: '#test1'     /*根据绑定id,打开本地图片*/
                ,url: '${ctx}/origin/user/saveOrUpdate'  /*上传后台接受接口*/
                ,auto: false        /*true为选中图片直接提交,false为不提交根据bindAction属性上的id提交*/
                ,bindAction: '#formSubmit'   /*提交图片*/
                ,choose:function(obj){
                    //预读本地文件示例,不支持ie8
                    obj.preview(function(index, file, result){
                      $('#photo').attr('src', result); //图片链接(base64)
                    });
                  }
                ,done: function(res){
                  //如果上传失败
                  if(res.code > 0){
                    return layer.msg('上传失败');
                  }
                  //上传成功
                }
                ,error: function(){
                  //演示失败状态,并实现重传
                  var demoText = $('#demoText');
                  demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                  demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                  });
                }
              });
        }); 
    

    form表单中的数据提交(因为图片提交在form表单中存在所以from表单的ajax提交(data : $(‘#businessForm’).serialize(),序列化 )方法会失败),需要通过formData 方法进行数据组装,另一种方法为formData.append(“username”, “Groucho”);

    /*数据新增方法*/
        function save() {
            var fd = new FormData();
            var formData = new FormData($( "#signupForm" )[0]);
            $.ajax({
                cache : true,
                type : "post",
                url : "${ctx}/origin/user/saveOrUpdate",
                /* data : $('#signupForm').serialize(), */ // 你的formid
                data : formData,  // 你的formid
                async : false,
                contentType: false,   //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作,从而失去分界符,而使服务器不能正常解析文件
                processData: false,   //当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data
                error : function(request) {
                    parent.layer.alert("网络超时");
                },
                success : function(data) {
                    if (data.code == 0) {
                        parent.layer.msg("操作成功");
                        parent.reLoad();
                        //注意这两句
                        var index = parent.layer.getFrameIndex(window.name);///先得到当前iframe层的索引
                        parent.layer.close(index);再执行关闭,保存、修改页面完成时要获取当前页面并关闭回到上级页面(list页面)起到刷新返回功能
                    } else {
                        parent.layer.alert(data.msg)
                    }
                }
            });
        }
    

    后台接受(前段图片上传、form表单数据提交会访问两次此接口,有一次访问中form表单数据为空/user中的数据为空 。注意判断)

    //@RequestParam(required=false)MultipartFile file 表示图片接受可为空
    @ResponseBody
    @RequestMapping (value="/saveOrUpdate")
    public Msg saveOrUpdate (@RequestParam(required=false)MultipartFile file, User user,HttpServletRequest request){
            try {
            //获取项目绝对路径,从例如:(D:\eclipse\workspaceproduct3\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\origin-web\static\abc)
                String path = request.getSession().getServletContext().getRealPath("static/abc");
                String pathPhoto = "/static/abc";
                if(!file.isEmpty()){
                String name = file.getOriginalFilename();//获取接受到的图片名称
                File fi = new File(path,name);       //将path路径与图片名称联系在一起
                    if(!fi.getParentFile().exists()){    //判断是否存在path路径下的文件夹
                    fi.getParentFile().mkdirs();       //不存在创建path路径下的文件夹
                }
                file.transferTo(fi);                        //上传图片
                user.setPhoto(pathPhoto+"/"+name);   //为保存图片路径
            }
             if(!StringUtil.isEmpty(user.getLoginname()) && !StringUtil.isEmpty(user.getPassword())){
                userService.saveOrUpdate(user);
             }
        } catch (Exception e) {
            e.printStackTrace();
            return Msg.error();
        }
        return Msg.ok();
    }
    
        request.getSession().getServletContext() 获取的是Servlet容器对象,相当于tomcat容器了.
        getRealPath("/") 获取实际路径,“/”指代项目根目录,所以代码返回的是项目在容器中的实际发布运行的根路径。
        如:D:\apachetomcat6.0.32\webapps\cloudOABaseV4\hwtt_upload
    >
    
    展开全文
  • 今天小编就为大家分享一篇使用layer弹窗提交表单时判断表单是否输入为空的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • js$("#info_withdraw").on('click', function () {//iframe层layer.open({type: 2,title: '申请提现',shadeClose: true,shade: 0.6,area: ['780px', '600px'],content: '__URL__/withdraw'});});...

    js

    $("#info_withdraw").on('click', function () {

    //iframe层

    layer.open({

    type: 2,

    title: '申请提现',

    shadeClose: true,

    shade: 0.6,

    area: ['780px', '600px'],

    content: '__URL__/withdraw'

    });

    });

    html

    body {

    background-color: #FFF;

    height: auto;

    }

    当前余额:

    ¥{$money}

    提现金额:

    (提现金额不能超过当前余额)

    提交

    $(function () {

    // 定义全局锁

    let lock_flag = false;

    let page = $('#page').val();

    $("#edit_form").ajaxForm({

    dataType: "json",

    success : function(obj){

    if(obj.errno == 0){

    layer.msg(obj.errdesc);

    setTimeout(function() {

    window.parent.location.reload();

    },2000);

    }else{

    // 解锁

    lock_flag = false;

    layer.msg(obj.errdesc);

    }

    return false;

    }

    });

    $("#edit_btn").on("click", function(){

    // 上锁

    if (!lock_flag) {

    lock_flag = true;

    $("#edit_form").submit();

    }

    return false;

    });

    })

    子页面,用xs来布局,自适应。

    展开全文
  • 主要 用到layer 自带的取子页面dom的方法 layer.getChildFrame(),在父页面对子页面dom进行操作 js代码:在layer.open 中 btn yes function(index, layero){ }中 获取子页面的dom 进行操作: $("a[name='editNews']...
  • layer__实现弹窗提交信息

    千次阅读 2018-03-18 21:38:08
    layer是非常好用的弹窗插件,具体参见官方文档 点击这里进入。官方有很多示例,使用方法也非常简单,引入官方下载的css和js就可以了。但是有时候,弹窗提醒并不能满足我们的所有要求。例如,在奖品界面,希望点击...

    layer是非常好用的弹窗插件,具体参见官方文档
    点击这里进入。官方有很多示例,使用方法也非常简单,引入官方下载的css和js就可以了。但是有时候,弹窗提醒并不能满足我们的所有要求。例如,在奖品界面,希望点击“编辑奖品”的时候,能弹出对话框让我们来填写信息,如下图所示:

    这里写图片描述

    如何用简洁美观的 layer 实现这一功能呢?官方并没有给我们提供示例,那就自己动手写吧。下面把代码贴出来。

    给“添加奖品”按钮加上单击触发confirmUpdateAward方法

    var awards = "";
    function confirmUpdateAward(i) {
        layer.open({
            type: 1,
            closeBtn: false,
            shift: 7,
            shadeClose: true,
            content: "<div style='width:350px;'><div style='width:320px;margin-left: 3%;' class='form-group has-feedback'><p>请输入奖项名称</p><input id='awardName' class='form-control' type='text' name='awardName' value='"+awards[i].awName+"'/></div>" +
            "<div style='width:320px;margin-left: 3%;' class='form-group has-feedback'><p>请输入奖项描述</p><input id='awardDescription' class='form-control' type='text' name='awardDescription' value='"+awards[i].awDescription+"'/></div>"+
            "<div style='width:320px;margin-left: 3%;' class='form-group has-feedback'><p>请输入获奖人数</p><input id='awardUserCount' class='form-control' type='number' name='awardUserCount' value='"+awards[i].awUserCount+"'/></div>"+
            "<div style='width:320px;margin-left: 3%;' class='form-group has-feedback'><p>请输入奖项类别</p><input id='awardKind' class='form-control' type='text' name='awardKind' value='"+awards[i].awKind+"'/>" +
            "<button style='margin-top:5%;' type='button' class='btn btn-block btn-success btn-lg' onclick='updateAward("+awards[i].id+")'>提交</button></div>"
        });
    }
    
    function updateAward(awardId){
    
        var awardUserCount = $("#awardUserCount").val();
        if(awardUserCount*1>8888 || awardUserCount*1<1){
            layer.msg('人数必须是1到8888', {
                time: 500, //0.5s后自动关闭
                // btn: ['明白了', '知道了']
            });
        }else{
            var awardName = $("#awardName").val();
            var awardDescription = $("#awardDescription").val();
            var awardKind = $("#awardKind").val();
            $.ajax({
                type: "post",
                url : getContextPath() + "/award/updateAward",
                dataType:'json',
                data: {
                    "awardId":awardId,
                    "awardName":awardName,
                    "awardDescription":awardDescription,
                    "awardUserCount":awardUserCount,
                    "awardKind":awardKind
                },
                success: function(data){
                    var updateSuccess = data.data;
                    if(updateSuccess){
                        layer.msg('修改成功', {
                            time: 500, //0.5s后自动关闭
                            // btn: ['明白了', '知道了']
                        });
                        refreshPage();
                    }else{
                        layer.msg('修改失败', {
                            time: 500, //20s后自动关闭
                            // btn: ['明白了', '知道了']
                        });
                    }
                }
            });
            layer.closeAll();
        }
    }
       
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57

    这里有几个需要注意的点:

    第一:最后一定要用

    layer.closeAll();
       
    • 1

    否则提交之后弹窗不会自己关闭。

    第二

    <input type="number" />
       
    • 1

    只能保证用户不能输入字母(实际上字母e是可以输入的,会认为是科学技术法),但是通过Json传到后端的依旧是String类型,在做将该信息用

    Integer.valueOf();
       
    • 1

    强转为Integer时候,一定要判断String是否为空,否则会抛异常。

    第三
    这里实际上是用到了一个js方法之间调用巧传对象的方法。

    当我们从数据库取出若干条奖品记录时,每一条记录都应该有一个“修改”按钮。当我们做修改的时候,用户都希望输入框中显示之前的信息,但是js的方法之间调用的时候,传对象很麻烦,有什么简便的方法呢?

    如上面的源码所示,我们只传序号 i 过去。下面这段代码是奖品展示页面的代码,我们可以看到每条记录都有“编辑”按钮。

    $(document).ready(function () {
        refreshPage();
    });
    
    //定义全局变量
    var awards = "";
    
    function refreshPage(){
        $.ajax({
            type: "post",
            url : getContextPath() + "/award/getAllAwards",
            dataType:'json',
            data: {
            },
            success: function(data){
                awards = data.data;
                var awardHtml = "";
                var iLen = awards.length;
                //遍历取出每一条奖品
                for(var i = iLen - 1 ; i >=0  ; i--){
                    awardHtml+="<tr><td><span id='span"+i+"' style='cursor:pointer;' onclick='selectAward("+i+","+iLen+")' class='label label-default'>"+"选中"+"</span></td><td>"+awards[i].awName+"</td><td>"+awards[i].awDescription+"</td><td>"+
                        awards[i].awUserCount+"</td><td>"+awards[i].awKind+"</td><td><span style='cursor:pointer;' class='label label-info' onclick='confirmUpdateAward("+i+")'>"+"编辑"+"</span></td><td>" +
                        "<span class='label label-danger' style='cursor:pointer;' onclick='comfirmDeleteAward("+awards[i].id+")'>"+"删除"+"</span></td></tr>";
                }
                $("#awardTable").html(awardHtml);
            }
        });
    }
       
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    注意看

    onclick='confirmUpdateAward("+i+")'>"+"编辑"+"</span>
       
    • 1

    这句,我们只传了i到我们最开始写的confirmUpdateAward方法里面,却因为在js中定义了全局变量 awards ,就可以巧妙地在confirmUpdateAward方法中使用awards[i]了。

    layer做信息提交遇到的坑都写在这里了,应该再没什么别的问题了,有需要的话可以留言评论。

    说明
    如有转载,请务必在文章开头注明出处
    http://blog.csdn.net/antony9118/article/details/53575597

                        <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/production/markdown_views-68a8aad09e.css">
                            </div>
    
    展开全文
  • layer层遇到form表单提交

    千次阅读 2017-07-06 14:36:15
    layer弹出层页面里面有form表单提交的,layer层提示会出现闪退的现象。 原因如下:  当表单提交提交的时候,一般会进行页面的跳转(不成功时跳转到当前页面)。  而我们此处的页面就相当于刷新了一下,所以layer...
  • layer表单验证与提交

    千次阅读 2017-01-11 18:17:17
    一.layer表单提交及验证方法(添加员工页面)<form class="layui-form layui-form-pane1 pzjzsj" action=""><div class="layui-form-item"> <label class="layui-form-label">手机号</label>...
  • layer 实现弹窗提交信息

    万次阅读 2016-12-11 21:17:17
    layer是非常好用的弹窗插件,具体参见官方文档 点击这里进入。官方有很多示例,使用方法也非常简单,引入官方下载的css和js就可以了。但是有时候,弹窗提醒并不能满足我们的所有要求。例如,在奖品界面,希望点击...
  • 表单提交后关闭页面(layer弹窗)

    千次阅读 2020-05-12 20:22:42
    在一次做项目中用到了layui的弹出层实现表单的提交和验证 一开始我一直用layui.close(index)发现无论怎么用就是关闭不了弹出层, 当时内心就快要崩溃的时候,看到了这个博主 的帖子,瞬间我感觉我有充满了力量。下边...
  • 前端:jsp页面有一个’编辑信息‘的表单,点击’提交‘,使用ajax发送请求,后台处理请求后返回给ajax的success,并弹出处理的信息并关闭窗口 二. 解决方法 关键在倒数第6行代码,如下: form.on('submit(formDemo1)...
  • 使用layer弹窗提交表单时判断表单是否输入为空 获得 layer 文件包后,解压并将 layer 整个文件夹(不要拆分结构) 存放到你项目的任意目录,使用时,只需引入 layer.js 即可 使用时一定他要先引入jq1.8,或者以上...
  • 点击按钮 在弹出层中显示另一个jsp页面 怎么在弹出层的按钮点击时提交那个jsp页面中的表单
  • 最近项目中需要实现一个保存公司信息的功能,提交保存是一个ajax请求 form.on('submit(add)', function(data){ data.field.companyType=$("#sltCompanyType").val(); data.field.hrCompanyTradeId=$("#...
  • 主要 用到layer 自带的取子页面dom的方法 layer.getChildFrame(),在父页面对子页面dom进行操作 js代码:在layer.open 中 btn yes function(index, layero){ }中 获取子页面的dom 进行操作: $("a[name='...
  • 使用场景是这样的:在用户列表页面,新增一个用户,点击新增的时候弹出一个layer弹出层,在该层完成信息后提交,保存成功后关闭弹出层,然后刷新用户列表。 解决方法有两种吧。 1.弹出层在提交保存后不关闭,由用户...
  • 第一次接触Layer弹出层,遇到的问题记录一下需要实现的功能是: 1.在购物车页面点击购买需要判断用户是否已经登陆,如果没有登录出现弹出层 2.在弹出层用户登录表单提交之后,如果判断用户还没有进行邮箱认证则...
  • 今天小编就为大家分享一篇php 提交表单 关闭layer弹窗iframe的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • <script type="text/javascript" src="https://sumtou.oss-cn-shanghai.aliyuncs.com/static/layer/layer.js"></script> <!--改了俩字母,这个就不给大家了--> ...
  • 表单提交验证 问题描述: 问题1:表单提交laye @Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget(); } 原因分析: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 42,812
精华内容 17,124
关键字:

layer提交