폼 관련 문의 드립니다..ㅠㅠ 채택완료
https://www.bigeventforyou.com/l-implant135roll
위 사이트를 카피하여 아래 사이트를 작업중입니다.
https://livelivem.com/livelive21/landing/2017/live2/
참고사이트와 같이 라디오를 선택하면 아래 항목이 나타나게 하려면 어떻게 해야할까요??
그리고 선택하지 않고 더알아보기 버튼을 누르면 선택하라는 경고창이 나오게도 해야합니다
위 올린 질문글에 어떤 감사한분이 소스 적어주셔서 복붙 했는데
작동을 안해서 다시 질문드립니다
어디가 잘못된걸까요??
답변 3개
채택된 답변
+20 포인트
1년 전
아래 코드 그대로 쓰시면 위 움짤 처럼 동작합니다.
Copy
라이브치과
@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; }
안녕하세요! 본원에서는 고객님의 소중한 개인정보
를 상담 외 어떠한 목적으로도 사용하지 않습니다.
이용약관에 동의합니다. 약관보기
필요한 임플란트 개수를 선택해주세요.
5개
6개
7개 이상
전체
거주 지역을 선택해주세요.
서울 / 경기
인천
성함을 입력해주세요.
연락처를 입력해주세요.
더알아보기
$(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('모든 필드를 채워주세요.');
}
});
});
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
무지개221년 전
아래 항목들을 각각 div로 display none 해놓았다가, 순차적으로 radio 가 클릭되었을 때, 다음 단계 div의 display를 block 으로 변경해주세요.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
비버팩토리1년 전
제이쿼리로 한거 같아요
선택자는 id로 해도 되고 클래스로 해도됩니다.
#test 이런식으료
$('선택자').click(funcion() {
if(!$('#privacyCheckbox').is(':checked')) {
alert("dasdasd");
return false;
}
});
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인