$(function(){ //============================ // 響應 城市-區 變化 start //============================ $(document).on('change', "#City_ID", function(){ $(".Area_ID").val(''); $.ajax({ type: "POST", url: "/ajax/ajax_get_area-p.php", data: "&Send_ID=" + $(this).val(), async: false, dataType: 'json', success: function(d){ var option_code = ''; $("#Area_ID option").remove(); for(var i = 0;i'+d[i][1]+''; } $("#Area_ID").html(option_code); $(".Zip").val("") } }); }); $(document).on('change', "#Area_ID", function(){ $(".Zip").val($(this).val()); }); $(document).on('change', "#City_ID2", function(){ $(".Area_ID2").val(''); $.ajax({ type: "POST", url: "/ajax/ajax_get_area-p.php", data: "&Send_ID=" + $(this).val(), async: false, dataType: 'json', success: function(d){ var option_code = ''; $("#Area_ID2 option").remove(); for(var i = 0;i'+d[i][1]+''; } $("#Area_ID2").html(option_code); $(".Zip2").val("") } }); }); $(document).on('change', "#Area_ID2", function(){ $(".Zip2").val($(this).val()); }); //============================ //收件人地址 start //============================ $(document).on('change', "#Rece_City_ID", function(){ $(".Rece_Area_ID").val(''); $.ajax({ type: "POST", url: "/ajax/ajax_get_area-p.php", data: "&Send_ID=" + $(this).val(), async: false, dataType: 'json', success: function(d){ var option_code = ''; $("#Rece_Area_ID option").remove(); for(var i = 0;i'+d[i][1]+''; } $("#Rece_Area_ID").html(option_code); $(".Rece_Zip").val("") } }); }); $(document).on('change', "#Rece_Area_ID", function(){ $(".Rece_Zip").val($(this).val()); }); $(document).on('change', "#Rece_City_ID2", function(){ $(".Rece_Area_ID2").val(''); $.ajax({ type: "POST", url: "/ajax/ajax_get_area-p.php", data: "&Send_ID=" + $(this).val(), async: false, dataType: 'json', success: function(d){ var option_code = ''; $("#Rece_Area_ID2 option").remove(); for(var i = 0;i'+d[i][1]+''; } $("#Rece_Area_ID2").html(option_code); $(".Rece_Zip2").val("") } }); }); $(document).on('change', "#Rece_Area_ID2", function(){ $(".Rece_Zip2").val($(this).val()); }); //============================ //收件人地址 end //============================ //============================ //響應 城市-區 變化 end //============================ //============================ //日期選擇器 start //============================ //檢查有沒有預先帶入的值 function checkDefaultDate(){ if($(".form-date-full").length > 0){ $(".form-date-full").each(function(){ if($(this).val()){ let date = $(this).val().split("-"), dayOptions = ``, group = $(this).parents(".form-date-group"), year = group.find(".year"), month = group.find(".month"), day = group.find(".day") //先灌注day選項 for(let i=0; i< new Date(parseInt(date[0]), parseInt(date[1]), 0).getDate(); i++){ let val = i + 1 if( val < 10){ val = "0" + val.toString() } dayOptions += `` } day.html(dayOptions) //改變選擇器的值 year.val(date[0]) month.val(date[1]) day.val(date[2]) } }) } } checkDefaultDate() //監聽選擇 $(document).on("change", ".form-date-select", function(){ let group = $(this).parents(".form-date-group"), year = group.find(".year"), month = group.find(".month"), day = group.find(".day"), full = group.find(".form-date-full"), dayOptions = `` if((year.val() && month.val() && !day.val()) || (year.val() && month.val() && day.val() && !$(this).hasClass("day"))){ //有選年或月 且日為空 或是三個都有選但改變年/月時 填充/更新日的選項 //new Date(parseInt(year.val())+1911, parseInt(month.val()), 0).getDate()用來算這個月有幾天 for(let i=0; i< new Date(parseInt(year.val()), parseInt(month.val()), 0).getDate(); i++){ let val = i + 1 if( val < 10){ val = "0" + val.toString() } dayOptions += `` } day.html(dayOptions) full.val("") }else if((!year.val() || !month.val()) && day.val()){ //有選日 但沒有年或月 清空日的選項 day.html(dayOptions) full.val("") }else if(year.val() && month.val() && day.val()){ //年月日都有填 let dayVal = (day.val().length == 1)?'0' + day.val() : day.val() full.val(`${year.val()}-${month.val()}-${dayVal}`) } }) //============================ //日期選擇器 end //============================ //============================ // 帶"其他"選項的select start //============================ $(document).on("change", ".form-withOther-group .form-select", function(){ //#15939 顯示捐款動機+其他說明 // let otherInput = $(this).parents(".form-withOther-group").find(".form-withOther-input") // if($(this).find("option:selected").text().includes("其他")){ // otherInput.addClass("show") // }else{ // otherInput.removeClass("show") // } }) //============================ // 帶"其他"選項的select end //============================ $("#Main_Form").fromsAuth({type:'NONE'}); $("#Main_Form2").fromsAuth({type:'NONE'}); $("#Main_Form3").fromsAuth({type:'NONE'}); //============================ // 修改地址 start //============================ //展開修改地址 $(document).on("click", ".form-address-btn", function(){ let formAddress = $(".user-address") //收件人地址 if($(this).data('type') == 'receaddress'){ formAddress = $(".rece-address") } formAddress.toggleClass("form-hide") }) //連動修改 $(document).on("change", ".form-address-group .form-select, .form-address-group .form-input", function(){ let _this = $(this) textBox = $(".form-address-fullstring"), hideInput = $("#Full_Address"), group = _this.parents(".form-address-group") //收件人地址 if($(this).parents(".address-wrapper-group").data('type') == 'receaddress'){ textBox = $(".form-receaddress-fullstring") hideInput = $("#Rece_Full_Address") } let addressString = "", city = group.find(".form-select").eq(0).find(":selected").text(), area = group.find(".form-select").eq(1).find(":selected").text(), zip = group.find(".form-address-zip").val() if((group.find(".form-address-zip").length > 0) && (!city || !area || !zip)){ //如果 郵遞區號/市/區 有空白(未選擇) textBox.text("") hideInput.val("") return false; } //組合 郵遞區號xx市xx區 if(city && area && zip){ addressString = city + area } //疊代其他輸入欄位 排除房室 group.find(".form-address-onchange").each(function(){ let _this = $(this) subInput = _this.find(".form-input"), twinFlag = false //判斷是否格式為 x樓之x if(_this.hasClass("form-address-twin")){ twinFlag = true } if(twinFlag){ let firstInput = subInput.eq(0), secondInput = subInput.eq(1) if(firstInput.val() && !secondInput.val()){ //主項有值 (x樓) 副項無值 addressString += firstInput.val() + (firstInput.data("text") || "") }else if(firstInput.val() && secondInput.val()){ //主副項都有值 (之x) addressString += firstInput.val() + (firstInput.data("contact") || "") + (secondInput.data("contact") || "") + secondInput.val() + (secondInput.data("text") || "") } }else if(!twinFlag && subInput.val()){ let text = subInput.data("text") || "" addressString += subInput.val() + text } }) textBox.text(addressString) hideInput.val(addressString) }) //============================ // 修改地址 end //============================ //============================================= // 是否曾是捐款人 切換顯示 start //============================================= $(document).on("change", ".form-radio-input[name=Donater]", function(){ let neededInputs = $(".step2-subform .form-switch-radio:checked + .form-switch-block .form-input, #Name"), subForm = $(".step2-subform") //1為是 if($(this).val() == 1){ neededInputs.each(function(){ let _input = $(this), specialFun = _input.data("special-fun") if(_input.attr('id') == 'Name'){ _input.attr('fun', (specialFun) ? specialFun : 'checkNameNull'); }else{ _input.attr('fun', (specialFun) ? specialFun : 'checkNull'); } }) subForm.removeClass("form-hide") }else{ neededInputs.each(function(){ let _input = $(this) _input.attr('fun', ''); }) subForm.addClass("form-hide") } }) //============================================= // 是否曾是捐款人 切換顯示 end //============================================= //============================================= // step 表單送出 start //============================================= $(document).on("submit","#Main_Form, #Main_Form2, #Main_Form3", function(e){ e.preventDefault() let form = $(this), id = $(this).attr("id") if(id === "Main_Form"){ //----------------------------------------- // step1 //----------------------------------------- $.ajax({ type: "POST", url: form.attr("action"), data: form.serialize(), dataType: "json", success: function(res){ switch(res.status){ case 'DATA_ERROR': alert('資料有誤,請重新輸入'); break; case 'API_ERROR': alert('帳號檢查失敗,請連繫客服'); break; case 'CHECK_ERROR': alert("認證碼錯誤"); break; case 'PWD_ERROR': alert("密碼不符合驗證規則,請重新設定"); break; case 'OK': $(".signin-step1").removeClass("now") $(".step-item").eq(1).addClass("pass") $(".signin-step2").addClass("now") break; } }, error: function(){ alert("網路連線過慢,網頁請重新整理") } }) }else if(id === "Main_Form2"){ //----------------------------------------- // step2 //----------------------------------------- let donaterName,donaterIDCard if($(".form-radio-input[name=Donater]:checked").length === 0){ alert("請選擇您是否曾是捐款人") return false; }else{ if($(".form-radio-input[name=Donater]:checked").val() == '1'){ //紀錄姓名和身分證用於step3 donaterName = $("#Name").val() if($(".form-switch-radio[name=IdentityMethod]:checked").val() == "UseIDCard"){ donaterIDCard = $("#IDCard").val() } } } $.ajax({ type: "POST", url: form.attr("action"), data: form.serialize(), dataType: "json", success: function(res){ switch(res.status){ case 'API_ERROR': alert('查無贊助人'); break; case 'SPONSOR_ERROR': alert('查無贊助人'); break; case 'ACCOUNT_ERROR': alert('您已加入會員,若忘記帳號請到忘記帳號頁面找回。'); location.href = "/member-login/"; break; case 'OK': $(".signin-step2").removeClass("now") $(".step-item").eq(2).addClass("pass") $(".signin-step3").html(res.dom) let step3Form = $("#Main_Form3") step3Form.fromsAuth({type:'NONE'}); if(donaterName){ step3Form.find("#Name").val(donaterName).prop("disabled", true) } if(donaterIDCard){ step3Form.find("#ID_Card").val(donaterIDCard).prop("disabled", true) } checkDefaultDate() $(".signin-step3").addClass("now") break; } }, error: function(){ alert("網路連線過慢,網頁請重新整理") } }) }else if(id === "Main_Form3"){ //----------------------------------------- // step3 //----------------------------------------- $('#Step3_Submit').attr('disabled', true); $('.addr_type_btn').each(function(){ if($(this).hasClass('now')){ $('#Address_Type').val($(this).data('id')); } }) $('.rece_addr_type_btn').each(function(){ if($(this).hasClass('now')){ $('#Rece_Address_Type').val($(this).data('id')); } }) var policy = []; $('.form-read-box').each(function(){ var tmp = $(this).find('input[type="checkbox"]').data('tid'); policy.push(tmp); }) $.ajax({ type: "POST", url: form.attr("action"), data: form.serialize()+'&policy='+policy.join(), dataType: "json", success: function(res){ switch(res.status){ case 'API_ERROR': alert('網路連線錯誤,請聯絡客服人員'); $('#Step3_Submit').attr('disabled', false); break; case 'ADD_ERROR': alert('加入會員失敗,請聯絡客服人員'); $('#Step3_Submit').attr('disabled', false); break; case 'POLICY_ERROR': alert('請同意所有政策與條款'); $('#Step3_Submit').attr('disabled', false); break; case 'ACCOUNT_ERROR': alert('您已加入會員,若忘記帳號請到忘記帳號頁面找回。'); location.href = "/member-forget/"; break; case 'OK': alert('加入會員成功,請到會員登入頁進行登入。'); //移除手機簡訊限制 sessionStorage.setItem('UseCellphone',0); location.href = "/member-login/" break; case 'OK_LINE_ADD': //移除手機簡訊限制 sessionStorage.setItem('UseCellphone',0); if(typeof Object.values === 'function'){ Swal.fire({ icon: null, confirmButtonText:'確認', confirmButtonColor: '#009140', html:`
您已成功加入會員,
趕快登入使用會員專屬的功能吧!
掃瞄QRCode成為家扶好友,將可獲得更多家扶訊息喔!
`, customClass:{ confirmButton:'line-add-btn' }, willClose: function(){ location.href = "/member-login/"; } }).then(function(result){ location.href = "/member-login/"; }) }else{ //不支援sweetalert2 location.href = "/member-login/"; } break; } }, error: function(data){ alert("網路連線過慢,網頁請重新整理") } }) } }) //============================================= // step 表單送出 end //============================================= //============================================= // 寄送簡訊or手機認證碼 start //============================================= $(".form-wrapper").on("click", "#SendCodeBtn, #CheckCode", function(){ let _this = $(this), id = _this.attr("id") wrapper = _this.parents(".form-wrapper"), method = wrapper.find(".form-switch-radio[name=AssignMethod]:checked").val(), val = ""; if(method == "UseEmail"){ val = wrapper.find("#Email").val() if(!val){ alert("請輸入E-mail") return false; } }else if(method == "UseCellphone"){ val = wrapper.find("#Cellphone").val() if(!val){ alert("請輸入手機號碼") return false; } }else{ alert("請選擇驗證方式") return false; } //送出時先單獨驗證 $("#Main_Form").trigger("singleCheck") let error = _this.parents(".form-switch-block").find(".forms_show[error=true]") if(error.length > 0){ alert(error.text()) return false; } //檢查發送次數 let sms_times = parseInt(sessionStorage.getItem(method)) || 0; if(method == 'UseCellphone' && sms_times >= 6) { alert("今日已達上限次數"); return false; } if(id === "SendCodeBtn") { $.ajax({ url: "/member/ajax/ajax_send_sms_code-p.php", method: "POST", dataType: "json", data: { type: 'add', method: method, val: val, account: $('#Account').val() }, success: function(res) { switch(res.status){ case 'NO_TYPE': alert("資料錯誤,請重試"); break; case 'NO_NAME': alert("請輸入姓名"); break; case 'NO_ACCOUNT': alert("請輸入帳號"); break; case 'NO_METHOD': alert("請選擇驗證方式"); break; case 'NO_VAL': alert("請輸入手機號碼或E-mail"); break; case 'WRONG_CELLPHONE_FORMAT': alert("手機格式錯誤"); break; case 'ACCOUNT_EXIST': alert('此會員帳號重複。'); break; case 'ACCOUNT_ERROR': alert("帳號勿輸入中文,請輸入英數字8至20字元"); break; case 'RET_REPLY': alert("認證碼已經發送過,請在剩餘時間內完成驗證"); wrapper.find(".form-verify-countdown").data("time",res.time) wrapper.find(".form-verify-time").text(res.text) timeout(wrapper, method); // $('#CheckCode').show(); $('#Main_Form .form-btns-btn').removeClass("disabled").prop('disabled', false); break; case 'RET_OVER': alert("今日已達上限次數"); break; case 'ERROR': alert("資料庫忙碌中"); break; case 'API_ERROR': alert('帳號檢查失敗,請連繫客服'); break; case 'OK': //紀錄次數 sessionStorage.setItem(method,sms_times+1); alert("認證碼已發送") wrapper.find(".form-verify-countdown").data("time",res.time) wrapper.find(".form-verify-time").text(res.text) timeout(wrapper, method); // $('#CheckCode').show(); $("#SendCodeBtnSpan"+method).text('請收取認證碼'); $('#Main_Form .form-btns-btn').removeClass("disabled").prop('disabled', false); break; } }, error: function(){ alert("網路連線過慢,網頁請重新整理") } }) }else if(id === "CheckCode"){ $.ajax({ url: '/member/ajax/ajax_check_code-p.php', method: 'POST', dataType: 'json', data: { type: 'add', method: method, val: val, account: $('#Account').val(), name: $('#Name').val(), code: $('#SendCheck').val(), }, success: function(res){ switch(res.status){ case 'NO_NAME': alert("請輸入姓名"); break; case 'NO_ACCOUNT': alert("請輸入帳號"); break; case 'NO_METHOD': alert("請選擇驗證方式"); break; case 'NO_VAL': alert("請輸入手機號碼或E-mail"); break; case 'RET_OVER': alert("今日已達上限次數"); break; case 'CHECK_ERROR': alert("認證碼錯誤"); break; case 'ERROR': alert("資料庫忙碌中"); break; case 'OK': alert("驗證成功"); $('.form-verify-countdown').hide(); $('#Main_Form .form-btns-btn').removeClass("disabled").prop('disabled', false); break; } }, error: function(){ alert("網路連線過慢,網頁請重新整理") } }) } }) //============================================= // 寄送簡訊or手機認證碼 end //============================================= //============================================= // 條款跳窗 start //============================================= $(document).on("click", ".form-read-terms", function(){ let tid = $(this).data("tid"), nid = $(this).data("nid") $.ajax({ url: "/ajax/ajax_get_policy_terms.php", method: "POST", dataType: "json", data: { tid: tid, nid: nid }, success: function(res){ switch(res.status){ case 'OK': let popup = $(".popup-wrapper") popup.find(".popup-content").html(`
${res.Content}
`) popup.addClass("open") break; case 'ERROR': alert("資料庫忙碌中"); break; default: alert("資料庫忙碌中"); } }, error: function(){ alert("網路連線過慢,網頁請重新整理") } }) }) //============================================= // 條款跳窗 end //============================================= //============================================= // 徵信方式 切換 start //============================================= $(document).on("change", ".form-radio-input[name=Credit_Check]", function(){ //匿名不公開跳窗提示 if($(this).val() == 3){ $('#Notice_Credit_Check3').show(); }else{ $('#Notice_Credit_Check3').hide(); } }) //============================================= // 徵信方式 切換 end //============================================= $(document).on('click', '#same_member', function(){ //同會員資料 copy_member(); }); }); //姓名轉半型逗號 $(document).on('change', "#Name", function(){ var name = $(this).val(); name = name.replace(',',','); $(this).val(name); }); //第三步驟姓名取代 $(document).on('change', ".form-input[name='Name']", function(){ $(this).val($(this).val().replace(/,/g, ',')); }); //第三步驟稱謂切換 $(document).on('click', "input[name='Title_ID']", function(){ title = $(this).val(); if(title == '2'){ $('#ID_Card').attr('fun',''); $('.ID_Card_Block').hide(); $('#Tax_Number').attr('fun','isValidGUINull'); $('.Tax_Number_Block').show(); }else{ $('#ID_Card').attr('fun','checkPersonIDNull'); $('.ID_Card_Block').show(); $('#Tax_Number').attr('fun',''); $('.Tax_Number_Block').hide(); } }); var counter; function timeout(wrapper, method){ let countdown = wrapper.find(".form-verify-countdown") time = countdown.data('time'), timebox = wrapper.find(".form-verify-time") if(!countdown.hasClass("active")){ countdown.addClass("active") counter = setInterval(function(){ time--; if(time <= 0) { $("#SendCodeBtnSpan"+method).text('再次發送'); countdown.removeClass('active'); clearInterval(counter); } var min = Math.floor(time/60), second = time - (min*60), pad = '00'; timebox.text(pad.substring(min.toString().length)+min+":"+pad.substring(second.toString().length)+second) },1000) } } function copy_member(){ //收件人地址 $("#Rece_Name").val($("#Main_Form3").find("#Name").val()); $("#Rece_Full_Address").val($("#Full_Address").val()); //Rece_Address_Type $("#Rece_Address_Type").val($("#Address_Type").val()); if($("#Rece_Address_Type").val() == '1'){ $('#rece-switch-domestic').trigger('click'); }else if($("#Rece_Address_Type").val() == '2'){ $('#rece-switch-addressMail').trigger('click'); }else if($("#Rece_Address_Type").val() == '3'){ $('#rece-switch-overSeas').trigger('click'); } $("#Rece_Zip").val($("#Zip").val()); $("#Rece_Zip2").val($("#Zip2").val()); $("#Rece_City_ID option[value='"+$("#City_ID option:selected").val()+"']").prop("selected", true).trigger("change"); $("#Rece_Area_ID option[value='"+$("#Area_ID option:selected").val()+"']").prop("selected", true).trigger("change"); $("#Rece_City_ID2 option[value='"+$("#City_ID2 option:selected").val()+"']").prop("selected", true).trigger("change"); $("#Rece_Area_ID2 option[value='"+$("#Area_ID2 option:selected").val()+"']").prop("selected", true).trigger("change"); $("#Rece_Road_Section option[value='"+$("#Road_Section option:selected").val()+"']").prop("selected", true).trigger("change"); $("#Rece_Road").val($("#Road").val()); $("#Rece_Full_Address").val($("#Full_Address").val()); $("#Rece_Lane").val($("#Lane").val()); $("#Rece_Alley").val($("#Alley").val()); $("#Rece_Sub_Alley").val($("#Sub_Alley").val()); $("#Rece_Number").val($("#Number").val()); $("#Rece_Of_Number").val($("#Of_Number").val()); $("#Rece_Floor").val($("#Floor").val()); $("#Rece_Of_Floor").val($("#Of_Floor").val()); $("#Rece_Room").val($("#Room").val()); $("#Rece_Post_Address").val($("#Post_Address").val()); $("#Rece_Abroad_Address").val($("#Abroad_Address").val()); $(".form-receaddress-fullstring").text($(".form-address-fullstring").text()); $("#Main_Form").trigger("earlyCheck") }