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+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
js类定义函数时用prototype与不用的区别示例介绍
Jun 10 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
Jan 04 Javascript
纯js的右下角弹窗实例
Mar 12 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
Jun 02 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 Javascript
详解ES7 Decorator 入门解析
Feb 18 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 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实现的php代码加密解密类完整实例
2016/10/12 PHP
走出JavaScript初学困境—js初学
2008/12/29 Javascript
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
python实现指定字符串补全空格的方法
2015/04/30 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
对Pytorch 中的contiguous理解说明
2021/03/03 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
旅游管理专业生自荐信范文
2014/01/02 职场文书
黄河的主人教学反思
2014/02/07 职场文书
大学运动会入场词
2014/02/22 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
计划生育工作总结2015
2015/04/03 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
vue递归实现树形组件
2022/07/15 Vue.js
win10如何开启ahci模式?win10开启ahci模式详细操作教程
2022/07/23 数码科技