📖
마지막으로 선택한 라디오 버튼을 유지하는 방법

페이지 정보

본문

사용자가 선택한 라디오 버튼을 페이지가 새로고침되거나 다시 방문해도 유지하려면,
쿠키 또는 localStorage를 사용하여 선택 값을 저장하고 복원하면 됩니다.

방법 1: JavaScript + localStorage 이용 (추천)
이 방법을 사용하면 서버 코드(PHP) 수정 없이 클라이언트 측에서 선택한 값을 저장하고, 페이지가 다시 로드될 때 자동으로 적용할 수 있습니다.

✅ JavaScript 코드 추가[code]<script>
document.addEventListener("DOMContentLoaded", function () {
    const radioButtons = document.querySelectorAll('input[name="wr_2"]');

    // 저장된 값 가져오기
    const savedValue = localStorage.getItem("selected_wr_2");

    if (savedValue) {
        // 저장된 값과 같은 값을 가진 라디오 버튼을 체크
        document.querySelector(`input[name="wr_2"][value="${savedValue}"]`).checked = true;
    }

    // 라디오 버튼이 변경될 때 저장
    radioButtons.forEach(radio => {
        radio.addEventListener("change", function () {
            localStorage.setItem("selected_wr_2", this.value);
        });
    });
});
</script>

<div class="radio_input">
    <form method="post">
        <label>
            <input type="radio" name="wr_2" value="1" <?php echo ($selected_wr2 == 1) ? 'checked' : ''; ?> onchange="this.form.submit();"/>
            가로영상(16:9)
        </label>
        <label>
            <input type="radio" name="wr_2" value="2" <?php echo ($selected_wr2 == 2) ? 'checked' : ''; ?> onchange="this.form.submit();"/>
            세로영상(9:16)
        </label>
    </form>
</div>[/code]📌 동작 방식
페이지가 로드될 때 localStorage에서 마지막으로 선택한 wr_2 값을 가져와서 체크된 상태로 설정.
사용자가 라디오 버튼을 변경하면 해당 값을 localStorage에 저장.
페이지가 새로고침되거나 다시 방문해도 마지막 선택이 유지됨.

방법 2: PHP + 쿠키 사용
만약 서버 측에서 저장해야 하는 경우, PHP의 setcookie()를 사용하여 유지할 수 있습니다.

✅ PHP 코드 추가
setcookie()를 사용하여 선택한 값을 저장하고, 다음 번 페이지 로드 시 유지합니다.[code]<?php
// 쿠키에서 이전 선택 값을 가져옴
$selected_wr2 = isset($_COOKIE['selected_wr_2']) ? $_COOKIE['selected_wr_2'] : '1';

// 사용자가 선택한 값을 저장
if (isset($_POST['wr_2'])) {
    $selected_wr2 = $_POST['wr_2'];
    setcookie('selected_wr_2', $selected_wr2, time() + (86400 * 30), "/"); // 30일 유지
}
?>

<div class="radio_input">
    <form method="post">
        <label>
            <input type="radio" name="wr_2" value="1" <?php echo ($selected_wr2 == 1) ? 'checked' : ''; ?> onchange="this.form.submit();"/>
            가로영상(16:9)
        </label>
        <label>
            <input type="radio" name="wr_2" value="2" <?php echo ($selected_wr2 == 2) ? 'checked' : ''; ?> onchange="this.form.submit();"/>
            세로영상(9:16)
        </label>
    </form>
</div>[/code]📌 동작 방식
쿠키에서 선택 값을 가져와 $selected_wr2에 저장.
라디오 버튼 선택 시 onchange="this.form.submit();"으로 자동 제출, 선택한 값이 쿠키에 저장됨.
페이지가 새로고침되거나 다시 방문해도 마지막 선택이 유지됨.

📌 권장:
일반적인 웹사이트라면 localStorage 방식(JavaScript) 사용 (빠르고 간편).
로그인 사용자와 관련된 설정이라면 PHP + 쿠키 방식 사용.
위 방법을 적용하면 마지막으로 선택한 라디오 버튼을 유지할 수 있습니다!

