버튼이 여분필드에 입력된 값으로 유지되려면 어찌해야할까요
본문
버튼을 클릭하면 ( 켜짐 꺼짐 으로 바뀌는 버튼 )
회원여분필드인 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);
});
관심주셔서 정말 감사합니다~~ 근데 같은 증상이라서..
제가 뭔가를 빼먹은거 같은데..뭘 빼먹었는지 잘 모르겠네요 ㅠ.ㅠ
좀더 생각을 해봐야할거 같습니다
아 감사합니다!!
다른문제는 아니였고..value="<?php echo $mb_10; 값을
get_text($member['mb_10']) 멤버에서 불러오라고 지정했어야 했나보네요~
그리고 식을 보고 더 배워갑니다~ >.<~~