JavaScript 動的に生成したフォームの値を復元する

2009/04/17

こんにちは。きんくまです。

今回の件はこちらを参考にさせていただきました。ありがとうございます。
[Ajax] location.hashを使ったセッション復元

JSを使って動的にフォームを作った場合の話です。
入力後「送信」などのボタンを押すなどして、次の画面へ遷移して、「あっ間違ってる」と思い、ブラウザの「戻る」ボタンで入力画面へ戻ってきました。ところが入力されたものはきれいさっぱりなくなっています。
これをなんとか復活させることはできないのか？というのが今回のお話。

通常htmlにベタ書きで書かれたformタグ内のものは、先のように戻るボタンで戻ってきても入力されたものが残っています。これはどういう仕組みでブラウザが実装しているのかわかりませんが、とにかく残っています。

で、Cookieを使えばデータが残せるのですが、Cookieを使わないでやる方法は…？ということで、ブラウザのurl欄に引数をかましてあげて、そいつをページ遷移する直前に設定。戻ってきたら、引数を解析して入力したものを戻してあげるという手順をします。

→それでできたものがこいつです。

ソースです。
html部分

<form id="myform">
<p id="form_input"></p>
</form>
<p><a href="nextpage.html" id="goto_nextpage">→次のページへ</a></p>

javascript

var formsample = function (){
  this.lastCheckedRadio;
  this.init();
};

formsample.prototype = {
  init: function(){
    this.getQuery();
    this.setForm();
    this.registerNextPageBtn();
  },
  setForm: function(){
    var addFormHTML = '';
    var i; var no;
    for(i = 0; i < 3; i++){
      no = i.toString();
      addFormHTML += '<label><input name="myradio" type="radio" id="radio' + no + '" value="ra' + no + '" ';
      if(i == this.lastCheckedRadio){
        addFormHTML += 'checked="checked" '
      }
      addFormHTML += '/>ラジオ' + (i + 1).toString() + '</label><br/>';
    }
    $('#form_input').html(addFormHTML);
  },
  getQuery: function(){
    var query = location.hash;
    if(query == ''){
      this.lastCheckedRadio = 0;
    }else{
      this.lastCheckedRadio = parseInt(query.split('=')[1]);
    }
  },
  setQuery: function(){
    var id = $('#myform :radio:checked').attr('id');
    location.hash = 'checked=' + id.substr('radio'.length);
  },
  registerNextPageBtn: function(){
    var self = this;
    $('#goto_nextpage').click(function(){
      self.setQuery();
    });
  }
}

$(function(){
  var sample = new formsample();
});