조건: wr_2 값이 없을 때만 마지막 선택 유지
✅ wr_2 값이 없을 때만 마지막으로 선택한 값을 유지하고,
✅ wr_2 값이 이미 있으면 현재 값을 그대로 사용하려면 PHP와 JavaScript를 조합하면 됩니다.

방법 1: JavaScript (localStorage) + PHP 값이 없을 때만 유지[code]<?php
// 현재 wr_2 값이 없을 때만 localStorage 값을 적용할지 결정
$selected_wr2 = isset($write['wr_2']) ? $write['wr_2'] : null;
?>
<div class="radio_input">
    <label>
        <input type="radio" name="wr_2" value="1" <?php echo ($selected_wr2 == 1) ? 'checked' : ''; ?> />
        가로영상(16:9)
    </label>
    <label>
        <input type="radio" name="wr_2" value="2" <?php echo ($selected_wr2 == 2) ? 'checked' : ''; ?> />
        세로영상(9:16)
    </label>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const radioButtons = document.querySelectorAll('input[name="wr_2"]');
    const savedValue = localStorage.getItem("selected_wr_2");

    // PHP에서 wr_2 값이 없을 때만 localStorage 값 적용
    if ("<?php echo $selected_wr2 === null ? 'true' : 'false'; ?>" === "true" && savedValue) {
        document.querySelector(`input[name="wr_2"][value="${savedValue}"]`).checked = true;
    }

    // 라디오 버튼 변경 시 값 저장
    radioButtons.forEach(radio => {
        radio.addEventListener("change", function () {
            localStorage.setItem("selected_wr_2", this.value);
        });
    });
});
</script>[/code]🔹 동작 방식
PHP에서 wr_2 값이 없는 경우(null)만 JavaScript가 localStorage 값을 적용함.
wr_2 값이 존재하면 현재 값을 유지하고, localStorage를 무시.
사용자가 라디오 버튼을 변경하면 localStorage에 저장.

방법 2: PHP + 쿠키 (wr_2가 없을 때만 적용)[code]<?php
// 현재 wr_2 값이 있는지 확인
$selected_wr2 = isset($write['wr_2']) ? $write['wr_2'] : (isset($_COOKIE['selected_wr_2']) ? $_COOKIE['selected_wr_2'] : null);

// 선택 값이 없을 때만 쿠키 적용
if (!isset($write['wr_2']) && isset($_COOKIE['selected_wr_2'])) {
    $selected_wr2 = $_COOKIE['selected_wr_2'];
}
?>

<div class="radio_input">
    <form method="post">
        <label>
            <input type="radio" name="wr_2" value="1" <?php echo ($selected_wr2 == 1) ? 'checked' : ''; ?> onchange="this.form.submit();" />
            가로영상(16:9)
        </label>
        <label>
            <input type="radio" name="wr_2" value="2" <?php echo ($selected_wr2 == 2) ? 'checked' : ''; ?> onchange="this.form.submit();" />
            세로영상(9:16)
        </label>
    </form>
</div>

<?php
// 선택한 값이 있을 경우 쿠키 저장
if (isset($_POST['wr_2'])) {
    setcookie('selected_wr_2', $_POST['wr_2'], time() + (86400 * 30), "/"); // 30일 유지
}
?>[/code]🔹 동작 방식
wr_2 값이 있으면 현재 값을 유지.
wr_2 값이 없을 때만 쿠키($_COOKIE['selected_wr_2'])에서 값을 가져옴.
사용자가 선택하면 폼이 자동 제출되며 쿠키가 저장됨.
쿠키는 30일 유지, 사용자가 다시 방문하면 기존 선택이 적용됨.

댓글목록

등록된 댓글이 없습니다.


🔍 검색

회사소개 개인정보처리방침 서비스이용약관
Copyright © rainbowgarden.shop All rights reserved.