<form method="post" action="https://example.com/hoge.cgi"> <input type="hidden" name="foo" value="abc" /> <input type="hidden" name="bar" value="123" /> <input type="hidden" name="page" value="baz" /> <input type="submit" value="" /> </form>
上記のformを送信するとhttps://example.com/hoge.cgiに飛びformの内容が送信されます。
このフォームをスマートフォンのchromeで送信するとフォーム内容が送信されhttps://example.com/hoge.cgiが開きますが
このページ(https://example.com/hoge.cgi)を開いたままブラウザを一度終了させ、
再びブラウザを起動させるとフォームの内容が反映されない状態のhttps://example.com/hoge.cgiが表示されてしまいます。
(safariの場合にはフォーム内容を再送信するかどうか聞いてきます)
getで送信するとURLにパラメータが付くので(https://example.com/hoge.cgi?foo=bar&bar=123&page=baz)、
ブラウザを開きなおしてもフォームの内容が反映されたページが開きますが
post送信でブラウザを開きなおし再びリロードされてもフォームの内容が反映された状態で開くことができません。
そこでフォームを送信する時に内容(value値)をローカルストレージに保存し、
それをonloadすることで再度ブラウザを起動しても送信後のページが表示できるようにできないかと考えています。
以下のスクリプトを参考にローカルストレージへの保存を実装しようとしていたのですが hidden のvalue値が保存されません。
input[type=hidden]の処理が必要だと思うのですが、どうしてもできずにいます。
どのようにすればhiddenのvalue値も保存することができるでしょうか。
ご教授お願いいたします。
//スクリプト <script> $(function(){ // ローカルストレージ非対応環境 if (!window.localStorage) return; var $text = $('input[type=text], textarea'); var $hidden = $('input[type=hidden]'); //ローカルストレージの読み込み function init(){ //text, textarea $.each($text, function(){ var inputName = $(this).attr('name'); if(localStorage[inputName]){ $(this).val(localStorage[inputName]); } }); //hidden $.each($hidden, function(){ var inputName = $(this).attr('name'); if(localStorage[inputName]){ $(this).val(localStorage[inputName]); } }); bindEvent(); }//init init(); //ローカルストレージへの保存・削除 function bindEvent(){ $('input[type=text], input[type=hidden], textarea').change(function(){ localStorage.setItem($(this).attr('name'), $(this).val()); }); } }); </script> //HTML <form method="post" action="https://example.com/hoge.cgi"> <input type="hidden" name="foo" id="foo" value="abc" /> <input type="hidden" name="bar" id="bar" value="123" /> <input type="hidden" name="page" id="page" value="baz" /> <input type="submit" value="送信" /> </form>
回答2件
あなたの回答
tips
プレビュー