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


Posted in Javascript onSeptember 21, 2019

如下所示:

$("#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点击弹框页面 表单请求的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
浅析Vue中method与computed的区别
Mar 06 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
基于Three.js实现360度全景图片
Dec 30 Javascript
Jquery的Ajax技术使用方法
Jan 21 jQuery
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 Javascript
基于JS判断对象是否是数组
Jan 10 Javascript
vue绑定数字类型 value为数字的实例
Aug 31 Javascript
使用vue制作滑动标签
Sep 21 #Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 #Javascript
Vue插件之滑动验证码
Sep 21 #Javascript
Layui tree 下拉菜单树的实例代码
Sep 21 #Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 #Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 #Javascript
layui table 表格模板按钮的实例代码
Sep 21 #Javascript
You might like
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
PHP中最容易忘记的一些知识点总结
2013/04/28 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
javascript面向对象之Javascript 继承
2010/05/04 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
关于全局变量和局部变量的那些事
2013/01/11 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
2017/07/24 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
vue使用nprogress实现进度条
2019/12/09 Javascript
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
python 对象真假值的实例(哪些视为False)
2020/12/11 Python
Vince官网:全球著名设计师品牌,休闲而优雅的服饰
2017/01/15 全球购物
大专毕业生简历的自我评价
2013/10/20 职场文书
大学生标准推荐信范文
2013/11/25 职场文书
拖鞋店创业计划书
2014/01/15 职场文书
节水倡议书范文
2014/04/15 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
高三语文复习计划
2015/01/19 职场文书
2015年营业员工作总结
2015/04/23 职场文书
民事答辩状格式范文
2015/05/21 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
钱学森观后感
2015/06/04 职场文书
预备党员表决心的话
2015/09/22 职场文书
微信早安问候语
2015/11/10 职场文书