<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>采购计划添加</title> <link rel="stylesheet" href="css/jedate.css"> </head> <style> *[hidefocus], input, textarea, a { outline: none; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { padding: 0; margin: 0; } fieldset, img, html, body, iframe { border: 0; } table { border-collapse: collapse; border-spacing: 0; } li { list-style: none; } i { font-style: normal; } h1, h2, h3, h4, h5, h6 { font-size: 100%; } caption, th { font-weight: normal; font-style: normal; text-align: left; } em, strong { font-weight: bold; font-style: normal; } body, textarea, select, input, pre { font-family: arial, microsoft yahei, helvetica, sans-serif; font-size: 14px; color: #555; } body { background: #f8f8f8; line-height: 1.5em; -webkit-text-size-adjust: none; } a, button { cursor: pointer; } textarea { resize: none; overflow: auto; } pre { white-space: pre-wrap; } a { color: #333; text-decoration: none; } input, select { border: 1px solid #ccc; border-radius: 2px; padding: 2px 0; text-align: center; } select { padding: 2px 8px; } .box { width: 1524px; overflow: hidden; color: #555; margin-left: 50px; } .buy-title { font-size: 24px; padding: 10px 0 30px; } .content { overflow: hidden; box-sizing: border-box; } .leftbox { width: 30%; float: left; box-sizing: border-box; padding-right: 70px; } .left { padding: 30px 0; border-bottom: 1px solid #ccc; } /*.left:last-child{*/ /*border:none;*/ /*}*/ .rightbox { width: 70%; float: left; border-left: 1px solid #aaa; box-sizing: border-box; padding-left: 100px; } .right { padding: 30px 0; border-bottom: 1px solid #ccc; } /*.right:last-child{*/ /*border:none;*/ /*}*/ .left > p { width: 100%; padding: 12px 0; display: flex; align-items: center; } .left > p:nth-child(odd) { background: #eee; } .left > p span:first-child { width: 160px; text-align: left; display: inline-block; } .left > p span:last-child { display: block; width: 227px; word-wrap: break-word; } /*.left > p span:last-child {*/ /*display: inline-block;*/ /*}*/ .left > p span i { display: block; } .right-title { overflow: hidden; padding-top: 42px; } .right-title p { float: left; width: 50%; font-weight: bold; display: flex; align-items: center; } .right-title > p span:first-child { min-width: 200px; text-align: left; display: inline-block; margin-right: 20px; } .right-title > p span:last-child { display: block; width: 220px; word-wrap: break-word; } .right-title > p span i { display: block; } .brand { padding: 12px 0; } .brand, .set, .color > div, .check, .numbox, .detail > div { display: flex; align-items: center; } .brand > span, .set > span, .color > div > span, .check > span, .numbox > span, .detail > div > span { min-width: 160px; text-align: left; display: inline-block; } .brand > span > i, .set > span > i, .color > div > span > i, .check > span > i, .numbox > span > i, .detail > div > span > i { display: block; } .brand > select { min-width: 200px; } .check { padding: 12px 0; } .checkbox { position: relative; top: 2px; margin-right: 10px; cursor: pointer; } .info { padding: 12px 0; overflow: hidden; display: none; } .set { float: left; width: 50%; } .color { float: left; width: 50%; } .set span { width: 124px; float: left; } .set textarea { width: 300px; height: 100px; overflow-y: auto; border: 1px solid #ccc; } .color > div:first-child { padding-bottom: 56px; } .numbox { padding: 12px 0; } .numbox > span { width: 120px; text-align: left; display: inline-block; } .detail { padding: 12px 0; overflow: hidden; } .detail > div { width: 50%; float: left; } .detail > div > span:first-child { width: 120px; display: inline-block; text-align: left; } .sell-button { margin-top: 70px; width: 100%; text-align: center; } .sell-button a { color: white; background: #4d90fe; display: inline-block; border: 0; padding: 7px 20px; margin: 5px 0; } .sell-button a:last-child { margin-left: 100px; background: #ddd; } .btn-box { padding: 50px 0 20px; /*text-align: center;*/ } .add { margin: 0 100px 0 300px; width: 70px; border: none; background: #4d90fe; color: #fff; height: 38px; } .delete { width: 70px; border: none; background: #4d90fe; color: #fff; height: 38px; } .error { color: red; } .addgoon { margin: 0 100px 0 300px; width: 80px; border: none; background: #4d90fe; color: #fff; height: 38px; padding: 10px; } .delete { width: 80px; border: none; background: #ccc; color: #666; height: 38px; padding: 10px; } </style> <body> <!--<form action="" id="aa">--> <div class="box"> <h2 class="buy-title">采购计划添加</h2> <div class="content"> <div class="leftbox"> <div class="left"> <p> <span> <i>需求单编号：</i> <i>(requirement number)</i> </span> <span>XXXXXXXX</span> </p> <p> <span> <i>需求单名称：</i> <i>(requirement name)</i> </span> <span>XXXXXXXX</span> </p> <p> <span> <i>品牌首字母：</i> <i>(brand initials)</i> </span> <span>XXXXXXXX</span> </p> <p> <span> <i>品牌：</i> <i>(brand)</i> </span> <span>XXXXXXXX1111111111111111saddddddddddasdasdasdasssssss</span> </p> <p> <span> <i>型号：</i> <i>(model)</i> </span> <span>XXXXXXXX</span> </p> <p> <span> <i>版别：</i> <i>(versions)</i> </span> <span>XXXXXXXX</span> </p> <p> <span> <i>配置：</i> <i>(configuration)</i> </span> <span>XXXXXXXX</span> </p> <p> <span> <i>外观颜色：</i> <i>(appearance color )</i> </span> <span>XXXXXXXX</span> </p> <p> <span> <i>内饰颜色：</i> <i>(car interior color)</i> </span> <span>XXXXXXXX</span> </p> <p> <span> <i>数量：</i> <i>(amount)</i> </span> <span>XXXXXXXX</span> </p> </div> </div> <div class="rightbox"> <div class="right-title"> <p> <span> <i>采购计划编号：</i> <i>(procurement plan number)</i> </span> <span class="buycode">XXXXXXXX</span> </p> <p> <span> <i>采购计划名称：</i> <i>(procurement plan name)</i> </span> <input type="text" name="buyname"> </p> </div> <form action="" id="rightVli0" class="rightVli"> <div class="right"><input type="hidden" name="sid" value="46"><input type="hidden" name="bidc" value="0"> <div class="brand"> <span> <i>品牌 型号 版别:</i> <i>(brand model version)</i> </span> <select id="" name="bmv" class="selectchange"> <option value="80" selected="selected">本田 艾力绅 2016款 2.4L 自动 舒适版288</option> </select> </div> <div class="check"> <input type="checkbox" class="checkbox"> <input type="hidden" name="adjust" value=""> <span> <i>调剂（只有调剂后才可修改配置、颜色）</i> <i>adjustment (config and color can be modified when you check adjustment)</i> </span> </div> <div class="info"> <div class="set"> <span> <i>配置：</i> <i>(configuration)</i> </span> <textarea name="config" readonly="readonly">1</textarea> </div> <div class="color"> <div> <span> <i>外观颜色：</i> <i>(appearance color)</i> </span> <input type="text" name="outcolor" class="out_color" value="1" readonly="readonly"> </div> <div> <span> <i>内饰颜色：</i> <i>(inner color)</i> </span> <input type="text" name="incolor" class="in_color" value="1" readonly="readonly"> </div> </div> </div> <div class="numbox"> <span> <i>数量：</i> <i>(amount)</i> </span> <input type="text" name="num" class="num" value="11111111111"> </div> <div class="detail"> <div> <span> <i>供应方名称：</i> <i>(supplier name)</i> </span> <input type="text" name="supplyname" value="阿发"> </div> <div> <span> <i>车价：</i> <i>(car price)</i> </span> <input type="text" name="totalprice" value="11.00"> 加币(CAD) </div> </div> <div class="detail"> <div> <span> <i>货物运送地点：</i> <i>(delivery location)</i> </span> <select id="" name="tostoreid"> <option value="12" selected="selected">asdf</option> <option value="13">加拿大啊</option> </select> </div> </div> <div class="detail"> <div> <span> <i>约定入库时间：</i> <i>(agreed storage time)</i> </span> <input class="datainp" name="appointtime" type="text" placeholder="请选择时间" readonly="readonly"> </div> <div> <span> <i>付款时间：</i> <i>(pay time)</i> </span> <input class="datainp" name="paytime" type="text" placeholder="请选择时间" value="2017-12-31"> </div> </div> <div class="detail"> <div> <span> <i>4S店杂费：</i> <i>(4S shop charges)</i> </span> <input type="text" name="othercost" value="1.00"> </div><div> <span> <i>车辆保险：</i> <i>(car insurance)</i> </span> <input type="text" name="insurance" value="2.00"> </div> </div> <div class="detail"> <div> <span> <i>消费税：</i> <i>(consumption tax)</i> </span> <input type="text" name="expensetax" value="3.00"> </div> </div> <div class="detail"> <div> <span> <i>佣金1：</i> <i>(commission1)</i> </span> <input type="text" name="cmsn1" value="4.00"> </div><div> <span> <i>佣金2：</i> <i>(commission2)</i> </span> <input type="text" name="cmsn2" value="5.00"> </div> </div><div class="detail"> <div> <span> <i>佣金3：</i> <i>(commission3)</i> </span> <input type="text" name="cmsn3" value="6.00"> </div><div> <span> <i>佣金4：</i> <i>(commission4)</i> </span> <input type="text" name="cmsn4" value="7.00"> </div> </div><div class="detail"> <div> <span> <i>佣金5：</i> <i>(commission5)</i> </span> <input type="text" name="cmsn5" value="8.00"> </div> </div><div class="detail"> <div> <span> <i>其他费用1：</i> <i>(other cost1)</i> </span> <input type="text" name="other1" value="9.00"> </div><div> <span> <i>其他费用2：</i> <i>(other cost2)</i> </span> <input type="text" name="other2" value="10.00"> </div> </div><div class="detail"> <div> <span> <i>其他费用3：</i> <i>(other cost3)</i> </span> <input type="text" name="other3" value="11.00"> </div><div> <span> <i>其他费用4：</i> <i>(other cost4)</i> </span> <input type="text" name="other4" value="12.00"> </div> </div><div class="detail"> <div> <span> <i>其他费用5：</i> <i>(other cost5)</i> </span> <input type="text" name="other5" value="13.00"> </div> </div><div class="detail"> <div> <span> <i>运输费用：</i> <i>(transport cost)</i> </span> <input type="text" name="transcost" value="14.00"> </div><div> <span> <i>运输方名称：</i> <i>(transport name)</i> </span> <input type="text" name="transname" value="15啊"> </div> </div> <div class="btn-box"> <a class="addgoon"> <i>继续添加</i> <i>add</i> </a> <a class="delete"> <i>删除</i> <i>delete</i> </a></div></div> </form> </div> <!--<p id='submit2'>验证</p>--> </div> <div class="sell-button"> <a href="javascript:;" id="submit2"> 提交(submit) </a> <a href="#">取消(cancel)</a> </div> <input type="submit" value="ss" id='submit' > </div> <!--</form>--> <input onclick="testShow(this)" readonly placeholder="请选择时间"> </body> <script src="js/jquery-2.1.4.min.js"></script> <script src="js/jquery.jedate.js"></script> <script src="js/jquery.validate.js"></script> <script> function testShow(elem){ $.jeDate(elem,{ format: "YYYY-MM-DD", isTime: false, isClear: false, maxDate: $.nowDate({DD:"0"}) }); } var date=new Date(); var year=date.getFullYear(); var month=date.getMonth()+1; var day=date.getDate(); if(month<10){ month="0"+month; } if(day<10){ day="0"+day; } console.log(year+"-"+month+"-"+day) $(".datainp").jeDate({ format: "YYYY-MM-DD", isTime: false, isClear: false, maxDate: year+"-"+month+"-"+day // position:[205,768] }); $(document).delegate('.checkbox', 'click', function () { if ($(this).prop('checked')) { $(this).parent().siblings('.info').show(); } else { $(this).parent().siblings('.info').find('textarea,input').val(""); $(this).parent().siblings('.info').hide(); } }); $(document).delegate('.addgoon', 'click', function () { var parent = $(this).parent().parent().parent().clone(); parent.find('label').remove(); parent.find('input,textarea').css("color", "#555").val(""); parent.find('.checkbox').prop('checked', false); parent.find('.info').hide(); parent.appendTo($('.rightbox')); var right = $(".rightVli"); for (var i = 0; i < right.length; i++) { right.eq(i).prop("id", "rightVli" + i); } $(".datainp").jeDate({ format: "YYYY-MM-DD", isTime: false, isClear: false, minDate: "2014-09-19 00:00:00" }); }); $(document).delegate('.delete', 'click', function () { $(this).parent().parent().parent().remove(); var right = $(".rightVli"); for (var i = 0; i < right.length; i++) { right.eq(i).prop("id", "rightVli" + i); } }); // 不为空 jQuery.validator.addMethod("isnull", function(value, element) { return this.optional(element) || $.trim(value); }, "请输入合法字符"); // 配置 jQuery.validator.addMethod("isconfig", function(value, element) { return this.optional(element) || $.trim(value).length<500; }, "最多输入500位字符"); // 外观配置 jQuery.validator.addMethod("isoutlook", function(value, element) { return this.optional(element) || $.trim(value).length<50; }, "最多输入50位字符"); // 数量 jQuery.validator.addMethod("isnum", function(value, element) { return this.optional(element) || /^[1-9][0-9]*$/.test(value); }, "请填写大于0的整数"); // 车价 jQuery.validator.addMethod("istotalprice", function(value, element) { return this.optional(element) || /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/.test(value); }, "请填写正确的金额"); function JqValidate(id) { return $(id).validate({ rules: { config:{ required: true, isconfig:true, isnull:true }, outcolor:{ required: true, isoutlook: true, isnull:true }, incolor:{ required: true, isoutlook: true, isnull:true }, num: { required: true, isnum: true, maxlength:11 }, supplyname: { required: true, isoutlook: true, isnull:true }, totalprice: { required: true, maxlength: 11, istotalprice:true }, othercost: { maxlength: 11, istotalprice:true }, insurance: { maxlength: 11, istotalprice:true }, expensetax: { maxlength: 11, istotalprice:true }, cmsn1: { maxlength: 11, istotalprice:true }, cmsn2: { maxlength: 11, istotalprice:true }, cmsn3: { maxlength: 11, istotalprice:true }, cmsn4: { maxlength: 11, istotalprice:true }, cmsn5: { maxlength: 11, istotalprice:true }, other1: { maxlength: 11, istotalprice:true }, other2: { maxlength: 11, istotalprice:true }, other3: { maxlength: 11, istotalprice:true }, other4: { maxlength: 11, istotalprice:true }, other5: { maxlength: 11, istotalprice:true }, transcost: { maxlength: 11, istotalprice:true }, transname: { maxlength: 50, isnull:true, isoutlook: true, } }, messages: { config:{ required: "请输入配置", maxlength: "最多输入500位字符" }, outcolor:{ required: "请输入外观颜色", maxlength: "最多输入50位字符" }, incolor:{ required: "请输入内饰颜色", maxlength: "最多输入50位字符" }, num: { required: "请输入数量", maxlength: "最多输入11位数字" }, supplyname: { required: "请输入供应商", maxlength: "最多输入50位字符" }, totalprice: { required: "请输入车价", maxlength: "最多输入11位数字" }, transname: { maxlength:"最多输入50位字符" } } }) } $("#submit2").click(function () { var val=$('.right-title').find("input[name='buyname']").val(); if($.trim(val)==""){ alert("请输入采购计划名称"); $('.right-title').find("input[name='buyname']").focus(); return false; } else if(val.length>100){ alert("最多输入100位字符"); $('.right-title').find("input[name='buyname']").focus(); return false; } var k = 0; var right = $('.rightVli'); for (var i = 0; i < right.length; i++) { if (JqValidate("#rightVli" + i).form()) { k++; if (k == right.length) { var ss=""; $.each(right,function(){ for(var j=0;j<$(this).find("div>div input").length;j++){ ss=ss+$(this).find("div>div input").eq(j).attr('name')+"="+ $.trim($(this).find("div>div input").eq(j).val())+"&"; } ss=ss+"config="+$.trim($(this).find("textarea[name='config']").val())+"&bmv="+$(this).find("select[name='bmv']").val()+"&tostoreid="+$(this).find("select[name='tostoreid']").val()+"&"; }); ss=ss+"buycode="+$('.buycode').html()+"&buyname="+$.trim($('.right-title').find("input[name='buyname']").val()); console.log(ss); $.ajax({ url: '', data: ss, type: 'get', datatype: 'json', success: function () { alert("提交成功"); } }); } } } }); </script> </html>
相关文章：