ajax 로 값을 넘겨주려고 하는데 버튼 자체가 작동을 안 합니다.

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
ajax 로 값을 넘겨주려고 하는데 버튼 자체가 작동을 안 합니다.

QA

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>

현재 문서의 경로와 액션 문서의 경로가 정확히 어떻게 되는지요?

답변을 작성하시기 전에 로그인 해주세요.
전체 4,571
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT