버튼을 on off 껏다 켰다로 submit할수 있는 방식이 궁금해요

헛둘헛둘 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2023.10.11 19:45:30 1305 (123.♡.♡.183)

답변 1

본문

회원 여분필드인 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 확인 버튼으로 눌러서 데이터를 입력하는데요

2072820919_1697020702.1762.png

근데 이게 버튼이 두개라서 넣으려는 위치 자리도 좁고..불편함감이 있어 버튼을 하나로 합체를 해야겠는데..

이건 css로 해야하는 부분인가요?

아니면 아에 이런방법이 아닌걸까요?

어떤방식인지 좀 알면 열심히 해보겠는데..아에 깜깜이라 검색도 제대로 못하고 있고

질문하는데 말로 표현도 잘 안되네요.

혹시나 하고 조언을 구해봅니다

#그누보드5

답변 1

마르스컴퍼니 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2023-10-11 19:54:20 222.♡.♡.199


<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>