teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

質問文の編集

2017/09/20 07:36

投稿

cp_cop
cp_cop

スコア40

title CHANGED
File without changes
body CHANGED
@@ -67,9 +67,9 @@
67
67
 
68
68
  //HTML
69
69
  <form method="post" action="https://example.com/hoge.cgi">
70
- <input type="hidden" name="foo" value="abc" />
70
+ <input type="hidden" name="foo" id="foo" value="abc" />
71
- <input type="hidden" name="bar" value="123" />
71
+ <input type="hidden" name="bar" id="bar" value="123" />
72
- <input type="hidden" name="page" value="baz" />
72
+ <input type="hidden" name="page" id="page" value="baz" />
73
73
  <input type="submit" value="送信" />
74
74
  </form>
75
75
  ```

2

質問文の編集

2017/09/20 07:36

投稿

cp_cop
cp_cop

スコア40

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,25 @@
1
+ ```ここに言語を入力
2
+ <form method="post" action="https://example.com/hoge.cgi">
3
+ <input type="hidden" name="foo" value="abc" />
4
+ <input type="hidden" name="bar" value="123" />
5
+ <input type="hidden" name="page" value="baz" />
6
+ <input type="submit" value="" />
7
+ </form>
8
+ ```
9
+ 上記のformを送信するとhttps://example.com/hoge.cgiに飛びformの内容が送信されます。
10
+ このフォームをスマートフォンのchromeで送信するとフォーム内容が送信されhttps://example.com/hoge.cgiが開きますが
11
+ このページ(https://example.com/hoge.cgi)を開いたままブラウザを一度終了させ、
12
+ 再びブラウザを起動させるとフォームの内容が反映されない状態のhttps://example.com/hoge.cgiが表示されてしまいます。
13
+ (safariの場合にはフォーム内容を再送信するかどうか聞いてきます)
14
+
15
+ getで送信するとURLにパラメータが付くので(https://example.com/hoge.cgi?foo=bar&bar=123&page=baz)、
16
+ ブラウザを開きなおしてもフォームの内容が反映されたページが開きますが
17
+ post送信でブラウザを開きなおし再びリロードされてもフォームの内容が反映された状態で開くことができません。
18
+
1
- フォームを送信する時に、その内容(value値)をローカルストレージに保存したいと考えています。
19
+ そこでフォームを送信する時に内容(value値)をローカルストレージに保存し
20
+ それをonloadすることで再度ブラウザを起動しても送信後のページが表示できるようにできないかと考えています。
21
+
2
- 以下のスクリプトを参考に実装しようとしていたのですが
22
+ 以下のスクリプトを参考にローカルストレージへの保存を実装しようとしていたのですが hidden のvalue値が保存されません。
3
- <input type="hidden" name="number" id="number" value="12345">というように hidden のvalue値が保存されません。
4
23
  input[type=hidden]の処理が必要だと思うのですが、どうしてもできずにいます。
5
24
  どのようにすればhiddenのvalue値も保存することができるでしょうか。
6
25
  ご教授お願いいたします。
@@ -47,8 +66,10 @@
47
66
  </script>
48
67
 
49
68
  //HTML
50
- <form method="post" action="/hoge.cgi">
69
+ <form method="post" action="https://example.com/hoge.cgi">
70
+ <input type="hidden" name="foo" value="abc" />
71
+ <input type="hidden" name="bar" value="123" />
51
- <input type="text" name="name" id="name">
72
+ <input type="hidden" name="page" value="baz" />
52
- <input type="hidden" name="number" id="number" value="12345">
53
- <input type="submit" value="送信">
73
+ <input type="submit" value="送信" />
74
+ </form>
54
75
  ```

1

質問の編集

2017/09/20 07:34

投稿

cp_cop
cp_cop

スコア40

title CHANGED
File without changes
body CHANGED
@@ -13,9 +13,7 @@
13
13
  if (!window.localStorage) return;
14
14
 
15
15
  var $text = $('input[type=text], textarea');
16
- var $checkbox = $('input[type=checkbox]');
17
- var $radio = $('input[type=radio]');
16
+ var $hidden = $('input[type=hidden]');
18
- var $select = $('select');
19
17
 
20
18
  //ローカルストレージの読み込み
21
19
  function init(){
@@ -26,31 +24,13 @@
26
24
  $(this).val(localStorage[inputName]);
27
25
  }
28
26
  });
29
- //checkbox
27
+ //hidden
30
- $.each($checkbox, function(){
28
+ $.each($hidden, function(){
31
29
  var inputName = $(this).attr('name');
32
- var inputValue = $(this).attr('value');
33
- var cbValues = JSON.parse(localStorage.getItem(inputName));
34
- if($.inArray(inputValue, cbValues) != -1){
35
- $(this).attr('checked','checked');
36
- }
37
- });
38
- //radio
39
- $.each($radio, function(){
40
- var inputName = $(this).attr('name');
41
- var inputValue = $(this).attr('value');
42
30
  if(localStorage[inputName]){
43
- if(inputValue == localStorage[inputName]){
31
+ $(this).val(localStorage[inputName]);
44
- $(this).attr('checked','checked');
45
- }
46
32
  }
47
33
  });
48
- //select
49
- $.each($select, function(){
50
- var inputName = $(this).attr('name');
51
- var optionValue = localStorage[inputName];
52
- $('[name="' + inputName + '"]').find('option[value="' + optionValue + '"]').attr('selected', true);
53
- });
54
34
 
55
35
  bindEvent();
56
36
  }//init
@@ -59,30 +39,9 @@
59
39
 
60
40
  //ローカルストレージへの保存・削除
61
41
  function bindEvent(){
62
- //text, textarea, radio, select
63
- // $($text, $radio, $select).change(function(){
64
- // localStorage[$(this).attr('name')] = $(this).val();
65
- // });
66
- $('input[type=text], textarea, input[type=radio], select').change(function(){
42
+ $('input[type=text], input[type=hidden], textarea').change(function(){
67
43
  localStorage.setItem($(this).attr('name'), $(this).val());
68
44
  });
69
- //checkbox
70
- $checkbox.change(function(){
71
- var inputName = $(this).attr('name');
72
- var inputValue = $(this).attr('value');
73
- var cbValues = new Array;
74
- $.each( $('[name="' + inputName + '"]'), function(){
75
- if( $(this).is(':checked') ){
76
- cbValues.push($(this).attr('value'));
77
- }
78
- });
79
- //配列の格納
80
- localStorage.setItem(inputName, JSON.stringify(cbValues));
81
- });
82
- //データ削除
83
- $('input[type=reset]').click(function(){
84
- localStorage.clear();
85
- });
86
45
  }
87
46
  });
88
47
  </script>