SIR
목록으로
이전글 다음글

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

이엠아이디
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전 조회 1,347
답변 3
목록

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

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

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

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

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

위 올린 질문글에 어떤 감사한분이 소스 적어주셔서 복붙 했는데

작동을 안해서 다시 질문드립니다

어디가 잘못된걸까요??

#소스

답변 3개

채택된 답변
+20 포인트

2113539256_1727747289.1661.gif

아래 코드 그대로 쓰시면 위 움짤 처럼 동작합니다.

Copy 
<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>라이브치과</title>

    <style>

        @import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');}

 

@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');}

 

@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');}

 

@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');}

 

@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');}

 

@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');}

html{scroll-behavior: smooth;}

body, h1, h2, h3, h4, h5, h6, input, textarea, select {font-family: 'Noto Sans KR', sans-serif;}

        *{margin:0;padding:0;}

        .flex{display:flex;}

        a{color: inherit;}

        .container{width:660px;margin:0 auto;background-color: #d6eeff;}

        .maintop img{vertical-align: bottom;}

        .main{padding:25px;}

        .main .left .msg{background-color: #fff;padding:15px;border-radius: 15px;width:70%;font-size:20px;}

        .main .left .msg h2{font-size:26px;}

        .main .right{justify-content: flex-end;}

        .main .right span{font-size:22px;}

        .main .right .msg input{width:22px;height:22px;}

        .main .right .form input{width:22px;height:22px;}

        .main .right .form2 input{width:99%;height:50px;font-size:27px;border:0;font-weight:bold;}

        .main .right .msg{

            text-align: center;

            background-color: #ffdf00;

            padding:15px;

            border-radius: 15px;

            width:60%;

            font-size:20px;

            margin:25px 0;

        }

        .main .right .form{

            background-color: #ffdf00;

            padding:15px;

            border-radius: 15px;

            width:40%;

            font-size:26px;

            margin:25px 0;

            flex-direction: column;

            font-weight:bold;

        }

 

        .main .right .form2{

            background-color: #fff;

            padding:15px;

            border-radius: 15px;

            width:50%;

            font-size:26px;

            margin:25px 0;

            flex-direction: column;

            font-weight:bold;

        }

 

        .button{text-align: center;margin-top:50px;}

        .button button{border:0;

        cursor: pointer;

        background-color: #ffdf00;

        font-size:50px;

        font-weight:bold;

        padding:10px 130px;

    }

    .section { display: none; }

    .section.active { display: block; }

    </style>

</head>

<body>

    <div class="container">

        <div class="maintop">

            <img src="img1.jpg" alt="">

        </div>

        <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" checked 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>

        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

        <script>

        $(document).ready(function() {

            function showNextSection(currentSection) {

                $('#section' + (currentSection + 1)).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() {

                if ($(this).is(':checked')) {

                    showNextSection(1);

                }

            });

           

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

                showNextSection(2);

            });

           

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

                showNextSection(3);

            });

           

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

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

                if ($(this).val().trim() !== '') {

                    showNextSection(4);

                }

            });

           

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

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

                if ($(this).val().trim() !== '') {

                    showNextSection(5);

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

                }

            });

           

            $('#submitButton').click(function() {

                if (validateAllSections()) {

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

                } else {

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

                }

            });

        });

        </script>

       

</body>

</html>
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

정말 감사합니다!!

댓글을 작성하려면 로그인이 필요합니다.

아래 항목들을 각각 div로 display none 해놓았다가, 순차적으로 radio 가 클릭되었을 때, 다음 단계 div의 display를 block 으로 변경해주세요.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

제이쿼리로 한거 같아요

선택자는 id로 해도 되고 클래스로 해도됩니다.

#test 이런식으료

$('선택자').click(funcion() {

if(!$('#privacyCheckbox').is(':checked')) {

alert("dasdasd");

return false;

}

});

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

첫번쨰 라디오를 선택하면
참고사이트처럼 아래 새로운 항목이 나와야 합니다..ㅠ
그부분을 $('선택자').toggle(); 로 해주세요

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고