폼 관련 문의 드립니다. 채택완료

</p>

<p><div class="main">

    <form id="dbform" action="<a href="https://script.google.com/macros/s/AKfycbwBGbq4xJ11-KF5lWkwxHphevf5pQsucFT5miM-ZTvJrWOiugKw3EtZpe9b_YiMtoT_/exec"" target="_blank" rel="noopener noreferrer">https://script.google.com/macros/s/AKfycbwBGbq4xJ11-KF5lWkwxHphevf5pQsucFT5miM-ZTvJrWOiugKw3EtZpe9b_YiMtoT_/exec"</a> 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">

                    안녕하세요! 본원에서는 고객님의 소중한 개인정보
를 상담 외 어떠한 목적으로도 사용하지 않습니다.

                </div>

            </div>

            <div class="right flex">

                <div class="msg">

                    <input type="checkbox" name="privacy" id="privacyCheckbox"> 

                    <span>이용약관에 동의합니다. <a href="<a href="http://liveliveh.com/etc/privacy.asp"" target="_blank" rel="noopener noreferrer">http://liveliveh.com/etc/privacy.asp"</a> target="_blank">약관보기</a></span>

                </div>

            </div>

        </div></p>

<p>        <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></p>

<p>        <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></p>

<p>        <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></p>

<p>        <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></p>

<p>        <div id="submitSection" class="section">

            <div class="button">

                <button type="button" id="submitButton">더알아보기</button>

            </div>

        </div>

    </form>

</div></p>

<p><style>

    .section { display: none; }

    .section.active { display: block; }

</style></p>

<p><script>

$(document).ready(function() {

    function checkSection(currentSection) {

        if (validateSection(currentSection)) {

            $('#section' + (currentSection + 1)).addClass('active');

        }

        if (currentSection === 5 && validateSection(5)) {

            $('#submitSection').addClass('active');

        }

    }</p>

<p>    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;

        }

    }</p>

<p>    function validateAllSections() {

        return validateSection(1) && validateSection(2) && validateSection(3) && 

               validateSection(4) && validateSection(5);

    }</p>

<p>    $('#privacyCheckbox').change(function() {

        checkSection(1);

    });</p>

<p>    $('input[name="needs"]').change(function() {

        checkSection(2);

    });</p>

<p>    $('input[name="area_gubun"]').change(function() {

        checkSection(3);

    });</p>

<p>    $('#input_nam').on('input', function() {

        $(this).val($(this).val().replace(/[^ㄱ-ㅎㅏ-ㅣ가-힣]/g, ''));

        checkSection(4);

    });</p>

<p>    $('#전화번호').on('input', function() {

        $(this).val($(this).val().replace(/[^0-9]/g, ''));

        checkSection(5);

    });</p>

<p>    $('#submitButton').click(function() {

        if (validateAllSections()) {

            $('#dbform').submit();

        } else {

            alert('모든 필드를 채워주세요.');

        }

    });

});

</script></p>

<p>