카페24 쇼핑몰 체크박스 필수
본문
안녕하세요.
카페24쇼핑몰은 처음이라 여기저기 찾아보고있는데도
해결이 안됩니다ㅠㅠ
기본 있는 코드에서 체크박스를 하나 더 만들어서 쓰고 싶습니다.
그런데 필수로 했는데도 그냥 제출되어서요..ㅠㅠ
required를 했는데도 안되서 스크립트도 추가해봤는데 안됩니다.
아래는 부분 코드이며
최하단에 전체코드입니다.
<tr class="agree {$config.is_login|display}">
<th scope="row">재판매 금지 동의</th>
<td>
<input type="hidden" name="checkbox" value="checkbox">
<label>
<input type="checkbox" name="checkbox" value="checkbox" id="checkbox" required>
회사 정책 상 본 사업자 몰에서 구입하신 제품의 온라인 재판매는 금하고 있습니다. 동의 시 클릭하신 뒤 글 작성을 완료해 주세요.
</label>
</td>
</tr>
<script type="text/javascript">
function validateCheckbox() {
var checkbox = document.getElementById('checkbox');
if (!checkbox.checked) {
alert('회사 정책에 동의해 주세요.');
return false; // 폼 제출을 막음
}
return true; // 폼 제출 허용
}
</script>
전체코드입니다
<!--@layout(/layout/basic/layout.html)-->
<div class="sub-visual sub01">
<div class="tit-box">
<h2 class="sub-title"></h2>
<h3>일상을 더 편리하고 안전하게</h3>
</div>
</div>
<!--<ul class="snb snb03">
</ul>-->
<div class="sub0301">
<section class="sub-section section01">
<div class="sub-container">
<div class="contents-tit-box">
<h5 class="small-tit"></h5>
<h5 class="big-tit"></h5>
</div>
<div class="contents-box">
<div module="board_writePackage_1002">
<!--@css(/css/module/board/writePackage.css)-->
<div module="board_title_1002">
<div class="path">
<span>현재 위치</span>
<ol>
<li><a href="/">홈</a></li>
<li><a href="/board/index.html">게시판</a></li>
<li title="현재 위치"><strong>{$board_name}</strong></li>
</ol>
</div>
<div class="titleArea">
<h2>{$board_title}</h2>
<p>{$board_info}</p>
<input type="hidden" id="board_name" value="{$board_name}">
</div>
</div>
<div module="board_write_1002">
<!--
$login_page_url = /member/login.html
$deny_access_url = /index.html
-->
<div class="ec-base-table typeWrite">
<table border="1" summary="">
<caption>글쓰기 폼</caption>
<colgroup>
<col style="width:130px;" />
<col style="width:auto;" />
</colgroup>
<tbody>
<tr>
<th scope="row">제목</th>
<td>{$form.board_category} {$form.subject} {$form.notice} {$form.is_post}</td>
</tr>
<tr class="{$config.is_login|display}">
<th scope="row">작성자</th>
<td>{$form.writer}</td>
</tr>
<tr class="{$config.use_write_email|display}">
<th scope="row">이메일</th>
<td>{$form.email}</td>
</tr>
<tr class="{$config.is_use_point|display}">
<th scope="row">평점</th>
<td>{$form.point}</td>
</tr>
<tr>
<td colspan="2" class="clear">
{$form.content}
</td>
</tr>
<tr class="ucc">
<th scope="row">UCC URL</th>
<td>{$form.ucc}</td>
</tr>
</tbody>
<tbody class="{$config.use_attach|display}">
<tr>
<th scope="row">첨부파일1</th>
<td>{$form.attach_file}</td>
</tr>
<tr>
<th scope="row">첨부파일2</th>
<td>{$form.attach_file}</td>
</tr>
<tr>
<th scope="row">첨부파일3</th>
<td>{$form.attach_file}</td>
</tr>
<tr>
<th scope="row">첨부파일4</th>
<td>{$form.attach_file}</td>
</tr>
<tr>
<th scope="row">첨부파일5</th>
<td>{$form.attach_file}</td>
</tr>
</tbody>
<tbody>
<tr class="{$config.use_password|display}">
<th scope="row">비밀번호</th>
<td>{$form.password} <span class="{$password_rule_help_display|display}">(영문 대소문자/숫자/특수문자 중 2가지 이상 조합, 10자~16자)</span></td>
</tr>
<tr class="{$config.use_secret|display}">
<th scope="row">비밀글설정</th>
<td>{$form.secure}</td>
</tr>
<tr class="captcha {$config.use_captcha_write|display}">
<th scope="row">보안문자</th>
<td>
{$captcha_image} {$captcha_refresh}
<p class="gBlank5">{$form.captcha} <span class="ec-base-help txtInfo">영문, 숫자 조합을 공백없이 입력하세요(대소문자구분)</span></p>
</td>
</tr>
<tr class="agree {$config.is_login|display}">
<th scope="row">재판매 금지 동의</th>
<td>
<input type="hidden" name="checkbox" value="checkbox">
<label>
<input type="checkbox" name="checkbox" value="checkbox" id="checkbox" required>
회사 정책 상 본 사업자 몰에서 구입하신 제품의 온라인 재판매는 금하고 있습니다. 동의 시 클릭하신 뒤 글 작성을 완료해 주세요.
</label>
</td>
</tr>
<tr class="agree {$config.is_login|display}">
<th scope="row">개인정보 수집 및 <br />이용 동의</th>
<td>
{$form.privacy_agreement}<br />
개인정보 수집 및 이용에 동의하십니까? {$form.privacy_agreement_radio}
</td>
</tr>
</tbody>
</table>
</div>
<ul class="info">
<li>상품과 관련없는 내용 또는 이미지, 욕설/비방, 개인정보유출, 광고/홍보글 등 적절하지 않은 게시물은 별도의 고지없이 비공개 처리 될 수 있습니다. </li>
<li>작성된 게시물(사진, 동영상 포함)은 운영 및 마케팅에 활용될 수 있습니다.</li>
</ul>
<div class="ec-base-button">
<span class="gLeft">
<span class="{$config.is_admin|display}"><a href="#none" class="btnNormal sizeS" onclick="{$action_comment_admin}">관리자 답변보기</a></span>
<a href="{$link_board_list}" class="btnNormalFix sizeS">목록</a>
</span>
<span class="gRight">
<a href="#none" class="btnSubmitFix sizeS" onclick="{$action_write}">등록</a>
<a href="{$link_board_list}" class="btnBasicFix sizeS">취소</a>
</span>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<script type="text/javascript">
function validateCheckbox() {
var checkbox = document.getElementById('checkbox');
if (!checkbox.checked) {
alert('회사 정책에 동의해 주세요.');
return false; // 폼 제출을 막음
}
return true; // 폼 제출 허용
}
$(document).ready(function() {
var tit = "";
var tit2 = "";
var tit3 = "";
var li = "";
var sub_no = 0;
switch($("#board_name").val()) {
case "공지사항":
tit = "CONTACT";
tit2 = "NOTICE";
tit3 = "애니락의 소식을 들어보세요!";
li = '<li><a href="/board/notice/1/">공지사항</a></li><li><a href="/board/product/4/">REVIEW</a></li><li><a href="/board/notice/2/">EVENT</a></li><li><a href="/board/notice/6/">Q&A</a></li><li><a href="/board/consult/9/">1:1 문의하기</a></li><li><a href="/board/galley/8/">사업자인증</a></li>';
break;
case "갤러리":
tit = "CONTACT";
tit2 = "CERTIFICATION";
tit3 = "모두에게 검증된 애니락!";
li = '<li><a href="/board/notice/1/">공지사항</a></li><li><a href="/board/product/4/">REVIEW</a></li><li><a href="/board/notice/2/">EVENT</a></li><li><a href="/board/notice/6/">Q&A</a></li><li><a href="/board/consult/9/">1:1 문의하기</a></li><li><a href="/board/galley/8/">사업자인증</a></li>';
break;
case "상품 사용후기":
tit = "REVIEW";
tit2 = "REVIEW";
tit3 = "다른 고객님들의 리얼리뷰를 확인해보세요!";
li = '<li><a href="/board/notice/1/">공지사항</a></li><li><a href="/board/product/4/">REVIEW</a></li><li><a href="/board/notice/2/">EVENT</a></li><li><a href="/board/notice/6/">Q&A</a></li><li><a href="/board/consult/9/">1:1 문의하기</a></li><li><a href="/board/galley/8/">사업자인증</a></li>';
break;
case "상품 Q&A":
tit = "CONTACT";
tit2 = "Q&A";
tit3 = "문의사항이 있으시면 언제든 말씀해주세요!";
li = '<li><a href="/board/notice/1/">공지사항</a></li><li><a href="/board/product/4/">REVIEW</a></li><li><a href="/board/notice/2/">EVENT</a></li><li><a href="/board/notice/6/">Q&A</a></li><li><a href="/board/consult/9/">1:1 문의하기</a></li><li><a href="/board/galley/8/">사업자인증</a></li>';
break;
case "이벤트":
tit = "CONTACT";
tit2 = "EVENT";
tit3 = "애니락의 특별한 이벤트!";
li = '<li><a href="/board/notice/1/">공지사항</a></li><li><a href="/board/product/4/">REVIEW</a></li><li><a href="/board/notice/2/">EVENT</a></li><li><a href="/board/notice/6/">Q&A</a></li><li><a href="/board/consult/9/">1:1 문의하기</a></li><li><a href="/board/galley/8/">사업자인증</a></li>';
break;
case "1:1 문의하기":
tit = "CONTACT";
tit2 = "CONTACT US";
tit3 = "1:1로 상담해드리겠습니다";
li = '<li><a href="/board/notice/1/">공지사항</a></li><li><a href="/board/product/4/">REVIEW</a></li><li><a href="/board/notice/2/">EVENT</a></li><li><a href="/board/notice/6/">Q&A</a></li><li><a href="/board/consult/9/">1:1 문의하기</a></li><li><a href="/board/galley/8/">사업자인증</a></li>';
break;
}
switch($("#board_name").val()) {
case "공지사항":
sub_no = 1;
break;
case "REVIEW":
sub_no = 2;
break;
case "EVENT":
sub_no = 3;
break;
case "Q&A":
sub_no = 4;
break;
case "1:1 문의하기":
sub_no = 5;
break;
case "사업자인증":
sub_no = 6;
break;
}
$(".sub-title").append(tit);
$(".small-tit").append(tit2);
$(".big-tit").append(tit3);
$(".snb").append(li);
$(".snb > li:nth-of-type("+sub_no+") > a").addClass('active');
});
</script>
답변 1
첫번째 방법 'required' 에 초점을 맞추었습니다.
동일한 id 의 히든 필드는 중복으로 문제가 될 가능성이 높습니다. -> 삭제
체크박스 name, id 변경 (필수는 아니지만 권장) 'checkbox' -> 'chk_agree'
<input type="hidden" name="checkbox" value="checkbox">
<label>
<input type="checkbox" name="checkbox" value="checkbox" id="checkbox" required>
회사 정책 상 본 사업자 몰에서 구입하신 제품의 온라인 재판매는 금하고 있습니다. 동의 시 클릭하신 뒤 글 작성을 완료해 주세요.
</label>
->
<label>
<input type="checkbox" name="chk_agree" value="checkbox" id="chk_agree" required>
회사 정책 상 본 사업자 몰에서 구입하신 제품의 온라인 재판매는 금하고 있습니다. 동의 시 클릭하신 뒤 글 작성을 완료해 주세요.
</label>
답변을 작성하시기 전에 로그인 해주세요.
