最近在写进销存的项目，iframe页面内，点击按钮》弹出子页面。这里需要将父级页面的id传给子页面中。做个笔记。
思路：在父级页面表格的前面加个<input type="hidden" value="1"/>，将value值传给后台。【设置type="hidden"的原因：操作这条数据必需通过id进行操作，所以页面上必需有id。但是又不能在页面中展示出来，所以需要将id隐藏】
（1）父级页面
HTML部分：
<tr class="table-content"> <input type="hidden" value="1"/> <td>1001</td> <td>鑫鑫家居有限公司+</td> <td>张三</td> <td>15145672211</td> <td>北京海淀区</td> <td>9:00-16:00</td> <td>未审核</td> <td class="operate"> <button class="edit" type="button" onclick="ShopEdit(this)">编辑</button> <button class="del" type="button" onclick="ShopDel(this)">删除</button> </td> </tr>
JS部分：
/*编辑按钮的 onclick事件*/ function ShopEdit(edit){ var $this = $("edit"); var tr = $this.closest("tr"); var id_input = $(tr).children("input"); var id_val=$(id_input[0]).val();//获取id值
//获取id_val的第二种写法
//var id_val = $(edit).parent().siblings("input").val();
window.location.href="pop/ShopEditPop.html?id="+id_val;//这里是pop/ShopEditPop.do?id="+id_val，写成html我这里是方便测试；ShopEditPop.html是子页面
}
（2）子页面
子页面中 ，点击"提交审核按钮",将表单中数据传给后台
//提交表单*/ $(".sub-btn").click(function () { var formData = new FormData($( "#ShopAddForm" )[0]);//$( "#ShopAddForm" )[0] 获取form元素 //表单校验是否成功 var flag = validateForm(); if (flag) { $.ajax({ url: '', type: 'post', dataType: 'json', data: formData, success: function () { alert("请求成功！") var fir = parent.document.getElementsByTagName("iframe");//关闭当前页面刷新父级页面 $(fir).attr("src","ShopList.html"); } }); } else { alert("表单校验失败"); /*var fir = parent.document.getElementsByTagName("iframe");/!*测试用的*!/ $(fir).attr("src","ShopList.html");*/ } });
#ShopAddForm是form标签的ID类名
validateForm 方法 是对页面中的表单进行校验操作
function validateForm() { var result = true; var count = 0; //input验证 var $input = $("input[type!='button']"); $.each($input, function (i, item) { var val = $(item).val(); if (val == "" || val == null || val == undefined) { $(item).siblings(".hint").css("visibility", "visible"); count++; } else { $(item).siblings(".hint").css("visibility", "hidden"); } }); //select验证 var $select = $("select"); $.each($select, function (i, item) { var val = $(item).children("option:selected").val(); if (val == "" || val == null || val == undefined) { $(item).siblings(".hint").css("visibility", "visible"); count++; } else { $(item).siblings(".hint").css("visibility", "hidden"); } }); //textarea验证 var $textarea = $("textarea"); $.each($textarea, function (i, item) { var val = $(item).val(); if (val == "") { $(item).siblings(".hint").css("visibility", "visible"); count++; } else { $(item).siblings(".hint").css("visibility", "hidden"); } }); if (count > 0) result = false; return result; }
子页面的html部分：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>供货商编辑</title> <link href="../../css/pop/ShopListAddPop.css" type="text/css" rel="stylesheet"/> <link href="../../datepair/jquery.ptTimeSelect.css" type="text/css" rel="stylesheet"/> <!--时间插件--> <link href="http://code.jquery.com/ui/1.7.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" media="all"/> <!--时间插件--> <link href="../../css/pop/layerCom.css" rel="stylesheet" type="text/css"/><!--layer插件头部样式--> <style> .shangchuan input{ width: 220px !important; } .shangchuan img{ margin-left: 35px; margin-right: 20px; width: 50px; height: 50px; vertical-align: bottom; cursor: pointer; transition: all 0.6s; } .shangchuan img:hover{ transform: scale(2); } </style> </head> <body> <div class="container"> <!--头部开始--> <div class="header-wrap"> <div class="header"> <a href="##">首页</a> > <a href="##">店铺管理</a> > <a href="##">店铺列表</a> </div> <P>店铺添加</P> </div> <!--头部结束--> <div class="content"> <p>店铺信息</p> <form id="ShopEditForm" method="post" action=""> <div class="txt-wrap"> <div class="left row"> <div class="test1"><i>*</i>招牌名</div> <div class="test1"><i>*</i>商户LOGO</div> <div class="test1"><i>*</i>营业执照名称</div> <div class="test1"><i>*</i>营业执照号码</div> <div class="test1"><i>*</i>营业执照到期时间</div> <div class="test1"><i>*</i>营业执照图片</div> <div class="test1"><i>*</i>税务登记证图片</div> <div class="test1"><i>*</i>经纬度</div> <div class="test1"><i>*</i>商户认证级别</div> <div class="test1"><i>*</i>地址</div> <div class="test1"><i>*</i>详细地址</div> <div class="test1"><i>*</i>所属行业</div> <div class="test1"><i>*</i>法人姓名</div> <div class="test1"><i>*</i>法人身份证</div> <div class="test1"><i>*</i>法人身份证图片</div> <div class="test1"><i>*</i>法人身份证到期时间</div> <div class="test1"><i>*</i>组织机构代码证号码</div> <div class="test1"><i>*</i>组织机构代码证图片</div> <div class="test1"><i>*</i>代码证到期日期</div> <div class="test1"><i>*</i>营业时间</div> <div class="test1"><i>*</i>固定电话</div> <div class="test1 refer"><i>*</i>商户简介</div> </div> <!--表单内容 开始--> <div class="right row"> <div class="test2 txt-com"> <input id="StoreAddTxt1" class="shopAdd-zpm" name="txt1Name" style="margin-top: 44px" type="text"/> <div id="Prompt1" class="txt-com hint"><i>招牌名不能为空！</i></div> </div> <div class="test2 txt-com shangchuan"> <input type="text" name="filetext1" readonly="readonly"/> <!--multiple="multiple"多文件上传 accept="image/*"上传文件的类型--> <input id="myfile1" style="display: none" type="file" name="file1Name" onchange="fileChange(this)"/> <img src="../../images/cs.jpg"/> <label class="UpLoad" for="myfile1">上传</label> <div id="Prompt2" class="txt-com hint"><i>商户LOGO不能为空！</i></div> </div> <div class="test2 txt-com"> <input id="StoreAddTxt3" type="text" name="txt2Name"/> <div id="Prompt3" class="txt-com hint"><i>营业执照名称不能为空！</i></div> </div> <div class="test3 txt-com"> <input id="StoreAddTxt4" type="text" maxlength="13" name="txt3Name"/> <div id="Prompt4" class="txt-com hint"><i>营业执照号码错误！</i></div> </div> <div class="test4 txt-com"> <input id="StoreAddTxt5" class="date date-text1 laydate-icon" name="txt4Name" type="text" readonly="readonly" onclick="laydate()"/> <div id="Prompt5" class="txt-com hint"><i>营业执照到期时间不能为空！</i></div> </div> <div class="test2 txt-com shangchuan"> <input type="text" name="filetext2" readonly="readonly"> <input id="myfile2" style="display: none" type="file" name="file2Name" onchange="fileChange(this)"> <img src="../../images/cs.jpg"/> <label class="UpLoad" for="myfile2">上传</label> <div id="Prompt6" class="txt-com hint"><i>营业执照图片不能为空！</i></div> </div> <div class="test2 txt-com shangchuan"> <input type="text" name="filetext3" readonly="readonly"> <input id="myfile3" style="display: none" type="file" name="file3Name" onchange="fileChange(this)"> <img src="../../images/cs.jpg"/> <label class="UpLoad" for="myfile3">上传</label> <div id="Prompt7" class="txt-com hint"><i>税务登记证图片不能为空！</i></div> </div> <div class="test4 txt-com"> <input id="StoreAddTxt8" type="text" name="txt5Name" /> <div id="Prompt8" class="txt-com hint"><i>经纬度不能为空！</i></div> </div> <div class="test5 txt-com"> <select id="StoreAddTxt9" class="set1" name="txt6Name" style="font-size:16px;margin-top: 23px;color: #2e3440;"> <option selected="selected" value="">请选择</option> <option value="1">请选择1</option> <option value="2">请选择2</option> </select> <div id="Prompt9" class="txt-com hint"><i>商户认证级别不能为空！</i></div> </div> <div class="test6 txt-com" name="txt7Name" > <select id="StoreAddTxt10-1" name="province" class="province set-com" style="font-size:16px;margin-top: 22px;color: #2e3440;padding: 0 65px 0 15px;"></select> <select id="StoreAddTxt10-2" name="city" class="city set-com" style="font-size:16px;margin-top: 22px;color: #2e3440;padding: 0 65px 0 15px;"></select> <select id="StoreAddTxt10-3" name="district" class="district set-com" style="font-size:16px;margin-top: 22px;color: #2e3440;padding: 0 65px 0 15px;"></select> <div id="Prompt10" class="txt-com hint"><i>地址不能为空！</i></div> </div> <div class="test7 txt-com"> <input id="StoreAddTxt11" class="shopAdd-xxdz" name="txt8Name" type="text"/> <div id="Prompt11" class="txt-com hint"><i>详细地址不能为空！</i></div> </div> <div class="test5 txt-com"> <select id="StoreAddTxt12" class="set1" name="txt9Name" style="font-size:16px;margin-top: 23px;color: #2e3440;"> <option selected="selected" value="">请选择</option> <option value="1">请选择1</option> <option value="2">请选择2</option> </select> <div id="Prompt12" class="txt-com hint"><i>所属行业不能为空！</i></div> </div> <div class="test4 txt-com"> <input id="StoreAddTxt13" class="shopAdd-fr" name="txt10Name" type="text"/> <div id="Prompt13" class="txt-com hint"><i>法人姓名不能为空！</i></div> </div> <div class="test4 txt-com"> <input id="StoreAddTxt14" name="txt11Name" type="text"/> <div id="Prompt14" class="txt-com hint"><i>法人身份证不能为空！</i></div> </div> <div class="test2 txt-com shangchuan"> <input type="text" name="filetext4" readonly="readonly"> <input id="myfile4" style="display: none" type="file" name="file4Name" onchange="fileChange(this)"> <img src="../../images/cs.jpg"/> <label class="UpLoad" for="myfile4">上传</label> <div id="Prompt15" class="txt-com hint"><i>法人身份证图片不能为空！</i></div> </div> <div class="test4 txt-com"> <input id="StoreAddTxt16" class="date date-text1 laydate-icon" name="txt12Name" type="text" readonly="readonly" onclick="laydate()"/> <div id="Prompt16" class="txt-com hint"><i>法人身份证证到期时间不能为空！</i></div> </div> <div class="test4 txt-com"> <input id="StoreAddTxt17" name="txt13Name" type="text" maxlength="9"/> <div id="Prompt17" class="txt-com hint"><i>组织机构代码证号码不能为空！</i></div> </div> <div class="test2 txt-com shangchuan"> <input type="text" name="filetext5" readonly="readonly"> <input id="myfile5" style="display: none" type="file" name="file5Name" onchange="fileChange(this)"> <img src="../../images/cs.jpg"/> <label class="UpLoad" for="myfile5">上传</label> <div id="Prompt118" class="txt-com hint"><i>组织机构代码证图片不能为空！</i></div> </div> <div class="test4 txt-com"> <input id="StoreAddTxt19" class="date date-text1 laydate-icon" name="txt14Name" type="text" readonly="readonly" onclick="laydate()"/> <div id="Prompt19" class="txt-com hint"><i>代码证到期日期不能为空！</i></div> </div> <div id="yysj" class="test4 txt-com"> <input id="StoreAddTxt20-1" class="time start date date-text1 shopAdd-yysj" name="txt15Name" type="text" readonly="readonly"/> <span style="font-size: 16px;color: #2e3440;"> to </span> <input id="StoreAddTxt20-2" class="time end date date-text1 shopAdd-yysj" name="txt15Name2" type="text" readonly="readonly"/> <div id="Prompt20" class="txt-com hint"><i>营业时间不能为空！</i></div> </div> <div class="test8 txt-com "> <input id="StoreAddTx21-1" class="test8-1 shopAdd-gddh" name="txt16Name" type="text"/> <i style="font-size: 16px;margin: 0 5px;">—</i> <input id="StoreAddTxt21-2" class="test8-2 shopAdd-gddh" name="txt16Name2" type="text"/> <div id="Prompt21" class="txt-com hint"><i>固定电话不能为空！</i></div> </div> <div class="test9 txt-com"> <textarea id="StoreAddTxt22" cols="40" rows="8" name="txt17Name"></textarea> <div id="Prompt22" class="txt-com hint"><i>商户简介不能为空！</i></div> </div> <!--提交按钮开始--> <div class="footer-btn"> <input class="save-btn" type="button" value="保存"/> <input class="sub-btn" type="button" value="提交审核"/> </div> <!--提交按钮结束--> </div> <!--文本框内容 结束--> </div> </form> <!----> </div> </div> <script src="../../js/jquery.js" type="text/javascript"></script> <script src="../../laydate/laydate.js" type="text/javascript"></script> <script src="../../js/jquery.area.js" type="text/javascript"></script><!--三级联动js--> <script src="../../datepair/jquery.ptTimeSelect.js" type="text/javascript"></script><!--时间插件--> <script src="../../datepair/jquery.datepair.js" type="text/javascript"></script><!--时间插件--> <script src="../../js/elements.fileinput.js" type="text/javascript"></script><!--图片上传插件--> <script src="../../layer/layer.js" type="text/javascript"></script> <script> /*****三级联动js内容开始*****/ (function ($) { $(function () { var defalutOptions = { cityClass: '.city', districtClass: '.district', inputCode: '.code', inputText: '.text' }; $('.province').area(defalutOptions); }); })(jQuery); /*****三级联动js内容结束*****/ /*****时间插件开始*****/ $(function () { $('#yysj .time').ptTimeSelect({ 'onClose': function ($self) { $self.trigger('change'); } }); $('#yysj .date').pikaday(); var TIMEFORMAT = 'h:mm a'; $('#yysj').datepair({ parseTime: function ($input) { // use moment.js to parse time var m = moment($input.val(), TIMEFORMAT); return m.toDate(); }, updateTime: function ($input, dateObj) { var m = moment(dateObj); $input.val(m.format(TIMEFORMAT)); }, parseDate: function ($input) { var picker = $input.data('pikaday'); return picker.getDate(); }, updateDate: function ($input, dateObj) { var picker = $input.data('pikaday'); return picker.setDate(dateObj); } }); }) /*****时间插件内容结束*****/ /*file文件上传*/ $("#myfile1").change(function (event) { var name = event.target.value; $("input[name='filetext1']").val(name); }); $("#myfile2").change(function (event) { var name = event.target.value; $("input[name='filetext2']").val(name); }); $("#myfile3").change(function (event) { var name = event.target.value; $("input[name='filetext3']").val(name); }); $("#myfile4").change(function (event) { var name = event.target.value; $("input[name='filetext4']").val(name); }); $("#myfile5").change(function (event) { var name = event.target.value; $("input[name='filetext5']").val(name); }); /*file文件上传 结束*/ /*****限制上传文件大小*****/ function fileChange(target){//target表示当前的上传文件 var file = target.files[0]; var img = $(target).siblings("img"); var c = URL.createObjectURL(file); alert(path); var isIE = /msie/i.test(navigator.userAgent) && !window.opera; var fileSize = 0; if (isIE) { var filePath = target.value; var fileSystem = new ActiveXObject("Scripting.FileSystemObject"); var file = fileSystem.GetFile (filePath); fileSize = file.Size; } else { fileSize = target.files[0].size; } var size = fileSize / 1024; if(size>3000){ alert("附件不能大于3M"); target.value=""; return } var name=target.value; var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase(); if(fileName !="jpg" && fileName !="jpeg" && fileName !="pdf" && fileName !="png" && fileName !="dwg" && fileName !="gif" ){ alert("请选择图片格式文件上传(jpg,png,gif,dwg,pdf,gif等)！"); target.value=""; return } //设置图片url } /*****限制上传文件大小 结束*****/ /*&&&&&&&&&&限制文本框输入的长度&&&&&&&&&&*/ $(function(){ $("#StoreAddTxt4").click('input',function(e){ if(this.value.length === 13) { //如果输入长度等于13，则禁用输入 $('input[type="submit"]').prop('disabled', false); } else { $('input[type="submit"]').prop('disabled', true); } }) $("#StoreAddTxt17").click('input',function(e){ if(this.value.length === 9) { //如果输入长度等于13，则禁用输入 $('input[type="submit"]').prop('disabled', false); } else { $('input[type="submit"]').prop('disabled', true); } }) }) /*&&&&&&&&&&限制文本框输入的长度结束&&&&&&&&&*/ /*限制文本框只能输入 数字*/ $(".shopAdd-gddh").keyup(function(){ var tmptxt=$(this).val(); $(this).val(tmptxt.replace(/\D|^0/g,'')); }).bind("paste",function(){ var tmptxt=$(this).val(); $(this).val(tmptxt.replace(/\D|^0/g,'')); }).css("ime-mode", "disabled"); /*限制文本框只能输入 数字 结束*/ /*表单验证*/ //保存按钮*/ $(".save-btn").click(function () { var formEditData = new FormData($( "#ShopEditForm" )[0]); var zpm = $("#StoreAddTxt1").val();//获取招牌名称 if (zpm == "" || zpm == null || zpm == undefined){ top.showLayer(); layer.config({ skin:'demo-class', end:function(){ top.hideLayer(); } }); layer.alert('招牌不能为空',{title:'提示'},function(index){ layer.close(index); }); } else { $.ajax({ url: '', type: 'post', dataType: 'json', data: formAddData, success: function () { var fir = parent.document.getElementsByTagName("iframe"); $(fir).attr("src","ShopList.html"); } }); } }); //提交表单*/ $(".sub-btn").click(function () { var formData = new FormData($( "#ShopAddForm" )[0]);//$( "#ShopAddForm" )[0] 获取form元素 //表单校验是否成功 var flag = validateForm(); if (flag) { $.ajax({ url: '', type: 'post', dataType: 'json', data: formData, async: false, success: function () { alert("请求成功！") var fir = parent.document.getElementsByTagName("iframe"); $(fir).attr("src","ShopList.html"); } }); } else { alert("表单校验失败"); /*var fir = parent.document.getElementsByTagName("iframe");/!*测试用的*!/ $(fir).attr("src","ShopList.html");*/ } }); function validateForm() { var result = true; var count = 0; //input验证 var $input = $("input[type!='button']"); $.each($input, function (i, item) { var val = $(item).val(); if (val == "" || val == null || val == undefined) { $(item).siblings(".hint").css("visibility", "visible"); count++; } else { $(item).siblings(".hint").css("visibility", "hidden"); } }); //select验证 var $select = $("select"); $.each($select, function (i, item) { var val = $(item).children("option:selected").val(); if (val == "" || val == null || val == undefined) { $(item).siblings(".hint").css("visibility", "visible"); count++; } else { $(item).siblings(".hint").css("visibility", "hidden"); } }); //textarea验证 var $textarea = $("textarea"); $.each($textarea, function (i, item) { var val = $(item).val(); if (val == "") { $(item).siblings(".hint").css("visibility", "visible"); count++; } else { $(item).siblings(".hint").css("visibility", "hidden"); } }); if (count > 0) result = false; return result; } /*提交表单验证结束*/ </script> </body> </html>
子页面css内容
* { margin: 0; padding: 0; } body, html { font-family: "Microsoft Yahei"; } a{cursor: pointer; } a:link {text-decoration: none; color: #2e3440} a:active {text-decoration: none; color: #2e3440} a:hover {text-decoration: none; color: #2e3440} a:visited {text-decoration: none; color: #2e3440} .container { position: relative; margin: 0 auto; min-width: 900px; } .header { padding: 30px 2%; font-size: 14px; } .header-wrap p { color: #2e3440; font-size: 18px; padding-left: 2%; margin-bottom: 30px; } .content{ padding: 0 2%; border-radius: 5px; min-width: 900px; color: #2e3440; } .content p{/*form表单顶部样式*/ font-size: 16px; padding: 15px 30px; background-color: #e2e3e7; color: #2e3440; border-radius: 5px 5px 0 0; } .content .txt-wrap{ position: relative; font-size: 0; text-align:center; height: 2370px; border: 1px solid #e0e0e0; border-radius: 0 0 5px 5px; margin-bottom: 60px; } .txt-wrap .left{ float: left; width: 30%; height :50%; } .txt-wrap .left .refer{ margin-bottom: 119px; } .txt-wrap .right{ float: right; height: 50%; position: absolute; left: 30%; right: 0; top: 0; } .txt-wrap .row{ font-size: 16px; } .txt-wrap .left .test1{ margin-top: 41px; padding: 14px 15px; text-align: right; color: #2e3440; } .txt-wrap .left .test1 i{ color: red; font-size: 16px; margin-right: 5px; vertical-align: sub; font-style: normal; } .txt-wrap .right .txt-com{ text-align: left; margin-left: 5px; font-size: 0; } .txt-wrap .right .txt-com input{ padding: 14px 15px; margin-top: 20px; border: 1px solid #d4d4d4; border-radius: 5px; outline: none; height: 20px; font-size: 16px; } .txt-wrap .right .txt-com select{ padding: 0 15px; margin-top: 20px; border: 1px solid #d4d4d4; border-radius: 5px; outline: none; height: 47px; } .txt-wrap .right .txt-com i{ font-style: normal; } .txt-wrap .right .txt-com .xz1{ position: absolute; left: 168px; top: 506px; color: #2e3440; font-size: 16px; padding: 0 5px; } .txt-wrap .right .txt-com .xz2{ position: absolute; left: 168px; top: 776px; color: #2e3440; font-size: 16px; padding: 0 5px; } .right .test2 input{ width: 430px; color: #2e3440; } .right .test3 input{ width: 320px; color: #2e3440; } .right .test4 input{ width: 180px; color: #2e3440; } .right .test5 .set1{ width: 210px; /*在选择框的最右侧中间显示小箭头图片*/ background: url("../../images/select2.png") no-repeat scroll right center transparent; color: #2e3440; } .right .test6 .set-com{ margin-right: 10px; /*在选择框的最右侧中间显示小箭头图片*/ background: url("../../images/select2.png") no-repeat scroll right center transparent; color: #2e3440; } .right .test7 input{ width: 460px; color: #2e3440; } .right .test8 .test8-1{ width: 45px; color: #2e3440; } .right .test8 .test8-2{ width: 120px; color: #2e3440; } .right .test9 textarea{ width: 400px; height: 100px; padding: 14px 15px; margin-top: 20px; border: 1px solid #d4d4d4; border-radius: 5px; outline: none; font-size: 16px; color: #2e3440; resize: none; } .footer-btn { font-size: 0; padding-top: 90px; padding-bottom: 90px; text-align: left; cursor: pointer; } .footer-btn input{ width: 140px; height: 46px; font-size: 16px; border-radius: 5px; color: #FFFFFF; margin: 0 50px 0 5px; outline: none; cursor: pointer; } .footer-btn .save-btn{ background-color: #68b1fb; border: 1px solid #68b1fb; } .footer-btn .sub-btn{ background-color: #e75c2f; border: 1px solid #e75c2f; } .UpLoad{ width: 90px !important; height: 48px !important; background-color: #fe890c !important; border: 1px solid #fe890c; color: #FFFFFF !important; margin-left: 15px; cursor: pointer; font-size: 16px; line-height: 48px; display: inline-block; border-radius: 5px; text-align: center; } /*select公共样式 开始*/ select { /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/ border: 1px solid #000; /*很关键：将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*为下拉小箭头留出一点位置，避免被文字覆盖*/ padding-right: 14px; } /*清除ie的默认选择框样式清除，隐藏下拉箭头*/ select::-ms-expand { display: none; } /*select公共样式 结束*/ /*提示内容样式调整 开始*/ .hint{ color: red; font-size: 0; padding-top: 5px; visibility: hidden; } .hint i{ font-size: 14px; } /*提示内容样式调整 开始*/