序列化layer創建的彈出表單並ajax提交


/**
*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">&nbsp;</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,
        });
    };
    

    

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM