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

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

QA

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

본문

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

회원여분필드인 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

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

 

문제는 페이지가 리로드되거나 재접속할 때 버튼이 초기값인 "켜짐"으로 설정되는 부분입니다. 이 문제를 해결하기 위해서는 페이지가 로드될 때 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);
});
답변을 작성하시기 전에 로그인 해주세요.
전체 15
QA 내용 검색
filter #webp ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT