(자바스크립트)기타를 선택했을때 빈칸을 채우고 싶습니다.

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
(자바스크립트)기타를 선택했을때 빈칸을 채우고 싶습니다.

QA

(자바스크립트)기타를 선택했을때 빈칸을 채우고 싶습니다.

답변 2

본문

아래와 같은 소스가 있습니다.

(중요하지 않은 일부는 제외하였습니다.)

 

    <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>
답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
이전 아이콘
다음 아이콘
전체 0
로딩중
© SIRSOFT
현재 페이지 제일 처음으로