<?

	include"inc_top.php";

	$MENU_CLASS1 = "li_first_on";
	$MENU_CLASS2 = "li_second";
	$MENU_CLASS3 = "li_second";
	$MENU_CLASS4 = "li_second";
	$MENU_CLASS5 = "li_second";

	require"inc_mypage_menu.php";  //마이페이지 메뉴
?>

<link rel="stylesheet" type="text/css" href="../sys_css_js/css_mypage.css"/>

<script>


$(document).ready(function()
{
		$("#mode").val("C");
		$("#idx").val("<?=$sessionIDX?>");
		$("#hanja_name").val("<?=$hanja_name?>");
		$("#en_name").val("<?=$en_name?>");
		$("#birthday").val("<?=$row[birthday]?>");
		$("#tel").val("<?=$row[tel]?>");
		$("#zip").val("<?=$row[zip]?>");
		$("#juso").val("<?=$row[juso]?>");
		//여백 클릭시 focus

		$(".int_hanja").click( function(){ $("#hanja_name").focus(); })
		$(".int_kana").click( function(){ $("#kana_name").focus(); })
		$(".int_birthday").click( function(){ $("#birthday").focus(); })
		$(".int_tel").click( function(){ $("#tel").focus(); })
		$(".int_zip").click( function(){ $("#zip").focus(); })
		$(".int_juso").click( function(){ $("#juso").focus(); })


		// birthday
		$("#birthday").change(function(){
			var notice= $("#notice_birthday");
			var format = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
				if(!format.test($(this).val()))
				{
					notice.css('color','#E35D63');
					notice.text("生年月日を再確認してください。"); // 생년월일을 다시 확인 해주세요.
					$('#birthday').focus();
				}else{
					notice.text("");
				}
		})

		// tel
		$("#tel").change(function(){
			var notice= $("#notice_tel");
			var format =/^\d{3,4}-\d{3,4}-\d{4}$/;
				if(!format.test($(this).val()))
				{
					notice.css('color','#E35D63');
					notice.text("誤っ携帯電話の番号です。数字、 - を含む数字のみを入力してください。"); //잘못된 휴대폰 번호입니다. 숫자, - 를 포함한 숫자만 입력하세요.
					$('#tel').focus();
				}else{
					notice.text("");
				}
		})


		$("#btn_join").click(function(){
				joinAction(validateForm());
		})
		function joinAction(val){
			//alert(val);
			if(val != false) {
				$('#form').attr('action','mypage_member_proc.php').submit();
			}
		}

		function validateForm() {


		}



		//엔터치면 다음 포커스
		$('input').keydown(function(e) {
			var idx = $('input').index(this);
			if (e.keyCode === 13) {
				$('input').eq(idx+1).focus();
				return false;
			}
		});


					validateForm();



}); //ready funtion
</script>



<SECTION>
 <ARTICLE>

  <div class="article_news_area">

  	<!-- LEFT -->
  	<?=$MYPAGE_LEFT ?>
   <!-- RIGHT -->
   <div class="myp_right">
    <h2>マイページ</h2>

    <div class="myp_right_menu_area">
     <div class="myp_right_menu">
      <?=$MYPAGE_MENU ?>
     </div>
    </div>






    <form id="form" name="form" method="post" enctype="multipart/form-data">
    <input type='hidden' id='mode' name='mode'>
    <input type='hidden' id='idx' name='idx'>

    <div id="join_area">

					<div class="join_box_title">
						<h2>会員情報</h2>
      <span>基本情報を編集できます。</span>
     </div>

     <div class="join_box">
      <div class="account_area" >
       <div class="title"><span style="font-size:1.2em; color:#349DF3;">会員情報</span> <span style="font-size:1.2em; color:#E35D63;">(選択)</span></div>
      </div>



     <div class="account_area" >
     	<div class="title">氏名(漢字) ※フルネーム</div>
      <div class="input_box int_hanja"><input type="text" name="hanja_name" id="hanja_name" size="30" maxlength="30" style="ime-mode:diable" class="text" placeholder="漢字で入力してください。"  /></div>
     </div>

     <div class="account_area" >
     	<div class="title">氏名(ローマ字) ※フルネーム</div>
      <div class="input_box int_en"><input type="text" name="en_name" id="en_name" size="30" maxlength="30" style="ime-mode:diable" class="text" placeholder="ローマ字で入力してください。"/></div>
     </div>

     <div class="account_area" >
     	<div class="title">生年月日</div>
      <div class="input_box int_birthday"><input type="text" name="birthday" id="birthday" size="30" maxlength="30" style="ime-mode:diable" class="text" placeholder="生年月日(2018-07-09)"  /></div>
			<p class="check" id="notice_birthday" style="font-size:0.9em;"></p>
     </div>

     <div class="account_area" >
     	<div class="title">電話番号</div>
      <div class="input_box int_tel"><input type="text" name="tel" id="tel" size="30" maxlength="50" style="ime-mode:diable" class="text" placeholder="数字で入力してください。EX) 090-1111-2222"  /></div>
      <p class="check" id="notice_tel" style="font-size:0.9em;"></p>
     </div>

     <div class="account_area" >
     	<div class="title">住所 ※都道府県から記入してください。</div>
      <div class="input_box int_zip"><input type="text" name="zip" id="zip" size="30" maxlength="10" style="ime-mode:diable" class="text" placeholder="郵便番号(213-234)"/></div>
      <div class="input_box int_juso"><input type="text" name="juso" id="juso" size="30" maxlength="100" style="ime-mode:diable" class="text" placeholder="漢字で入力してください。"/></div>
     </div>

						<div class="input_annotation">ストアの利用や会員カードと会員特典プレゼントを受け取るために入力する必要があります。<div style="position:absolute; top:-9px; left:0;"><img src="../images/sub/annotation_dir.png" width="14" height="9"  /></div></div>

     <div class="account_area" >
      <button type="button" class="btn_left" tabindex="5" onclick="location.href='./mypage.php'">キャンセル</button>
      <button type="button" id="btn_join" class="btn_right" tabindex="5">確認</button>
     </div>

					</div>
			 </div>
   </form>

			</div><!--div class="myp_right"-->
			<!-- RIGHT -->


	</ARTICLE>
</SECTION>






<?

	include"inc_bottom.php";

?>
 <!-- MOUSE ACTION -->
 </body>
 </html>