버튼을 on off 껏다 켰다로 submit할수 있는 방식이 궁금해요
본문
회원 여분필드인 mb_10에 버튼으로 on값과 off값을 회원이 클릭하면 넣어주려고 해요.
이유는 알림오는게 싫다는 회원들도 있고 좋다는 회원들도 있어서
회원여분필드값 mb_10에 on이든 off든 데이터를 받아
그 기준으로 보여주던지 안보여주던지 하려고 하는데
<form method="post" action="<?=$g5['path']?>/bbs/update_mb_10.php">
<div class="form-group">
<label for="mb_10">mb_10 회원 필드</label>
<input type="hidden" id="mb_10" name="mb_10" value="<?php echo $mb_10; ?>">
<button type="button" id="toggle_mb_10" onclick="toggleMb10()"><?php echo ($mb_10 == 'on') ? 'On' : 'Off'; ?></button>
</div>
<button type="submit">확인</button>
</form>
<script>
function toggleMb10() {
var mb10Button = document.getElementById("toggle_mb_10");
var mb10Input = document.getElementById("mb_10");
// 현재 mb_10 값 확인
var currentMb10Value = mb10Input.value;
// "on"과 "off" 값을 토글합니다.
if (currentMb10Value === "on") {
mb10Input.value = "off";
mb10Button.innerHTML = "Off";
} else {
mb10Input.value = "on";
mb10Button.innerHTML = "On";
}
}
</script>
현재는 기본적인 모습으로만 해보고 있고 mb_10에 값이 입력들어오는걸 확인했어요
그런데 저렇게 하면 현재 버튼이 아래그림 처럼 두개가 되서
on과 off 선택버튼이 되고, submit 확인 버튼으로 눌러서 데이터를 입력하는데요
근데 이게 버튼이 두개라서 넣으려는 위치 자리도 좁고..불편함감이 있어 버튼을 하나로 합체를 해야겠는데..
이건 css로 해야하는 부분인가요?
아니면 아에 이런방법이 아닌걸까요?
어떤방식인지 좀 알면 열심히 해보겠는데..아에 깜깜이라 검색도 제대로 못하고 있고
질문하는데 말로 표현도 잘 안되네요.
혹시나 하고 조언을 구해봅니다
답변 1
<form method="post" action="<?php echo $g5['path'] ?>/bbs/update_mb_10.php">
<div class="form-group">
<label for="mb_10">mb_10 회원 필드</label>
<input type="hidden" id="mb_10" name="mb_10" value="<?php echo $mb_10; ?>">
<button type="button" id="toggle_mb_10" onclick="toggleMb10()"><?php echo ($mb_10 == 'on') ? 'On' : 'Off'; ?></button>
</div>
</form>
<script>
function toggleMb10() {
var mb10Button = document.getElementById("toggle_mb_10");
var mb10Input = document.getElementById("mb_10");
// 현재 mb_10 값 확인
var currentMb10Value = mb10Input.value;
// "on"과 "off" 값을 토글합니다.
if (currentMb10Value === "on") {
mb10Input.value = "off";
mb10Button.innerHTML = "Off";
} else {
mb10Input.value = "on";
mb10Button.innerHTML = "On";
}
document.forms[0].submit();
}
</script>
엇...스크립트에서 document.forms[0].submit(); 이게 폼 전송인가봐요? 감사합니다~
답변을 작성하시기 전에 로그인 해주세요.
