input 선택 변경 질문드립니다.
본문
안녕하세요
input radio 버튼 선택에 따라
나오는 화면이 달라지게 해놨습니다.
소스는 아래와 같습니다.
<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
아래처럼 걸러보세요
if($(".aa02:checked").length && form.wr_2.value == ''){
alert("카드번호입력");
form.wr_2.focus();
return false;
}
$(".aa02").is(':checked')도 가능해요
답변감사합니다^^
첫번째 써주신건 반응이 없어서
아래 코멘트 달아주신걸로 해보니
걸러지긴 하는데
얼럿 후 완료창으로 그냥 넘어가버립니다. ㅠ
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 옵션을 선택한 경우에만 검사하도록 변경한 코드입니다.
$(".btn_submit").click(function(){
if($(".aa02").is(":checked") && $("#wr_2").val() == ''){
alert("카드번호를 입력해주세요.");
$("#wr_2").focus();
return false;
}
});
위 코드를 .btn_submit 버튼을 클릭할 때 실행되도록 바꾸어 사용하시면 됩니다.
aa02를 선택한 경우에만 wr_2의 값을 확인하고,
빈 값인 경우에는 알림창을 띄우고 입력 상자에 포커스를 맞춥니다.
챗GPT 답변입니다.