layui点击弹框页面 表单请求的方法

 更新时间:2019年09月21日 11:23:05   作者:```...简单点  
今天小编就为大家分享一篇layui点击弹框页面 表单请求的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

如下所示:

$("#addSite").click(function () {
  layer.open({
    title: '添加站点',
    type: 1,
    area: ['700px', '400px'],
    content: '<blockquote class="layui-elem-quote layui-text">注意事项: 请填写相关的数据信息! </blockquote>' +
    '<form class="layui-form"> ' +
    '<div class="layui-form-item">' +
    '<div class="layui-inline">' +
    '<label class="layui-form-label">站点名称</label>' +
    '<div class="layui-input-inline">' +
    '<input type="text" required lay-verify="required" name="siteName" class="layui-input" value="" >' +
    '</div></div>' +
    '<div class="layui-inline">' +
    '<label class="layui-form-label">ICP备案号</label>' +
    '<div class="layui-input-inline">' +
    '<input type="text" required lay-verify="required" name="fileRecord"  class="layui-input" value="" >' +
    '</div></div>' +
    '</div>' +
    '<div class="layui-form-item">' +
    '<div class="layui-inline">' +
    '<label class="layui-form-label">联系电话</label>' +
    '<div class="layui-input-inline">' +
    '<input type="text" required lay-verify="required" name="sitePhone" class="layui-input" value="" >' +
    '</div></div>' +
    '<div class="layui-inline">' +
    '<label class="layui-form-label">平台信息</label>' +
    '<div class="layui-input-inline">' +
    '<input type="text" required lay-verify="required" name="type"  class="layui-input" value="" >' +
    '</div></div>' +
    '</div>' +
    '<div class="layui-form-item" style="width: 621px;">' +
    '<label class="layui-form-label">备注</label>' +
    '<div class="layui-input-block">' +
    '<textarea placeholder="请输入内容" name="siteMark" class="layui-textarea"></textarea>' +
    '</div>' +
    '</div>' +
    '</form>',
    btnAlign: 'c',
    btn: ['确定', '取消'],
    yes: function (index, layero) {
      var str = $("input[name=isIndividual]").val();
      if (str == "on") {
        str = "1";
      } else {
        str = "0";
      }

      if ($("input[name=siteName]").val() == null || $("input[name=siteName]").val() == "") {
        layer.msg('请输入站点名称', {icon: 5, time: 2000, area: '200px', type: 0, anim: 6,}, function () {
          $("input[name=siteName]").focus();
        });
        return false;
      } else if ($("input[name=fileRecord]").val() == null || $("input[name=fileRecord]").val() == "") {
        layer.msg('请输入备案号', {icon: 5, time: 2000, area: '200px', type: 0, anim: 6,}, function () {
          $("input[name=fileRecord]").focus();
        });
        return false;
      } else if ($("input[name=type]").val() == null || $("input[name=type]").val() == "") {
        layer.msg('请输入平台信息', {icon: 5, time: 2000, area: '200px', type: 0, anim: 6,}, function () {
          $("input[name=type]").focus();
        });
        return false;
      } else if ($("input[name=sitePhone]").val() == null || $("input[name=sitePhone]").val() == "") {
        layer.msg('请输入联系电话', {icon: 5, time: 2000, area: '200px', type: 0, anim: 6,}, function () {
          $("input[name=sitePhone]").focus();
        });
        return false;
      }
      var formData = {
        siteName: $("input[name=siteName]").val(),
        fileRecord: $("input[name=fileRecord]").val(),
        type: $("input[name=type]").val(),
        sitePhone: $("input[name=sitePhone]").val(),
        siteMark: $("textarea[name=siteMark]").val()
      };
      console.log(formData);
      $.post('${pageContext.request.contextPath}/leaguer/addSite', formData, function (data) {
        //判断是否发送成功
        if (data.code == 200) {
          layer.msg(data.message);
          layer.close(index);
          parent.document.getElementById('my_iframe').contentWindow.location.reload(true);
        } else {
          layer.msg("保存失败...", {type: 1});
        }
      })
    }, btn2: function (index, layero) {
      layer.msg("取消");
      //return false 开启该代码可禁止点击该按钮关闭
    }, cancel: function () {
      layer.msg("关闭窗口");
      //右上角关闭回调
      //return false 开启该代码可禁止点击该按钮关闭
    },
    success: function () {
      layui.use('form', function () {
        var form = layui.form; //只有执行了这一步,部分表单元素才会修饰成功
     form.render('checkbox');
        form.on('checkbox(istrue)', function (data) {
          /* if(data.elem.checked){
           emailConfig['isenterprise']=1;
           }; //是否被选中,true或者false*/
        });
      });
    }
  });
})

另类: tab刷新iframe页面

var iframes= parent.document.getElementsByTagName('iframe');
for(var i=0;i<iframes.length;i++){
  var src=iframes[i].contentWindow.location.href;
  console.log( src);
  if(src.indexOf("table.jsp")!=-1){
    console.log( "刷新:"+src);
    parent.document.getElementsByTagName('iframe')[i].contentWindow.location.reload(true);
  }
}

以上这篇layui点击弹框页面 表单请求的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • js检查是否关闭浏览器的方法

    js检查是否关闭浏览器的方法

    这篇文章主要介绍了js检查是否关闭浏览器的方法,涉及javascript针对窗口事件的判定与操作相关技巧,需要的朋友可以参考下
    2016-08-08
  • Javascript与flash交互通信基础教程

    Javascript与flash交互通信基础教程

    说明: 略作修改,主要是一些很初级的操作; 又很多相似的文章,不过这个很权威
    2008-08-08
  • 前端实现各种类型文件保存的方案总结

    前端实现各种类型文件保存的方案总结

    在Web开发中,文件下载是常见的交互需求,本文将系统总结前端实现文件保存的三大核心场景(图片、文本、网页)及对应技术方案,帮助开发者根据具体需求选择最优解,需要的朋友可以参考下
    2025-04-04
  • uploadify在Firefox下丢失session问题的解决方法

    uploadify在Firefox下丢失session问题的解决方法

    在用uploadify上传插件时遇到了一个问题,在读session时认为没有权限而被拦截了,后来在后台打印登录时产生session的id和上传时读取session的id,解决方法如下,感兴趣的朋友可以了解下
    2013-08-08
  • bootstrap switch开关组件使用方法详解

    bootstrap switch开关组件使用方法详解

    这篇文章主要为大家详细介绍了bootstrap switch开关组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 用js实现的检测浏览器和系统的函数

    用js实现的检测浏览器和系统的函数

    检测各种浏览器、系统的JS代码
    2009-04-04
  • JS获取本机IP地址的2种方法

    JS获取本机IP地址的2种方法

    我们在项目经常遇到获取本机IP地址的需求,下面这篇文章主要给大家介绍了关于JS获取本机IP地址的2种方法,文中通过示例代码介绍的非常详细,本文适合新手,需要的朋友可以参考下
    2022-09-09
  • javascript实现电脑和手机版样式切换

    javascript实现电脑和手机版样式切换

    这篇文章主要为大家详细介绍了javascript实现电脑和手机版样式切换,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • bootstrap table服务端实现分页效果

    bootstrap table服务端实现分页效果

    这篇文章主要为大家详细介绍了bootstrap table服务端实现分页效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • js删除数组中指定元素的几种方式

    js删除数组中指定元素的几种方式

    js数组是js部分非常重要的知识,有时我们有这么个需求js数组删除指定元素,下面这篇文章主要给大家介绍了关于js删除数组中指定元素的几种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01

最新评论