그누보드 QA - 버튼이 여분필드에 입력된 값으로 유지되려면 어찌해야할까요

버튼이 여분필드에 입력된 값으로 유지되려면 어찌해야할까요

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

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

2023.10.11 23:54:22 조회 1677 (123.♡.♡.183)

본문

버튼을 클릭하면 ( 켜짐 꺼짐 으로 바뀌는 버튼 )

회원여분필드인 mb_10에 on off 데이터가 입력되게 만들었어요.

DB에 잘 찍히고 작동은 잘 되는데

새로고침을 하거나, 재접속을 할때마다 DB mb_10값은 입력된대로 들어가 있지만

버튼이 디폴트값인 켜짐으로만 초기화 되고 있어요

버튼이 mb_10값에 저장된것에 의해 보여지게 하고싶은데..

뭐가 문제인지 잘 모르겠습니다

한번 봐주시고 조언좀 부탁드립니다.

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"><?php echo ($mb_10 == 'off') ? '꺼짐' : '켜짐'; ?></button>
    </div>
</form>

2. 스크립트


<script>
    // 페이지가 로드될 때 초기 버튼 레이블 설정
    window.onload = function () {
        var mb10Button = document.getElementById("toggle_mb_10");
        var mb10Input = document.getElementById("mb_10");
        mb10Button.innerHTML = (mb10Input.value === "off") ? '꺼짐' : '켜짐';
    };
    var mb10Button = document.getElementById("toggle_mb_10");
    var mb10Input = document.getElementById("mb_10");
    
    // 클릭 이벤트 핸들러
    mb10Button.addEventListener("click", function () {
        // 현재 mb_10 값 확인
        var currentMb10Value = mb10Input.value;
        // "켜짐"과 "꺼짐"을 토글합니다.
        if (currentMb10Value === "off") {
            mb10Input.value = "on";
            mb10Button.innerHTML = '켜짐';
        } else {
            mb10Input.value = "off";
            mb10Button.innerHTML = '꺼짐';
        }
        // AJAX 요청
        var formData = new FormData(document.forms[0]);
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "<?php echo $g5['path']; ?>/bbs/update_mb_10.php", true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    // 요청 완료                 
                }
            }
        };
        xhr.send(formData);
    });
</script>

#여분필드 #버튼

답변 1

웹메이킹 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2023-10-12 00:03:34 39.♡.♡.46

다음과 같이 해 볼 수 있을것 같습니다.

문제는 페이지가 리로드되거나 재접속할 때 버튼이 초기값인 "켜짐"으로 설정되는 부분입니다. 이 문제를 해결하기 위해서는 페이지가 로드될 때 DB에서 mb_10 값을 가져와서 버튼의 상태를 설정해야 할 것으로 보입니다.

현재 JavaScript 코드에서 초기 버튼 레이블을 설정하는 부분은 window.onload 함수 내에 있으므로 페이지가 처음 로드될 때만 실행되므로, 새로고침 또는 재접속 시에는 이 코드가 실행되지 않아 초기값으로 설정되고 있는것 같습니다.

따라서, 페이지가 로드될 때마다 mb_10의 상태를 확인하여 버튼 레이블을 설정하는 코드를 작성해야 합니다. 다음과 같이 수정하면 원하시는 형식으로 구현되지 않을까 합니다.


// 페이지가 로드될 때 초기 버튼 레이블 설정
function setButtonLabel() {
    var mb10Button = document.getElementById("toggle_mb_10");
    var mb10Input = document.getElementById("mb_10");
    mb10Button.innerHTML = (mb10Input.value === "off") ? '꺼짐' : '켜짐';
}
// 페이지가 로드될 때 초기 버튼 레이블 설정 호출
setButtonLabel();
var mb10Button = document.getElementById("toggle_mb_10");
var mb10Input = document.getElementById("mb_10");
// 클릭 이벤트 핸들러
mb10Button.addEventListener("click", function () {
    // 현재 mb_10 값 확인
    var currentMb10Value = mb10Input.value;
    // "켜짐"과 "꺼짐"을 토글합니다.
    if (currentMb10Value === "off") {
        mb10Input.value = "on";
        mb10Button.innerHTML = '켜짐';
    } else {
        mb10Input.value = "off";
        mb10Button.innerHTML = '꺼짐';
    }
    // AJAX 요청
    var formData = new FormData(document.forms[0]);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "<?php echo $g5['path']; ?>/bbs/update_mb_10.php", true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                // 요청 완료                 
            }
        }
    };
    xhr.send(formData);
});