폼 관련 문의 드립니다..ㅠㅠ 채택완료
이엠아이디
1년 전
조회 1,032
https://www.bigeventforyou.com/l-implant135roll" rel="nofollow noreferrer noopener" target="_blank">https://www.bigeventforyou.com/l-implant135roll
위 사이트를 카피하여 아래 사이트를 작업중입니다.
https://livelivem.com/livelive21/landing/2017/live2/" rel="nofollow noreferrer noopener" target="_blank">https://livelivem.com/livelive21/landing/2017/live2/
참고사이트와 같이 라디오를 선택하면 아래 항목이 나타나게 하려면 어떻게 해야할까요??
그리고 선택하지 않고 더알아보기 버튼을 누르면 선택하라는 경고창이 나오게도 해야합니다
위 올린 질문글에 어떤 감사한분이 소스 적어주셔서 복붙 했는데
작동을 안해서 다시 질문드립니다
어디가 잘못된걸까요??
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
채택된 답변
+20 포인트
미니님a
Expert
1년 전
http://sir.kr/data/editor/2410/2113539256_1727747289.1661.gif" width="100%" />
아래 코드 그대로 쓰시면 위 움짤 처럼 동작합니다.
</p>
<p><!DOCTYPE html></p>
<p><html lang="ko"></p>
<p><head></p>
<p> <meta charset="UTF-8"></p>
<p> <meta name="viewport" content="width=device-width, initial-scale=1.0"></p>
<p> <title>라이브치과</title></p>
<p> <style></p>
<p> @import url(<a href="http://fonts.googleapis.com/earlyaccess/notosanskr.css);" target="_blank" rel="noopener noreferrer">http://fonts.googleapis.com/earlyaccess/notosanskr.css);</a></p>
<p>@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');}</p>
<p> </p>
<p>@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');}</p>
<p> </p>
<p>@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');}</p>
<p> </p>
<p>@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');}</p>
<p> </p>
<p>@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');}</p>
<p> </p>
<p>@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');}</p>
<p>html{scroll-behavior: smooth;}</p>
<p>body, h1, h2, h3, h4, h5, h6, input, textarea, select {font-family: 'Noto Sans KR', sans-serif;}</p>
<p> *{margin:0;padding:0;}</p>
<p> .flex{display:flex;}</p>
<p> a{color: inherit;}</p>
<p> .container{width:660px;margin:0 auto;background-color: #d6eeff;}</p>
<p> .maintop img{vertical-align: bottom;}</p>
<p> .main{padding:25px;}</p>
<p> .main .left .msg{background-color: #fff;padding:15px;border-radius: 15px;width:70%;font-size:20px;}</p>
<p> .main .left .msg h2{font-size:26px;}</p>
<p> .main .right{justify-content: flex-end;}</p>
<p> .main .right span{font-size:22px;}</p>
<p> .main .right .msg input{width:22px;height:22px;}</p>
<p> .main .right .form input{width:22px;height:22px;}</p>
<p> .main .right .form2 input{width:99%;height:50px;font-size:27px;border:0;font-weight:bold;}</p>
<p> .main .right .msg{</p>
<p> text-align: center;</p>
<p> background-color: #ffdf00;</p>
<p> padding:15px;</p>
<p> border-radius: 15px;</p>
<p> width:60%;</p>
<p> font-size:20px;</p>
<p> margin:25px 0;</p>
<p> }</p>
<p> .main .right .form{</p>
<p> background-color: #ffdf00;</p>
<p> padding:15px;</p>
<p> border-radius: 15px;</p>
<p> width:40%;</p>
<p> font-size:26px;</p>
<p> margin:25px 0;</p>
<p> flex-direction: column;</p>
<p> font-weight:bold;</p>
<p> }</p>
<p> </p>
<p> .main .right .form2{</p>
<p> background-color: #fff;</p>
<p> padding:15px;</p>
<p> border-radius: 15px;</p>
<p> width:50%;</p>
<p> font-size:26px;</p>
<p> margin:25px 0;</p>
<p> flex-direction: column;</p>
<p> font-weight:bold;</p>
<p> }</p>
<p> </p>
<p> .button{text-align: center;margin-top:50px;}</p>
<p> .button button{border:0;</p>
<p> cursor: pointer;</p>
<p> background-color: #ffdf00;</p>
<p> font-size:50px;</p>
<p> font-weight:bold;</p>
<p> padding:10px 130px;</p>
<p> }</p>
<p> .section { display: none; }</p>
<p> .section.active { display: block; }</p>
<p> </style></p>
<p></head></p>
<p><body></p>
<p> <div class="container"></p>
<p> <div class="maintop"></p>
<p> <img src="img1.jpg" alt=""></p>
<p> </div></p>
<p> <div class="main"></p>
<p> <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"></p>
<p> <input type="hidden" name="source" value="자체인스트림전체뼈이식포함"></p>
<p> <input type="hidden" name="tel2" value=" "></p>
<p> <input type="hidden" name="tel3" value=" "></p>
<p> <input type="hidden" name="event" value="0000"></p>
<p> </p>
<p> <div id="section1" class="section active"></p>
<p> <div class="left"></p>
<p> <div class="msg"></p>
<p> 안녕하세요! 본원에서는 고객님의 소중한 개인정보
를 상담 외 어떠한 목적으로도 사용하지 않습니다.</p>
<p> </div></p>
<p> </div></p>
<p> <div class="right flex"></p>
<p> <div class="msg"></p>
<p> <input type="checkbox" checked name="privacy" id="privacyCheckbox"></p>
<p> <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></p>
<p> </div></p>
<p> </div></p>
<p> </div></p>
<p> <div id="section2" class="section active"></p>
<p> <div class="left"></p>
<p> <div class="msg"></p>
<p> <h2>필요한 임플란트 개수를 선택해주세요.</h2></p>
<p> </div></p>
<p> </div></p>
<p> <div class="right flex"></p>
<p> <div class="form"></p>
<p> <div class="radio"></p>
<p> <input type="radio" name="needs" value="5개"> 5개</p>
<p> </div></p>
<p> <div class="radio"></p>
<p> <input type="radio" name="needs" value="6개"> 6개</p>
<p> </div></p>
<p> <div class="radio"></p>
<p> <input type="radio" name="needs" value="7개 이상"> 7개 이상</p>
<p> </div></p>
<p> <div class="radio"></p>
<p> <input type="radio" name="needs" value="전체"> 전체</p>
<p> </div></p>
<p> </div></p>
<p> </div></p>
<p> </div></p>
<p> <div id="section3" class="section"></p>
<p> <div class="left"></p>
<p> <div class="msg"></p>
<p> <h2>거주 지역을 선택해주세요.</h2></p>
<p> </div></p>
<p> </div></p>
<p> <div class="right flex"></p>
<p> <div class="form"></p>
<p> <div class="radio"></p>
<p> <input type="radio" id="강남" name="area_gubun" value="SG"> 서울 / 경기</p>
<p> </div></p>
<p> <div class="radio"></p>
<p> <input type="radio" id="인천" name="area_gubun" value="IC"> 인천</p>
<p> </div></p>
<p> </div></p>
<p> </div></p>
<p> </div></p>
<p> <div id="section4" class="section"></p>
<p> <div class="left"></p>
<p> <div class="msg"></p>
<p> <h2>성함을 입력해주세요.</h2></p>
<p> </div></p>
<p> </div></p>
<p> <div class="right flex"></p>
<p> <div class="form2"></p>
<p> <input type="text" id="input_nam" name="name" placeholder="성함을 입력해주세요."></p>
<p> </div></p>
<p> </div></p>
<p> </div></p>
<p> <div id="section5" class="section"></p>
<p> <div class="left"></p>
<p> <div class="msg"></p>
<p> <h2>연락처를 입력해주세요.</h2></p>
<p> </div></p>
<p> </div></p>
<p> <div class="right flex"></p>
<p> <div class="form2"></p>
<p> <input type="text" id="전화번호" name="tel1" maxlength="11" placeholder="연락처를 입력해주세요."></p>
<p> </div></p>
<p> </div></p>
<p> </div></p>
<p> <div id="submitSection" class="section"></p>
<p> <div class="button"></p>
<p> <button type="button" id="submitButton">더알아보기</button></p>
<p> </div></p>
<p> </div></p>
<p> </form></p>
<p> </div></p>
<p> <script src="<a href="https://code.jquery.com/jquery-3.6.0.min.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-3.6.0.min.js"></script></a></p>
<p> <script></p>
<p> $(document).ready(function() {</p>
<p> function showNextSection(currentSection) {</p>
<p> $('#section' + (currentSection + 1)).addClass('active');</p>
<p> }</p>
<p> </p>
<p> function validateSection(section) {</p>
<p> switch(section) {</p>
<p> case 1:</p>
<p> return $('#privacyCheckbox').is(':checked');</p>
<p> case 2:</p>
<p> return $('input[name="needs"]:checked').length > 0;</p>
<p> case 3:</p>
<p> return $('input[name="area_gubun"]:checked').length > 0;</p>
<p> case 4:</p>
<p> return $('#input_nam').val().trim() !== '';</p>
<p> case 5:</p>
<p> return $('#전화번호').val().trim() !== '';</p>
<p> default:</p>
<p> return false;</p>
<p> }</p>
<p> }</p>
<p> </p>
<p> function validateAllSections() {</p>
<p> return validateSection(1) && validateSection(2) && validateSection(3) &&</p>
<p> validateSection(4) && validateSection(5);</p>
<p> }</p>
<p> </p>
<p> $('#privacyCheckbox').change(function() {</p>
<p> if ($(this).is(':checked')) {</p>
<p> showNextSection(1);</p>
<p> }</p>
<p> });</p>
<p> </p>
<p> $('input[name="needs"]').change(function() {</p>
<p> showNextSection(2);</p>
<p> });</p>
<p> </p>
<p> $('input[name="area_gubun"]').change(function() {</p>
<p> showNextSection(3);</p>
<p> });</p>
<p> </p>
<p> $('#input_nam').on('input', function() {</p>
<p> $(this).val($(this).val().replace(/[^ㄱ-ㅎㅏ-ㅣ가-힣]/g, ''));</p>
<p> if ($(this).val().trim() !== '') {</p>
<p> showNextSection(4);</p>
<p> }</p>
<p> });</p>
<p> </p>
<p> $('#전화번호').on('input', function() {</p>
<p> $(this).val($(this).val().replace(/[^0-9]/g, ''));</p>
<p> if ($(this).val().trim() !== '') {</p>
<p> showNextSection(5);</p>
<p> $('#submitSection').addClass('active');</p>
<p> }</p>
<p> });</p>
<p> </p>
<p> $('#submitButton').click(function() {</p>
<p> if (validateAllSections()) {</p>
<p> $('#dbform').submit();</p>
<p> } else {</p>
<p> alert('모든 필드를 채워주세요.');</p>
<p> }</p>
<p> });</p>
<p> });</p>
<p> </script></p>
<p> </p>
<p></body></p>
<p></html></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
이엠아이디
1년 전
정말 감사합니다!!
댓글을 작성하려면 로그인이 필요합니다.
1년 전
아래 항목들을 각각 div로 display none 해놓았다가, 순차적으로 radio 가 클릭되었을 때, 다음 단계 div의 display를 block 으로 변경해주세요.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
1년 전
제이쿼리로 한거 같아요
선택자는 id로 해도 되고 클래스로 해도됩니다.
#test 이런식으료
$('선택자').click(funcion() {
if(!$('#privacyCheckbox').is(':checked')) {
alert("dasdasd");
return false;
}
});
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
�
이엠아이디
1년 전
첫번쨰 라디오를 선택하면
참고사이트처럼 아래 새로운 항목이 나와야 합니다..ㅠ
참고사이트처럼 아래 새로운 항목이 나와야 합니다..ㅠ
�
리오닥터
1년 전
그부분을 $('선택자').toggle(); 로 해주세요
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인