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 扩展对input的一些操作方法
Oct 30 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
Mar 16 Javascript
jQuery实现邮箱下拉列表自动补全功能
Sep 08 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
Angular(5.2-&gt;6.1)升级小结
Dec 27 Javascript
超简单的微信小程序轮播图
Nov 22 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 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中usort在值相同时改变原始位置问题的解决方法
2011/11/27 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
简单通用的JS滑动门代码
2008/12/19 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
使用jquery获取url及url参数的简单实例
2016/06/14 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
Python下的subprocess模块的入门指引
2015/04/16 Python
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
python绘制简单折线图代码示例
2017/12/19 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
python列表使用实现名字管理系统
2019/01/30 Python
python找出因数与质因数的方法
2019/07/25 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
彻底解决Python包下载慢问题
2020/11/15 Python
学生党员思想汇报
2013/12/28 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
法学自荐信
2014/06/20 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python
pytorch实现ResNet结构的实例代码
2021/05/17 Python
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers
Go Plugins插件的实现方式
2021/08/07 Golang