フォームのradioボタンで開いたdivを開いたままにしたいです。

postmailを改造してフォームをつくっています。
radioボタンで選択によって違うdivが開くようにしました。
送信して、確認画面から戻って編集するときに、divがブラウザによって閉じてしまいます。
history.back()
window.onloadがきかなかったので、
cookie.jsを使いたいのですが、
書き方がわからないので
教えていただきたいです。
よろしくお願いします。

###ソースコード

<script type="text/javascript">
function hyoji1(num)
{
	if (num == 0){
		document.getElementById("ib").style.display = ''  ;
		document.getElementById("na").style.display = 'none' ;
	}else{
		document.getElementById("ib").style.display = 'none' ;
		document.getElementById("na").style.display = '' ;
	}
}

</script>

<form>
<p>選択</p>
<label><input id="r1" type="radio" name="st" value="b" onclick="hyoji1(0)">
b</label>
<label><input id="r2" type="radio" name="st" value="c" onclick="hyoji1(1)">
c</label>
<label><input id="r3" type="radio" name="st" value="d" onclick="hyoji1(1)">
  d</label>

<div id="ib" style="display:none"></div>
<div id="na" style="display:none"></div>
<input type="submit" value="送信" />
</form>

###試したこと
window.onload = function(){hyoji1(num);}

###補足情報(言語/FW/ツール等のバージョンなど)
confirm.htmlでは、
<input type="button" value="前に戻る" onclick="history.back(); return false;" class="button" />
となっています。

kei344

2016/08/24 05:07

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

vanille

2016/08/25 00:01

アドバイスありがとうございます。これからもよろしくお願いします。

kei344

2016/08/25 06:00

cookie.jsとは特定ライブラリの名前でしょうか。その場合取得できるURLを追記いただけませんか？

vanille

2016/08/29 00:48

ありがとうございます。お手数おかけして申し訳ありません。

行動規範の内容に同意します

回答2件

ベストアンサー

クッキーではありませんが、ローカルストレージとかどうでしょう。

JavaScript
1if( window.localStorage ){
2	var state = localStorage.getItem( 'tab_state' ); // ローカルストレージから取得
3	if ( state ) {
4		document.getElementById( state ).checked = true; // ラジオボタンを選択状態に
5		// ここでhyoji1の処理をする
6	}
7	var i, l, st = document.getElementsByName( 'st' ); // name="st" を全て取得
8	for( i = 0, l = st.length; i < l; i++ ) {
9		st[i].addEventListener( 'click', function( ev ) {
10			var id = ev.target.id; // ラジオボタンのid属性を取得
11			localStorage.setItem( 'tab_state', id ); // ローカルストレージに保存
12		}, false );
13	}
14};

【[JavaScript] ローカルストレージ (Local Storage) を使用する】
https://www.ipentec.com/document/document.aspx?page=javascript-using-local-storage

投稿2016/08/27 10:28

kei344

総合スコア69400

vanille

2016/08/29 02:36

ありがとうございます！おかげでやっと最後のフォームの課題がクリアできました。もう既に多くのユーザーがアクセス、使用しているフォームなので、UI/UXが向上出来て、クライアントにも喜んでもらえると思います。はじめての質問でしたが、親切に教えていただいて感謝しています。これからもどうぞよろしくお願いいたします。

vanille

2016/08/29 04:51 編集

つぎはぎのタグを整理整頓したら、すべてのブラウザで動くようになりました。ありがとうございます！

kei344

2016/08/29 04:57

解決できてよかったです！

vanille

2016/08/29 05:11

とても勉強になりました。ありがとうございます！

行動規範の内容に同意します

戻ってきた時の処理ってブラウザやバージョンごとで微妙に違うので
なんともいえませんが、こんなふうにr1のチェック状況だけみて処理してみては？
（ラジオボタンは初期値を設定してください）

Javascript
1window.onload=function(){hyoji1();}
2function hyoji1(){
3  var c=document.getElementById("r1").checked;
4  document.getElementById("ib").style.display = (c?'':'none');
5  document.getElementById("na").style.display = (c?'none':'');
6}

HTML
1<form>
2<p>選択</p>
3<label><input id="r1" type="radio" name="st" value="b" onclick="hyoji1()" checked>
4b</label>
5<label><input id="r2" type="radio" name="st" value="c" onclick="hyoji1()">
6c</label>
7<label><input id="r3" type="radio" name="st" value="d" onclick="hyoji1()">
8d</label>
9
10<div id="ib">ib</div>
11<div id="na">na</div>
12<input type="submit" value="送信" />
13</form>