AJAX

회원가입시에 핸드폰모델명 ajax를 이용해 같은화면에서 등록된 핸드폰사진보여주기, 아이디체크화면보여주기

어느멋진날♡ 2010. 11. 1. 14:45


<script type="text/javascript"> 

모델명을 입력받아오는 자바스크립트부분

function modelSearch() {
 
  if($('#hpModel').val() == "") {
   $('#searchModelMember').hide();  
  }
  else {
   $('#searchModelMember').show();
   $.get('<c:url value="../member/searchModelMember.rf"/>',
     {
      "model" : $('#hpModel').val()   
     }, function(data) {     
    $('#searchModelMember').html(data);       
   }); 
  }  
 }


 

아이디중복여부체크

 function idCheck() {
  if($('#memberId').val() == "") {
   $('#idCheckResult').hide();  
  }
  else {
   $('#idCheckResult').show();
   $.get('<c:url value="../member/idCheck.rf"/>',
     {
      "memberId" : $('#memberId').val()   
     }, function(data) {     
    $('#idCheckResult').html(data);       
   }); 
  }

 }


 

회원가입 자바스크립트
function doMemberJoin() {

  var f = document.memberJoinForm;

  if(f.memberId.value == '') {
   alert('아이디를 입력해주세요.');
   return;
  }

  else if(f.result.value == '가입불가능') {
   alert('동일한 아이디가 있습니다. 아이디를 확인해주세요.');
   return;
  }
  else if(f.memberPass.value == '') {
   alert('비밀번호를 입력해주세요.');
   return;
  }
  else if(f.hpNum1.value == '국번' || f.hpNum2.value == '' || f.hpNum3.value == '') {
   alert('핸드폰번호를 입력해주세요.');
   return;
  }
  else if(f.hpModel.value == '') {
   alert('핸드폰 모델을 입력해주세요.');
   return;
  } 
  else if(f.email.value == '' || f.email2.value == '선택') {
   alert('이메일을 입력해주세요.');
   return;
  }
  else if(f.addr.value == '') {
   alert('주소를 입력해주세요.');
   return;
  }
  else if(f.que.value == '선택') {
   alert('질문을 선택해주세요.');
   return;
  }
  else if(f.ans.value == '') {
   alert('답변을 입력해주세요.');
   return;
  }
  else {
   
   f.action = "../member/memberJoin.rf";
   f.method = "post";
   f.submit();
  }
 }


 </script>
</head>
<body>
 <div id="form">
  <tiles:insertAttribute name="header"/>
  <tiles:insertAttribute name="menu" />
  <tiles:insertAttribute name="leftMember" />
 <div id="wrap">
  <p class="memberJoinTitle">기본정보입력</p>
  <div id="memberWrap">
   <div class="joinTitle">
    <p>아이디</p>
    <p>패스워드</p>
    <p>이름</p>
    <p>주민등록번호</p>
    <p>핸드폰번호</p>
    <p>보유 휴대폰</p>
    <p>이메일</p>
    <p>주소</p>
    <p>질문</p>
    <p>답변</p>
   </div>
   <form name="memberJoinForm">
   <input type="hidden" name="name" value="${name}" />
   <input type="hidden" name="regNum" value="${regNum}" />
    <div class="joinInput">
 


아이디중복체크부분
<div id="firstInput">
<input type="text" name="memberId" onkeyup="idCheck()" id="memberId" />
      <div id="idCheckResult">
      </div>
</div>

   <input type="password" name="memberPass" class="inputName1" />
     
     <input type="text" name="name" value="${name}" class="noneInput" disabled="disabled" />
     
     <div id="memberJoinRegDiv">
      <input type="text" name="regNum" value="${fn:substringBefore(regNum, '-')}" disabled="disabled" class="noneInput1"/>
      -<input type="password" name="regNum" value="${fn:substringAfter(regNum, '-')}" disabled="disabled" class="noneInput1" />
     </div>
     
     <div class="hpInput">
      <select class="inputName3" name="hpNum1">
       <option selected="selected" value="국번">국번</option>
       <option value="010">010</option>
       <option value="011">011</option>
       <option value="016">016</option>
       <option value="017">017</option>
       <option value="018">018</option>
       <option value="019">019</option>
      </select>-
      <input type="text" name="hpNum2" class="inputName3" maxlength="4" />-
      <input type="text" name="hpNum3" class="inputName3" maxlength="4" />
     </div>
     

핸드폰모델보여주기
<input type="text" name="hpModel" id="hpModel" onkeyup="modelSearch()"/>
     <div id="searchModelMember">  
     </div>


     <input type="text" name="hpModel" id="hpModel" onkeyup="modelSearch()"/>
     <div id="searchModelMember">  
     </div>
     
     <div class="emailInput">
      <input type="text" name="email" class="inputName4" />@
      <input type="text" name="email1" class="inputName4" disabled="disabled"/>
      <select class="emailDropDown" name="email2" onchange="memberJoinForm.email1.value = email2.value;">
       <option selected="selected" value="선택">선택</option>
       <option value="hanmail.net">한메일</option>
       <option value="naver.com">네이버</option>
       <option value="nate.com">네이트</option>
       <option value="korea.com">Korea</option>
       <option value="hanafos.com">하나포스</option>
       <option value="dreamwiz.com">드림위즈</option>
       <option value="msn.com">MSN</option>
       <option value="netian.com">네띠앙</option>
       <option value="yahoo.co.kr">야후</option>
       <option value="empas.com">엠파스</option>
       <option value="chol.com">천리안</option>
       <option value="hotmail.com">핫메일</option>
      </select>
     </div>
     <input type="text" name="addr" class="inputName2" />
     
     <select class="inputName2" name="que">
      <option selected="selected" value="선택">선택</option>
      <option value="보물1호는?">보물1호는?</option>
      <option value="첫사랑의 이름은?">첫사랑의 이름은?</option>
      <option value="아버지 성함은?">아버지 성함은?</option>
      <option value="좋아하는 색깔은?">좋아하는 색깔은?</option>
     </select>
     <input type="text" name="ans" class="inputName2" />
    </div>
   </form>
  </div>
  <div id = "joinButtonDiv">
   <div class="joinButtonDiv1">
    <input type="button" value="확인" class="joinButton" onclick="doMemberJoin()" />
   </div>
   <div class="joinButtonDiv2">
    <input type="button" value="취소" class="joinButton" onclick="location.href='../refactoring/main.rf'" />
   </div>
  </div>
 </div>
</div>

 <tiles:insertAttribute name="footer" />
 
</body>
</html>