채택완료

input 선택 변경 질문드립니다.

안녕하세요

input radio 버튼 선택에 따라 

나오는 화면이 달라지게 해놨습니다.

 

소스는 아래와 같습니다.

 

 

Copy
<input type="radio" id="aa01" class="aa01" name="wr_1" value="가상계좌" onclick='getCheckboxValue(event)'/> 

<input type="radio" id="aa02" class="aa02" name="wr_1" value="카드" onclick='getCheckboxValue(event)'/> 

 

<div class="aa01_text">

계좌번호 출력

</div>

<div class="aa02_text">

<input type="text" id="wr_2" name="wr_2">

</div>

 

 

            <script>
            $(".aa01").click(function(){
              $(".aa01_text").css("display","block");
              $(".aa02_text").css("display", "none");
              $(".aa02_text").val("");
            });
            $(".aa02").click(function(){
              $(".aa02_text").css("display","block");
              $(".aa01_text").css("display", "none");
              $(".aa01_text").val("");
            });
             </script>

 

이런식으로 잘 사용중인데요

aa01 을 선택했을때는 계좌번호만 나와서 상관이 없는데

aa02 를 선택했을때는 input이 나오는 wr_2 가 필수입력이 되어야 합니다.

 

걸러주는 스크립트에서

            if(form.wr_2.value == ''){
            alert("카드번호입력");
           form.wr_2.focus();
           return false;
          }

이런식으로 하면

aa01을 눌러서 확인버튼을 눌러도 스크립트문이 떠버립니다.

 

가능한 방법이 없을까요?

 

|

답변 2개 / 댓글 3개

채택된 답변
+20 포인트

아래처럼 걸러보세요

Copy
if($(".aa02:checked").length && form.wr_2.value == ''){
    alert("카드번호입력");
    form.wr_2.focus();
    return false;
}

$(".aa02").is(':checked')도 가능해요

답변에 대한 댓글 3개

답변감사합니다^^
첫번째 써주신건 반응이 없어서
아래 코멘트 달아주신걸로 해보니
걸러지긴 하는데
얼럿 후 완료창으로 그냥 넘어가버립니다. ㅠ

if($(".aa02").is(':checked')){
alert("카드번호입력");
form.wr_2.focus();
return false;
}
if($(".aa02").is(':checked') && form.wr_2.value == ''){
alert("카드번호입력");
form.wr_2.focus();
return false;
}
감사합니다.
무슨이유인지
다른 부분은 걸러지는데
적어주신 부분만 걸러지지가 않네요ㅠ
제가 뭔가 잘못하고 있나봅니다.
제가 좀 더 연구해보겠습니다!

문제는 form.wr_2.value가 aa01 옵션에서도 존재하기 때문에 발생합니다. 
이를 해결하기 위해 조건문에서 wr_2 input 요소의 상태를 확인하고자 하는 input 요소의 상태를 함께 검사하도록 코드를 수정해야 합니다.
아래는 wr_2 input 요소의 상태를 확인하며 aa02 옵션을 선택한 경우에만 검사하도록 변경한 코드입니다.

Copy
$(".btn_submit").click(function(){
    if($(".aa02").is(":checked") && $("#wr_2").val() == ''){
        alert("카드번호를 입력해주세요.");
        $("#wr_2").focus();
        return false;
    }
});


위 코드를 .btn_submit 버튼을 클릭할 때 실행되도록 바꾸어 사용하시면 됩니다. 
aa02를 선택한 경우에만 wr_2의 값을 확인하고, 
빈 값인 경우에는 알림창을 띄우고 입력 상자에 포커스를 맞춥니다.

 

챗GPT 답변입니다.

답변을 작성하려면 로그인이 필요합니다.