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 相关文章推荐
清华大学出版的事半功倍系列 javascript全部源代码
May 04 Javascript
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
May 14 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
Node.js与PHP、Python的字符处理性能对比
Jul 06 Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
详解vue项目构建与实战
Jun 27 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
vue this.reload 方法 配置
Sep 12 Javascript
clipboard在vue中的使用的方法示例
Oct 19 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
How do I change MySQL timezone?
2008/03/26 PHP
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
详谈PHP文件目录基础操作
2014/11/11 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
Zend Framework开发入门经典教程
2016/03/23 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
jquery tools 系列 scrollable学习
2009/09/06 Javascript
js控制div及网页相关属性的代码
2009/12/19 Javascript
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
2016/12/22 Javascript
Node.js数据库操作之查询MySQL数据库(二)
2017/03/04 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
Python中的Numpy入门教程
2014/04/26 Python
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
python字符串替换的2种方法
2014/11/30 Python
Python 3.7新功能之dataclass装饰器详解
2018/04/21 Python
python的继承知识点总结
2018/12/10 Python
如何在django中添加日志功能
2020/02/06 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
俄语专业毕业生求职信
2014/07/12 职场文书
小学见习报告
2014/10/31 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书
2016年党支部公开承诺书
2016/03/25 职场文书
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技