(자바스크립트)기타를 선택했을때 빈칸을 채우고 싶습니다.
본문
아래와 같은 소스가 있습니다.
(중요하지 않은 일부는 제외하였습니다.)
<input type="radio" name="choice" value="선택1">선택1
<input type="radio" name="choice" value="선택2">선택2
<input type="radio" name="choice" value="기타">기타
<input type="text" name="choice_etc" id="choice_etc" >
<script>
if (!$("input[name='choice']").is(':checked')) {
alert("종류를 선택하세요.");
$("choice").focus();
return false;
}
</script>
선택을 하지 않으면 아래쪽 스크립트에서 "종류를 선택하세요"라는
메세지를 띄우는것입니다.
하고 싶은것은
기타를 선택했을때 텍스트박스를 꼭 채우게 하고 싶습니다.
기타를 선택한 후에 choice_etc 텍스트박스가 비어있으면
"기타 내용을 적어주세요"라는 메세지를 띄우려면
스크립트에 어떤것을 추가해야 할까요?
도움을 기다립니다.
감사합니다.
답변 2
<script>
// 폼 제출 시 유효성 검사
$('form').on('submit', function(e) {
// 라디오 버튼 선택 여부 확인
if (!$("input[name='choice']").is(':checked')) {
alert("종류를 선택하세요.");
return false;
}
// '기타' 선택 시 텍스트박스 필수 입력 확인
if ($("input[name='choice']:checked").val() === '기타') {
if ($("#choice_etc").val().trim() === '') {
alert("기타 내용을 적어주세요.");
$("#choice_etc").focus();
return false;
}
}
});
</script>
답변감사드립니다. 작동 잘 합니다.
하나만 더 여쭤보겠습니다.
라디오버튼일때에는 주신 소스가 작동을 잘 하네요
근데 폼중에 체크박스도 있어서 여기에도 똑같이 적용했더니
체크박스에서는 작동을 안하네요 (중복선택이 되었을때 작동을 안합니다.)
체크박스는 아래와 같습니다.
<input type="checkbox" name="choice2[]" id="choice2" value="선택1">
<input type="checkbox" name="choice2[]" id="choice2" value="기타">
<input type="text" name="choice2_etc" id="choice2_etc">
<script>
$('form').on('submit', function(e) {
// 체크박스 최소 선택 개수 확인
var checkedBoxes = $("input[name='choice']:checked");
// 최소 1개 선택 강제
if (checkedBoxes.length === 0) {
alert("최소 한 개 이상의 항목을 선택해주세요.");
return false;
}
// 최대 선택 개수 제한 (예: 최대 3개)
if (checkedBoxes.length > 3) {
alert("최대 3개까지만 선택 가능합니다.");
return false;
}
// '기타' 체크박스 선택 시 텍스트박스 필수 입력 확인
if ($("#choice_etc_checkbox").is(':checked')) {
if ($("#choice_etc").val().trim() === '') {
alert("기타 내용을 적어주세요.");
$("#choice_etc").focus();
return false;
}
}
});
</script>
<script>
if (!$("input[name='choice']").is(':checked')) {
alert("종류를 선택하세요.");
$("choice").focus();
return false;
}
if ($("input[name='choice']:checked").val() == "기타" && $("#choice_etc").val() == "") {
alert("기타 내용을 적어주세요.");
$("#choice_etc").focus();
return false;
}
</script>
답변을 작성하시기 전에 로그인 해주세요.