두 개의 스크립트 코드 중에서 하나만 실행이 됩니다.

두 개의 스크립트 코드 중에서 하나만 실행이 됩니다.

QA

두 개의 스크립트 코드 중에서 하나만 실행이 됩니다.

답변 1

본문

안녕하세요. 항상 도움을 받고 있습니다. 감사합니다. 제가 로그인 폼에서 이메일과 인증번호를 입력해서 로그인이 되게 수정을 했습니다. 이메일을 입력하고 인증번호 발송 버튼을 클릭하면 값을 ajax 로 넘겨줘서 이메일을 비교해서 랜덤으로 인증번호를 생성해서 이메일으로 발송해야 합니다. 그리고 아래에 5분 동안 타이머를 재는 코드를 추가해주었습니다. 그런데 위의 이메일 검사하는 코드는 실행이 되지 않습니다. 왜 그런지 알려 주실 수 있으실까요?
 

<div class="form-group has-feedback">

      <label for="mb_email"><b>이메일</b><strong class="sound_only"> 필수</strong></label>

      <div class="input-group">

        <input type="text" name="mb_email" id="mb_email" value="" required class="form-control input-sm" size="20" maxLength="50">

        <span class="input-group-btn">

          <button type="button" class="btn btn-color" id="sendVerificationCode" onclick="sendVerificationCode()">인증번호 발송</button>

        </span>

      </div>

      <div id="errorText" class="text-danger"></div> <!-- 오류 메시지를 표시할 영역 -->

    </div>

 

    <div class="form-group has-feedback">

      <label for="login_email"><b>인증번호</b><strong class="sound_only"> 필수</strong></label>

      <div class="input-group">

        <input type="number" name="mb_certification_number" id="mb_certification_number" required class="form-control input-sm" size="20" maxLength="20">

        <span class="input-group-btn">

          <button type="submit" class="btn btn-color" onclick="checkVerificationCode()">인증번호 확인</button>

        </span>

      </div>

      <div id="codeErrorText" class="text-danger"></div> <!-- 오류 메시지를 표시할 영역 -->

      <span class="timer" id="timer"></span> <!-- 타이머 시간을 표시할 영역 -->

    </div>  

 

    <script>

     function sendVerificationCode() {

       var idInput = document.getElementById("login_id");

       var emailInput = document.getElementById("mb_email");

       var passwordInput = document.getElementById("login_pw");

       

       var idValue = idInput.value.trim();

       var emailValue = emailInput.value.trim();

       var passwordValue = passwordInput.value.trim();

 

       var errorText = document.getElementById("errorText");

 

       if (idValue === "" || passwordValue === "") {

        errorText.textContent = "아이디와 비밀번호를 입력해주세요.";

        return; // 아이디나 비밀번호가 입력되지 않으면 함수 종료

      } else if (emailValue === "") {    

         errorText.textContent = "이메일을 입력해주세요.";

         return; // 이메일이 입력되지 않으면 함수 종료

       }

 

       // AJAX 요청

       var xhr = new XMLHttpRequest();

       xhr.onreadystatechange = function() {

         if (xhr.readyState === XMLHttpRequest.DONE) {

           if (xhr.status === 200) {

             var response = xhr.responseText;

             var errorText = document.getElementById("errorText");

 

             if (response === "id_not_found") {

               errorText.textContent = "잘못된 아이디나 비밀번호입니다.";

             }else if (response === "email_not_found") {

               errorText.textContent = "이메일을 다시 입력해주세요.";

             } else if (response === "success") {

               errorText.textContent = "인증번호가 발송되었습니다.";

             } else {

               errorText.textContent = "오류가 발생했습니다. 다시 시도해주세요.";

             }

             

             console.log(response); // 수정된 부분

           }

         }

       };

 

       xhr.open("POST", "login_sendVerificationCode.php", true);

       xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

       xhr.send("login_id=" + encodeURIComponent(idValue) + "&mb_email=" + encodeURIComponent(emailValue));

 

       return false;

     }

    </script>

 

    <script>

     var timer = null;

     var isRunning = false;

 

     $("#sendVerificationCode").on("click", function() {

      var display = $("#timer");

      // 유효시간 설정

      var leftSec = 300;

 

      // 타이머 실행 시에 버튼 비활성화

      if (!isRunning) { // 타이머가 실행 중이지 않은 경우에만

       $("#sendVerificationCode").prop("disabled", true); // 버튼 비활성화

       startTimer(leftSec, display);

      }

     });

 

     function startTimer(count, display) {

      var minutes, seconds;

      timer = setInterval(function () {

       minutes = parseInt(count / 60, 10);

       seconds = parseInt(count % 60, 10);

 

       minutes = minutes < 10 ? "0" + minutes : minutes;

       seconds = seconds < 10 ? "0" + seconds : seconds;

 

       display.html(minutes + ":" + seconds);

 

       // 타이머 끝

       if (--count < 0) {

        clearInterval(timer);

        display.html("인증시간이 초과되었습니다.");

        $("#sendVerificationCode").prop("disabled", true); // 타이머 종료 후 버튼 비활성화

        isRunning = false;

       }

      }, 1000);

      isRunning = true;

     }

    </script>  

 

이 질문에 댓글 쓰기 :

답변 1

수정 해드렸습니다.

 

function sendVerificationCode(){
  var emailInput = document.getElementById("mb_email");
  
  var emailValue = emailInput.value.trim();

  var errorText = document.getElementById("errorText");

  if(emailValue === ""){
    errorText.textContent = "이메일을 입력해주세요.";
    return;
  }

  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function(){
    if(xhr.readyState === XMLHttpRequest.DONE){
      if(xhr.status === 200){
        var response = xhr.responseText;
        if(response === "email_not_found"){
          errorText.textContent = "이메일을 다시 입력해주세요.";
        }else if(response === "success"){
          errorText.textContent = "인증번호가 발송되었습니다.";
        }else {
          errorText.textContent = "오류가 발생했습니다. 다시 시도해주세요.";
        }
      }
    }
  };

  xhr.open("POST", "login_sendVerificationCode.php", true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.send("mb_email=" + encodeURIComponent(emailValue));

  return false;
}

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 85
© SIRSOFT
현재 페이지 제일 처음으로