두 개의 스크립트 코드 중에서 하나만 실행이 됩니다.
본문
안녕하세요. 항상 도움을 받고 있습니다. 감사합니다. 제가 로그인 폼에서 이메일과 인증번호를 입력해서 로그인이 되게 수정을 했습니다. 이메일을 입력하고 인증번호 발송 버튼을 클릭하면 값을 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;
}