폼 관련 문의 드립니다.

폼 관련 문의 드립니다.

QA

폼 관련 문의 드립니다.

답변 1

본문

https://www.bigeventforyou.com/l-implant135roll

위 사이트를 카피하여 아래 사이트를 작업중입니다.

https://livelivem.com/livelive21/landing/2017/live2/

 

참고사이트와 같이 라디오를 선택하면 아래 항목이 나타나게 하려면 어떻게 해야할까요??

그리고 선택하지 않고 더알아보기 버튼을 누르면 선택하라는 경고창이 나오게도 해야합니다

 

고수분 계시면 소스안내를 부탁드리겠습니다..ㅜㅠㅜ

이 질문에 댓글 쓰기 :

답변 1


<div class="main">
    <form id="dbform" action="https://script.google.com/macros/s/AKfycbwBGbq4xJ11-KF5lWkwxHphevf5pQsucFT5miM-ZTvJrWOiugKw3EtZpe9b_YiMtoT_/exec" method="post">
        <input type="hidden" name="source" value="자체인스트림전체뼈이식포함">
        <input type="hidden" name="tel2" value=" ">
        <input type="hidden" name="tel3" value=" ">
        <input type="hidden" name="event" value="0000">
        
        <div id="section1" class="section active">
            <div class="left">
                <div class="msg">
                    안녕하세요! 본원에서는 고객님의 소중한 개인정보<br>를 상담 외 어떠한 목적으로도 사용하지 않습니다.
                </div>
            </div>
            <div class="right flex">
                <div class="msg">
                    <input type="checkbox" name="privacy" id="privacyCheckbox"> 
                    <span>이용약관에 동의합니다. <a href="http://liveliveh.com/etc/privacy.asp" target="_blank">약관보기</a></span>
                </div>
            </div>
        </div>
        <div id="section2" class="section active">
            <div class="left">
                <div class="msg">
                    <h2>필요한 임플란트 개수를 선택해주세요.</h2>
                </div>
            </div>
            <div class="right flex">
                <div class="form">
                    <div class="radio">
                        <input type="radio" name="needs" value="5개"> 5개
                    </div>
                    <div class="radio">
                        <input type="radio" name="needs" value="6개"> 6개
                    </div>
                    <div class="radio">
                        <input type="radio" name="needs" value="7개 이상"> 7개 이상
                    </div>
                    <div class="radio">
                        <input type="radio" name="needs" value="전체"> 전체
                    </div>
                </div>
            </div>
        </div>
        <div id="section3" class="section">
            <div class="left">
                <div class="msg">
                    <h2>거주 지역을 선택해주세요.</h2>
                </div>
            </div>
            <div class="right flex">
                <div class="form">
                    <div class="radio">
                        <input type="radio" id="강남" name="area_gubun" value="SG"> 서울 / 경기
                    </div>
                    <div class="radio">
                        <input type="radio" id="인천" name="area_gubun" value="IC"> 인천
                    </div>
                </div>
            </div>
        </div>
        <div id="section4" class="section">
            <div class="left">
                <div class="msg">
                    <h2>성함을 입력해주세요.</h2>
                </div>
            </div>
            <div class="right flex">
                <div class="form2">
                    <input type="text" id="input_nam" name="name" placeholder="성함을 입력해주세요.">
                </div>
            </div>
        </div>
        <div id="section5" class="section">
            <div class="left">
                <div class="msg">
                    <h2>연락처를 입력해주세요.</h2>
                </div>
            </div>
            <div class="right flex">
                <div class="form2">
                    <input type="text" id="전화번호" name="tel1" maxlength="11" placeholder="연락처를 입력해주세요.">
                </div>
            </div>
        </div>
        <div id="submitSection" class="section">
            <div class="button">
                <button type="button" id="submitButton">더알아보기</button>
            </div>
        </div>
    </form>
</div>
<style>
    .section { display: none; }
    .section.active { display: block; }
</style>
<script>
$(document).ready(function() {
    function checkSection(currentSection) {
        if (validateSection(currentSection)) {
            $('#section' + (currentSection + 1)).addClass('active');
        }
        if (currentSection === 5 && validateSection(5)) {
            $('#submitSection').addClass('active');
        }
    }
    function validateSection(section) {
        switch(section) {
            case 1:
                return $('#privacyCheckbox').is(':checked');
            case 2:
                return $('input[name="needs"]:checked').length > 0;
            case 3:
                return $('input[name="area_gubun"]:checked').length > 0;
            case 4:
                return $('#input_nam').val().trim() !== '';
            case 5:
                return $('#전화번호').val().trim() !== '';
            default:
                return false;
        }
    }
    function validateAllSections() {
        return validateSection(1) && validateSection(2) && validateSection(3) && 
               validateSection(4) && validateSection(5);
    }
    $('#privacyCheckbox').change(function() {
        checkSection(1);
    });
    $('input[name="needs"]').change(function() {
        checkSection(2);
    });
    $('input[name="area_gubun"]').change(function() {
        checkSection(3);
    });
    $('#input_nam').on('input', function() {
        $(this).val($(this).val().replace(/[^ㄱ-ㅎㅏ-ㅣ가-힣]/g, ''));
        checkSection(4);
    });
    $('#전화번호').on('input', function() {
        $(this).val($(this).val().replace(/[^0-9]/g, ''));
        checkSection(5);
    });
    $('#submitButton').click(function() {
        if (validateAllSections()) {
            $('#dbform').submit();
        } else {
            alert('모든 필드를 채워주세요.');
        }
    });
});
</script>
답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
filter #폼 ×
전체 95
© SIRSOFT
현재 페이지 제일 처음으로