목록으로

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

헛둘헛둘

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2년 전 조회 2,647

답변 1

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

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

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

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

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

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

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

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

1.버튼폼

Copy

2. 스크립트

Copy





    // 페이지가 로드될 때 초기 버튼 레이블 설정

    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", "/bbs/update_mb_10.php", true);

        xhr.onreadystatechange = function () {

            if (xhr.readyState === 4) {

                if (xhr.status === 200) {

                    // 요청 완료                 

                }

            }

        };

        xhr.send(formData);

    });

#여분필드 #버튼

답변 1개

정렬:

채택된 답변

+20 포인트

웹메이킹

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2년 전

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

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

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

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

Copy



// 페이지가 로드될 때 초기 버튼 레이블 설정

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", "/bbs/update_mb_10.php", true);

    xhr.onreadystatechange = function () {

        if (xhr.readyState === 4) {

            if (xhr.status === 200) {

                // 요청 완료                 

            }

        }

    };

    xhr.send(formData);

});

로그인 후 평가할 수 있습니다