layer父页获取弹出层输入框里面的值方法


Posted in Javascript onSeptember 02, 2019

主要是因为修改功能,原来页面填写数据如图

layer父页获取弹出层输入框里面的值方法

改为

layer父页获取弹出层输入框里面的值方法

其中点击填写明细弹出框

layer父页获取弹出层输入框里面的值方法

填写完毕后点击确认返回,同事这里因为她是存的多表,所以点击确认就直接保存数据了,改的这个功能原本保存是整体保存,我就不想改原来的逻辑,只想把填写的值带回去用隐藏控件存一下,到时候按照原来的逻辑整体存,所以没办法参考她的,最后搜索很多,解决了问题,具体代码如下:

父页面:

<div class="row">
<div class="col-md-6">
<div class="form-group PadTB10">
<label class="LabelW150">
经费来源总计(元)</label>
<input type="text" readonly="readonly" class="form-control" id="AmountSum" name="AmountSum" onkeyup="value=value.replace(/[^\d.]/g,'')" placeholder="填写来源明细" value="@pro.AmountSum"/>
<input type="button" value="填写来源明细" onclick="ShowAmountDetail()" />
<input type="hidden" name="CenterAmount" id="CenterAmount" value="@pro.CenterAmount" />
<input type="hidden" name="CityAmount" id="CityAmount" value="@pro.CityAmount" />
<input type="hidden" name="DisAmount" id="DisAmount" value="@pro.DisAmount" />
<input type="hidden" name="StreetAmount" id="StreetAmount" value="@pro.StreetAmount" />
<input type="hidden" name="OtherAmount" id="OtherAmount" value="@pro.OtherAmount" />
</div>
</div>
</div>

js:

//弹出经费来源明细
function ShowAmountDetail() {
var index = layer.open({
type: 2,
title: '填写经费明细',
shadeClose: false,
skin: 'layui-layer-rim',
area: ['50%', '50%'],
maxmin: true,
content: '/Project/AmountDetail?ProjectCode=' + "@ProjectCode",
btn: ['确定', '关闭'],
yes: function (index, layero) {
debugger;
var body = layer.getChildFrame('body', index); //得到iframe页的body内容
var CenterAmount = body.find("#CenterAmount").val();
var CityAmount = body.find("#CityAmount").val();
var DisAmount = body.find("#DisAmount").val();
var StreetAmount = body.find("#StreetAmount").val();
var OtherAmount = body.find("#OtherAmount").val();
if (CenterAmount == null || CenterAmount == "") CenterAmount = 0;
if (CityAmount == null || CityAmount == "") CityAmount = 0;
if (DisAmount == null || DisAmount == "") DisAmount = 0;
if (StreetAmount == null || StreetAmount == "") StreetAmount = 0;
if (OtherAmount == null || OtherAmount == "") OtherAmount = 0;
sum = Number(CenterAmount) + Number(CityAmount) + Number(DisAmount)
+ Number(StreetAmount) + Number(OtherAmount);
document.getElementById("CenterAmount").value = CenterAmount;
document.getElementById("CityAmount").value = CityAmount;
document.getElementById("DisAmount").value = DisAmount;
document.getElementById("StreetAmount").value = StreetAmount;
document.getElementById("OtherAmount").value = OtherAmount;
document.getElementById("AmountSum").value = sum;

//最后关闭弹出层
layer.close(index);
},
cancel: function () {
//右上角关闭回调
}
});
// layer.full(index);
}

子页面:

<!DOCTYPE html>

<html>

<head>
<meta name="viewport" content="width=device-width" />
<title>AmountDetail</title>
</head>
<body>
<div>
<table class="table table-bordered ">
<tr><td rowspan="5" style="text-align: center; vertical-align: middle;">经济来源明细</td><td>中央拨款(元)</td>
<td>
<input id="CenterAmount" class="form-control" onkeyup="value=value.replace(/[^\d.]/g,'')" name="CenterAmount" type="text" />
</td></tr>
<tr><td>市级专款(元)</td>
<td>
<input id="CityAmount" class="form-control" onkeyup="value=value.replace(/[^\d.]/g,'')" name="CityAmount" type="text" />
</td></tr>
<tr><td>区级资金(元)</td>

<td>

<input id="DisAmount" class="form-control" onkeyup="value=value.replace(/[^\d.]/g,'')" name="DisAmount" type="text" />
</td></tr>
<tr><td>街镇配套(元)</td>
<td>
<input id="StreetAmount" class="form-control" onkeyup="value=value.replace(/[^\d.]/g,'')" name="StreetAmount" type="text" "/>
</td></tr>
<tr><td>其他(元)</td>
<td>
<input id="OtherAmount" class="form-control" onkeyup="value=value.replace(/[^\d.]/g,'')" name="OtherAmount" type="text" />
</td></tr>
</table> 
</div>
</body>
</html>

以上这篇layer父页获取弹出层输入框里面的值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
利用React高阶组件实现一个面包屑导航的示例
Aug 23 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
Sep 02 #Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 #Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 #Javascript
Vue内部渲染视图的方法
Sep 02 #Javascript
一步一步实现Vue的响应式(对象观测)
Sep 02 #Javascript
Layui多选只有最后一个值的解决方法
Sep 02 #Javascript
解决layui checkbox 提交多个值的问题
Sep 02 #Javascript
You might like
第五节--克隆
2006/11/16 PHP
PHP PDO函数库详解
2010/04/27 PHP
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
PHP defined()函数的使用图文详解
2019/07/20 PHP
JavaScript对象模型-执行模型
2008/04/28 Javascript
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
jquery 淡入淡出效果的简单实现
2014/02/07 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
JavaScript禁止微信浏览器下拉回弹效果
2017/05/16 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
python中的sort方法使用详解
2014/07/25 Python
让Python代码更快运行的5种方法
2015/06/21 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
Python列表对象实现原理详解
2019/07/01 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
pycharm实现在虚拟环境中引入别人的项目
2020/03/09 Python
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
什么是TCP/IP
2014/07/27 面试题
自我评价优秀范文分享
2013/11/30 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
家具促销活动方案
2014/02/16 职场文书
高考备战决心书
2014/03/11 职场文书
nginx搭建NFS网络文件系统
2022/04/14 Servers
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js