아무래도 7note입니다. 뒤로 버튼으로 고생하는 것을 해결

뒤로 버튼(브라우저 백)을 하면(자), 페이지 로드 되므로 javascript로 나누고 있던 내용이 원래로 돌아 버리는 현상을 해결.

문제는 페이지 로드가 일어나 초기 상태가 되는 것이므로, 해결책으로서는 페이지를 읽었을 때에도 항목의 분배 처리를 하는 것처럼 만듭니다.

※전제 재료( 라디오 버튼을 선택하여 항목을 분리하는 방법 )

～문제가 일어나는 흐름～

① 라디오 버튼으로 항목이 바뀌는 폼이 있다


* ② 구글을 선택한 후 입력 확인 화면으로 이동하여 '뒤로 버튼 (브라우저 백)'을 누릅니다.
*

③ 그러면 라디오 버튼은 Google이 선택되었지만 텍스트 상자는 보이지 않습니다.

(브라우저 백 후의 화면)

↑「화면이 돌아가도 여기에 입력 폼을 떠난 채로 하고 싶다」라는 것이 이번 이야기.

해결 방법

분배를 행하고 있는 js를 페이지 로드시에도 기동시키는 것으로 해결한다.

script.js

$(function(){

  /* ページロード時にも関数を動かす */
  changeItem();

  /* nameがengineのラジオボタンが変更された場合の処理 */
  $( 'input[name="engine"]:radio' ).change( function() {

    /* 関数を動かす */
    changeItem();
  });

  function changeItem(){

    /* nameがengineのラジオボタンで選択されている値を取得 */
    var selectdata = $("input[name='engine']:checked").val();

    /* その値が`google`だったら追加質問項目を表示。違えば非表示にする */
    if(selectdata == "google"){
      $(".google_only").show();
    } else {
      $(".google_only").hide();
    }
  }

});

※jquery를 사용하고 있습니다.

요약

분배의 처리를 함수로 해, 페이지 로드시, 혹은 라디오 버튼의 값이 변경되었을 때에 기동하는 구조로 해 두면 괜찮습니다.

폼은 입력 화면, 확인 화면을 각각 디버그 하는 것이 아니라, 사용하는 유저가 실제로 실시할 것 같은 동작이나 처리를 상상해 움직여 봐야 할 필요가 있군요.

오마 마츠 #### 오마 마츠!

~ Qiita에서 매일 게시 중!! ~
【초보자용】WEB 제작의 조금 테크 모임