ajax 로 값을 넘겨주려고 하는데 버튼 자체가 작동을 안 합니다.
본문
<form class="form" role="form" name="flogin" action="<?php echo $login_action_url ?>" onsubmit="return flogin_submit(this);" method="post">
<input type="hidden" name="url" value='<?php echo $login_url ?>'>
<div class="form-group has-feedback">
<label for="login_id"><b>아이디</b><strong class="sound_only"> 필수</strong></label>
<input type="text" name="mb_id" id="login_id" required class="form-control input-sm" size="20" maxLength="20">
<span class="fa fa-user form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<label for="login_pw"><b>비밀번호</b><strong class="sound_only"> 필수</strong></label>
<input type="password" name="mb_password" id="login_pw" required class="form-control input-sm" size="20" maxLength="20">
<span class="fa fa-lock form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<label for="mb_hp"><b>휴대폰번호</b><strong class="sound_only"> 필수</strong></label>
<div class="input-group">
<input type="text" name="mb_hp" id="mb_hp" required class="form-control input-sm" size="20" maxLength="20">
<span class="input-group-btn">
<button type="button" class="btn btn-color" id="btn_send_code_hp" onclick="send_code_hp()">인증번호 발송</button>
</span>
</div>
<div id="error_text" class="text-danger"></div> <!-- 오류 메시지를 표시할 영역 -->
</div>
<div class="row">
<div class="col-xs-6">
<label class="checkbox-inline remember-me">
<input type="checkbox" name="auto_login" id="login_auto_login"> 자동로그인
</label>
</div>
<div class="col-xs-6">
<button type="submit" class="btn btn-color pull-right"><i class="fa fa-sign-in fa-lg"></i> 로그인</button>
</div>
</div>
</form>
<script>
function send_code_hp(){
var input_id = document.getElementById("mb_id").value.trim();
var input_hp = document.getElementById("mb_hp").value.trim();
var error_text = document.getElementById("error_text");
if(input_id === "" || input_hp === ""){
error_text.textContent = "로그인 정보를 입력하세요.";
}else{
// AJAX 요청을 보내는 부분
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === XMLHttpRequest.DONE){
if(xhr.status === 200){
var response = xhr.responseText;
var error_text = document.getElementById("error_text");
if(response === "id_not_found" || response === "hp_not_found"){
error_text.textContent = "잘못된 로그인 정보입니다."
}else if(response === "success"){
error_text.textContent = "인증번호가 발송되었습니다.";
$("#btn_send_code_hp").prop("disabled", true); // 인증번호 발송 후 버튼 비활성화
}else{
error_text.textContent = "오류가 발생했습니다. 다시 시도해주세요.";
}
console.log(response); // response 결과
}
}
};
xhr.open("POST", "send_code_hp.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("mb_id=" + encodeURIComponent(input_id) + "&mb_hp=" + encodeURIComponent(input_hp));
return false;
}
}
</script>
이렇게 입력한 값을 ajax 로 넘겨주고 넘겨준 값의 응답에 따라서
<?php
include_once('./_common.php');
include_once(G5_SMS5_PATH . '/sms5.lib.php');
if(isset($_POST['mb_id']) && isset($_POST['mb_hp'])) {
$mb_id = $_POST['mb_id'];
$mb_hp = $_POST['mb_hp'];
$sql = " SELECT * FROM g5_member WHERE mb_id = '$mb_id'";
$row = sql_fetch($sql);
if(!$row['mb_id']){
echo "id_not_found";
}else if(!$row['mb_hp']){
echo "hp_not_found";
}
}
?>
값을 반환하려고 하는데 값이 ajax 로 보내지지 않습니다. ajax 로 받는 파일의 위치는 bbs 로 했는데 이거랑은 상관 없는거 같고 .. 왜 ajax 로 값이 전달이 안될까요?
답변 3
document.getElementById("mb_id")
-> document.getElementById("login_id")
<script>
function send_code_hp() {
var input_id = $('#login_id').val();
var input_hp = $('#mb_hp').val();
var error_text = $('#error_text');
if (input_id == "" || input_hp == "") {
$('#error_text').text("로그인 정보를 입력하세요.");
}
$.ajax({
url: './send_code_hp.php',
type: 'POST',
data: {mb_id : input_id, mb_hp : input_hp},
success: function(response) {
if (response == "id_not_found" || response == "hp_not_found") {
$('#error_text').text("잘못된 로그인 정보입니다.");
} else if (response == "success") {
$('#error_text').text("인증번호가 발송되었습니다.");
$("#btn_send_code_hp").prop("disabled", true);
} else {
$('#error_text').text("오류가 발생했습니다. 다시 시도해주세요.");
}
console.log(response);
}
});
}
</script>
let url = "mb_id=" + input_id + "&mb_hp=" + input_hp";
xhr.send(encodeURI(url));
이렇게 해보십시요.
현재 문서의 경로와 액션 문서의 경로가 정확히 어떻게 되는지요?