序列化layer创建的弹出表单并ajax提交
2016-03-04 09:39 盛世游侠 阅读(6532) 评论(0) 编辑 收藏 举报/** *createTime:2015-09-13 *updateTime:2015-09-13 *author:刘俊 *phone:13469119119 *QQ:418873053 **/ var url='/index.php?m=formguide&c=index&a=show&formid=21&ajax=1'; //构建买家报名和卖家报名表单 var formStr = '<li class="clearfix"><div class="optTit fl">买家联系人:</div><div class="option fl"><input id="uname" name="info[uname]" type="text" />'; formStr += '<label class="namelabel" for="uname">请填联系人真实姓名</label></div></li>'; formStr += '<li class="clearfix"><div class="optTit fl">联系电话:</div>'; formStr += '<div class="option fl"><input id="tel" name="info[contact]" type="tel" /><label class="tellabel" for="tel">请填联系人手机号码</label></div></li>'; formStr += '<li class="clearfix"><div class="optTit fl">公司名称:</div>'; formStr += '<div class="option fl"><input id="company" name="info[company]" type="text" /><label class="companylabel" for="company">请填贵公司名称</label></div></li>'; formStr += '<li class="clearfix"><div class="optTit fl">产品要求:</div>'; formStr += '<div class="option fl" style="height:180px"><textarea id="demand" name="info[demand]"></textarea><label class="demandlabel" for="demand">请填写对卖家产品的要求</label></div></li>'; formStr += '<li class="clearfix"><div class="optTit fl"> </div><div class="option fl"><a href="javascript:void(0);" class="okbtn font16 mt10 white tc">提交</a></div></li>'; formStr += '</ul></form></div>'; //买家地址 var htmlStr = '<div class="myform"><form id="myform" action="'+url+'" method="post" name="myform"><input name="info[usertype]" value="1" type="hidden" /><ul>'; htmlStr += formStr; //卖家地址 var htmlStr2 = '<div class="myform"><form id="myform" action="'+url+'" method="post" name="myform"><input name="info[usertype]" value="2" type="hidden" /><ul>'; htmlStr2 += formStr; //自定义弹出层 /*$("#toApply").click(function(){ layer.open({ type: 1, title: "买家报名", closeBtn: true, shadeClose: true, area:['500px','500px'], skin: 'buyerBox', content:htmlStr }); //表单文本框提示文字 $("#myform input,#myform textarea").on({ focus:function(){$(this).next("label").hide();$(this).css("border-color","#999")}, blur:function(){ $(this).css("border-color","#e1e1e1") var str =$.trim($(this).val()); if(str == ""){ $(this).next("label").show(); }} }); //提交表单 $("#myform .okbtn").click(function(){ var uname=$("#uname").val(); var tel=$("#tel").val(); var company=$("#company").val(); var chinese = /^[\u4e00-\u9fa5]{2,4}$/; var telpattern = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/; var phonepattern= /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(14[0-9]{1})|(18[0-9]{1}))+\d{8})$/; //return this.optional(element) || (chinese.test(value)); if(!chinese.test(uname)){ layer.msg('姓名未填写或未填写汉字!', {icon:0}); return false; } if(!telpattern.test(tel) && !phonepattern.test(tel)){ layer.msg('联系方式填写错误!', {icon:0}); return false; } if($.trim(company)==''){ layer.msg('请填写公司名称!', {icon:0}); return false; } ajaxSubmit($("#myform")); }); });*/ /* $("#seller").click(function(){ layer.open({ type: 1, title: "卖家报名", closeBtn: true, shadeClose: true, area:['500px','300px'], skin: 'sellerBox', content:htmlStr2 }); //表单文本框提示文字 $("#myform input").on({ focus:function(){$(this).next("label").hide();}, blur:function(){ var str =$.trim($(this).val()); if(str == ""){ $(this).next("label").show(); }} }); //提交表单 $("#myform .okbtn").click(function(){ var uname=$("#uname").val(); var tel=$("#tel").val(); var company=$("#company").val(); var chinese = /^[\u4e00-\u9fa5]{2,4}$/; var telpattern = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/; var phonepattern= /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(14[0-9]{1})|(18[0-9]{1}))+\d{8})$/; //return this.optional(element) || (chinese.test(value)); if(!chinese.test(uname)){ layer.msg('姓名未填写或填写错误!', {icon:0}); return false; } if(!telpattern.test(tel) && !phonepattern.test(tel)){ layer.msg('联系方式填写错误!', {icon:0}); return false; } if($.trim(company)==''){ layer.msg('请填写公司名称!', {icon:0}); return false; } ajaxSubmit($("#myform")); }); });*/ //将form转为AJAX提交 function ajaxSubmit(frm) { var dataPara = getFormJson(frm); var url=$("#myform").attr("action"); $.ajax({ url:$("#myform").attr("action"), type:$("#myform").attr("method"), data: dataPara, success: function(data){ layer.closeAll(); if(data==='1'){ console.log(1); layer.msg('报名成功!', {icon: 1}); }else if(data==='0'){ console.log(0); layer.msg('报名失败,请重试!', {icon: 2}); }else{ console.log(data); layer.msg(data, {icon: 0}); } } }); } //将form中的值转换为键值对。 function getFormJson(frm) { var o = {dosubmit:1}; var a = $(frm).serializeArray(); $.each(a, function () { if (o[this.name] !== undefined) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; } //铝箔图片查看弹出层 function showPic(id,start,src,pid){ var json = { "title": "铝箔相册", //相册标题 "id": id, //相册id "start": start, //初始显示的图片序号,默认0 "data": [ //相册包含的图片,数组格式 { "alt": "铝箔图片", "pid": pid, //图片id "src": "images/pic/"+src, //原图地址 "thumb": "images/pic/ProductImg2.jpg" //缩略图地址 } ] }; layer.photos({ photos: json, closeBtn: true, }); };