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 相关文章推荐
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
Apr 02 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
Aug 13 Javascript
Bootstrap树形控件使用方法详解
Jan 27 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
Mar 23 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
详解用Node.js写一个简单的命令行工具
Mar 01 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 Javascript
node.js环境搭建图文详解
Sep 19 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 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中的cookie
2006/11/26 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
javascript Demo模态窗口
2009/12/06 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
vue.js+boostrap项目实践(案例详解)
2016/09/21 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
原生JS改变透明度实现轮播效果
2017/03/24 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
Python中线程编程之threading模块的使用详解
2015/06/23 Python
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
python集合删除多种方法详解
2020/02/10 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
如何利用python读取micaps文件详解
2020/10/18 Python
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
缴纳养老保险的证明
2014/01/10 职场文书
超市商业计划书
2014/05/04 职场文书
金融专业求职信
2014/08/05 职场文书
品牌推广活动策划方案
2014/08/19 职场文书
财务管理专业自荐书
2014/09/02 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL