그런데 탭 안에 라디오 버튼 선택하지 않으면 다음으로 넘어가지 못하게 하려면 어떻게 해야하나요?
본문
write.skin.php 에서 글을 작성합니다.
탭(tab)로 구분을 했습니다.
그런데 탭 안에 라디오 버튼 선택하지 않으면 다음으로 넘어가지 못하게 하려면 어떻게 해야하나요?
<button type="button" id="prevBtn" onclick="nextPrev(-1)">이전 페이지</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">다음 페이지</button>
위의 다름 페이지를 클릭했을 때 선택을 안하면 다음페이지로 넘어가지 않게 하는
스트립트는 어떻게 하면 되나요?
======================================
<!-- 게시물 작성/수정 시작 { -->
<form name="fwrite" id="fwrite" action="<?php echo $action_url ?>" onsubmit="return fwrite_submit(this);" method="post" enctype="multipart/form-data" autocomplete="off" style="width:<?php echo $width; ?>">
<input type="hidden" name="uid" value="<?php echo get_uniqid(); ?>">
<input type="hidden" name="w" value="<?php echo $w ?>">
<input type="hidden" name="bo_table" value="<?php echo $bo_table ?>">
<input type="hidden" name="wr_id" value="<?php echo $wr_id ?>">
<input type="hidden" name="sca" value="<?php echo $sca ?>">
<input type="hidden" name="sfl" value="<?php echo $sfl ?>">
<input type="hidden" name="stx" value="<?php echo $stx ?>">
<input type="hidden" name="spt" value="<?php echo $spt ?>">
<input type="hidden" name="sst" value="<?php echo $sst ?>">
<input type="hidden" name="sod" value="<?php echo $sod ?>">
<input type="hidden" name="page" value="<?php echo $page ?>">
<div class="tab"><!-- 탭 1 시작 -->
<input type="radio" class="btn-check" name="wr_1" id="groupradio1" autocomplete="off" value="aaa" <?php echo $wr_1 == “aaa” ? " checked" : "";?> required>
<input type="radio" class="btn-check" name="wr_2” id="groupradio1" autocomplete="off" value="aaa" <?php echo $wr_2 == “aaa” ? " checked" : "";?> required>
<input type="radio" class="btn-check" name="wr_3” id="groupradio1" autocomplete="off" value="aaa" <?php echo $wr_3 == “aaa” ? " checked" : "";?> required>
</div><!-- 탭 1 끝 -->
<div class="tab"><!-- 탭 2 시작 -->
<input type="radio" class="btn-check" name="wr_4" id="groupradio1" autocomplete="off" value="aaa" <?php echo $wr_4 == “aaa” ? " checked" : "";?> required>
<input type="radio" class="btn-check" name="wr_5” id="groupradio1" autocomplete="off" value="aaa" <?php echo $wr_5 == “aaa” ? " checked" : "";?> required>
<input type="radio" class="btn-check" name="wr_6” id="groupradio1" autocomplete="off" value="aaa" <?php echo $wr_6 == “aaa” ? " checked" : "";?> required>
</div><!-- 탭 2 끝 -->
<div class="tab"><!-- 탭 13 시작 -->
<input type="radio" class="btn-check" name="wr_7" id="groupradio1" autocomplete="off" value="aaa" <?php echo $wr_7 == “aaa” ? " checked" : "";?> required>
<input type="radio" class="btn-check" name="wr_8” id="groupradio1" autocomplete="off" value="aaa" <?php echo $wr_8 == “aaa” ? " checked" : "";?> required>
<input type="radio" class="btn-check" name="wr_9” id="groupradio1" autocomplete="off" value="aaa" <?php echo $wr_9 == “aaa” ? " checked" : "";?> required>
</div><!-- 탭 3 끝 -->
<!-- 멀티 스텝 작업 시작 -->
<div class="thanks-message text-center" id="text-message"> <img src="https://i.imgur.com/O18mJ1K.png" width="100" class="mb-4">
<h3>aaaaaaa</h3> <span>답변 감사합니다.^-^</span>
</div>
<div style="overflow:auto;" id="nextprevious">
<div class="btn_confirm write_div" >
<button type="button" id="prevBtn" onclick="nextPrev(-1)">이전 페이지</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">다음 페이지</button>
</div>
</div>
<!-- 멀티 스텝 작업 끝 -->
<!-- 멀티 스텝 작업 시작 -->
<div class="btn_confirm write_div mt-3">
<a href="<?php echo get_pretty_url($bo_table); ?>" class="btn_cancel btn">취소</a>
<button type="submit" id="btn_submit" accesskey="s" class="btn_submit btn">작성완료</button>
</div>
</form>
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js'></script>
<script type='text/javascript'>//your javascript goes here
var currentTab = 0;
document.addEventListener("DOMContentLoaded", function(event) {
showTab(currentTab);
});
function showTab(n) {
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
// document.getElementById("nextBtn").innerHTML = "Submit";
document.getElementById("nextBtn").style.display = "none";
} else {
document.getElementById("nextBtn").innerHTML = "다음 페이지";
}
fixStepIndicator(n)
}
function nextPrev(n) {
var x = document.getElementsByClassName("tab");
if (n == 1 && !validateForm()) return false;
x[currentTab].style.display = "none";
currentTab = currentTab + n;
if (currentTab >= x.length) {
// document.getElementById("regForm").submit();
// return false;
//alert("sdf");
document.getElementById("nextprevious").style.display = "none";
document.getElementById("all-steps").style.display = "none";
document.getElementById("register").style.display = "none";
document.getElementById("text-message").style.display = "block";
}
showTab(currentTab);
}
function validateForm() {
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
for (i = 0; i < y.length; i++) { if (y[i].value=="" ) { y[i].className +=" invalid" ; valid=false; } } if (valid) { document.getElementsByClassName("step")[currentTab].className +=" finish" ; } return valid; } function fixStepIndicator(n) { var i, x=document.getElementsByClassName("step"); for (i=0; i < x.length; i++) { x[i].className=x[i].className.replace(" active", "" ); } x[n].className +=" active" ; }
</script>
<!-- 멀티 스텝 작업 끝 -->
<script>
<?php if($write_min || $write_max) { ?>
// 글자수 제한
var char_min = parseInt(<?php echo $write_min; ?>); // 최소
var char_max = parseInt(<?php echo $write_max; ?>); // 최대
check_byte("wr_content", "char_count");
$(function() {
$("#wr_content").on("keyup", function() {
check_byte("wr_content", "char_count");
});
});
<?php } ?>
function html_auto_br(obj)
{
if (obj.checked) {
result = confirm("자동 줄바꿈을 하시겠습니까?\n\n자동 줄바꿈은 게시물 내용중 줄바뀐 곳을<br>태그로 변환하는 기능입니다.");
if (result)
obj.value = "html2";
else
obj.value = "html1";
}
else
obj.value = "";
}
function fwrite_submit(f)
{
<?php echo $editor_js; // 에디터 사용시 자바스크립트에서 내용을 폼필드로 넣어주며 내용이 입력되었는지 검사함 ?>
var subject = "";
var content = "";
$.ajax({
url: g5_bbs_url+"/ajax.filter.php",
type: "POST",
data: {
"subject": f.wr_subject.value,
"content": f.wr_content.value
},
dataType: "json",
async: false,
cache: false,
success: function(data, textStatus) {
subject = data.subject;
content = data.content;
}
});
if (subject) {
alert("제목에 금지단어('"+subject+"')가 포함되어있습니다");
f.wr_subject.focus();
return false;
}
if (content) {
alert("내용에 금지단어('"+content+"')가 포함되어있습니다");
if (typeof(ed_wr_content) != "undefined")
ed_wr_content.returnFalse();
else
f.wr_content.focus();
return false;
}
if (document.getElementById("char_count")) {
if (char_min > 0 || char_max > 0) {
var cnt = parseInt(check_byte("wr_content", "char_count"));
if (char_min > 0 && char_min > cnt) {
alert("내용은 "+char_min+"글자 이상 쓰셔야 합니다.");
return false;
}
else if (char_max > 0 && char_max < cnt) {
alert("내용은 "+char_max+"글자 이하로 쓰셔야 합니다.");
return false;
}
}
}
<?php echo $captcha_js; // 캡챠 사용시 자바스크립트에서 입력된 캡챠를 검사함 ?>
document.getElementById("btn_submit").disabled = "disabled";
return true;
}
</script>
답변 4
우선 라디오 버튼 용도가 틀렸습니다
name이 동일한 것 중에서 하나만 선택할때 사용하는 것인데 name이 제각각이니 라디오 버튼으로하는 의도를 모르겠네요
균이님, 무슨 말씀인지 알겠습니다.
그런데,
선택을 안했을 때
탭으로 다음 페이지로 이동 할 수 없게 하려면 어떻게 해야하나요?
균이님, 답변 감사합니다.
균이님, 답변 감사합니다.
