質問編集履歴

3

質問文の編集

2017/09/20 07:36

投稿

cp_cop
cp_cop

スコア40

test CHANGED
File without changes
test CHANGED
@@ -136,11 +136,11 @@
136
136
 
137
137
  <form method="post" action="https://example.com/hoge.cgi">
138
138
 
139
- <input type="hidden" name="foo" value="abc" />
139
+ <input type="hidden" name="foo" id="foo" value="abc" />
140
140
 
141
- <input type="hidden" name="bar" value="123" />
141
+ <input type="hidden" name="bar" id="bar" value="123" />
142
142
 
143
- <input type="hidden" name="page" value="baz" />
143
+ <input type="hidden" name="page" id="page" value="baz" />
144
144
 
145
145
  <input type="submit" value="送信" />
146
146
 

2

質問文の編集

2017/09/20 07:36

投稿

cp_cop
cp_cop

スコア40

test CHANGED
File without changes
test CHANGED
@@ -1,8 +1,46 @@
1
- フォームを送信する時、その内容(value値)ローカルストレージに保存したいと考えています。
1
+ ```ここ言語入力
2
2
 
3
- 以下のスクリプトを参考に実装しようとしていたのですが、
3
+ <form method="post" action="https://example.com/hoge.cgi">
4
4
 
5
+ <input type="hidden" name="foo" value="abc" />
6
+
5
- <input type="hidden" name="number" id="number" value="12345">というように hidden のvalue値が保存されません。
7
+ <input type="hidden" name="bar" value="123" />
8
+
9
+ <input type="hidden" name="page" value="baz" />
10
+
11
+ <input type="submit" value="" />
12
+
13
+ </form>
14
+
15
+ ```
16
+
17
+ 上記のformを送信するとhttps://example.com/hoge.cgiに飛びformの内容が送信されます。
18
+
19
+ このフォームをスマートフォンのchromeで送信するとフォーム内容が送信されhttps://example.com/hoge.cgiが開きますが
20
+
21
+ このページ(https://example.com/hoge.cgi)を開いたままブラウザを一度終了させ、
22
+
23
+ 再びブラウザを起動させるとフォームの内容が反映されない状態のhttps://example.com/hoge.cgiが表示されてしまいます。
24
+
25
+ (safariの場合にはフォーム内容を再送信するかどうか聞いてきます)
26
+
27
+
28
+
29
+ getで送信するとURLにパラメータが付くので(https://example.com/hoge.cgi?foo=bar&bar=123&page=baz)、
30
+
31
+ ブラウザを開きなおしてもフォームの内容が反映されたページが開きますが
32
+
33
+ post送信でブラウザを開きなおし再びリロードされてもフォームの内容が反映された状態で開くことができません。
34
+
35
+
36
+
37
+ そこでフォームを送信する時に内容(value値)をローカルストレージに保存し、
38
+
39
+ それをonloadすることで再度ブラウザを起動しても送信後のページが表示できるようにできないかと考えています。
40
+
41
+
42
+
43
+ 以下のスクリプトを参考にローカルストレージへの保存を実装しようとしていたのですが hidden のvalue値が保存されません。
6
44
 
7
45
  input[type=hidden]の処理が必要だと思うのですが、どうしてもできずにいます。
8
46
 
@@ -96,12 +134,16 @@
96
134
 
97
135
  //HTML
98
136
 
99
- <form method="post" action="/hoge.cgi">
137
+ <form method="post" action="https://example.com/hoge.cgi">
100
138
 
101
- <input type="text" name="name" id="name">
139
+ <input type="hidden" name="foo" value="abc" />
102
140
 
103
- <input type="hidden" name="number" id="number" value="12345">
141
+ <input type="hidden" name="bar" value="123" />
104
142
 
143
+ <input type="hidden" name="page" value="baz" />
144
+
105
- <input type="submit" value="送信">
145
+ <input type="submit" value="送信" />
146
+
147
+ </form>
106
148
 
107
149
  ```

1

質問の編集

2017/09/20 07:34

投稿

cp_cop
cp_cop

スコア40

test CHANGED
File without changes
test CHANGED
@@ -28,11 +28,7 @@
28
28
 
29
29
  var $text = $('input[type=text], textarea');
30
30
 
31
- var $checkbox = $('input[type=checkbox]');
32
-
33
- var $radio = $('input[type=radio]');
31
+ var $hidden = $('input[type=hidden]');
34
-
35
- var $select = $('select');
36
32
 
37
33
 
38
34
 
@@ -54,53 +50,17 @@
54
50
 
55
51
  });
56
52
 
57
- //checkbox
53
+ //hidden
58
54
 
59
- $.each($checkbox, function(){
55
+ $.each($hidden, function(){
60
56
 
61
57
  var inputName = $(this).attr('name');
62
58
 
63
- var inputValue = $(this).attr('value');
59
+ if(localStorage[inputName]){
64
60
 
65
- var cbValues = JSON.parse(localStorage.getItem(inputName));
61
+ $(this).val(localStorage[inputName]);
66
-
67
- if($.inArray(inputValue, cbValues) != -1){
68
-
69
- $(this).attr('checked','checked');
70
62
 
71
63
  }
72
-
73
- });
74
-
75
- //radio
76
-
77
- $.each($radio, function(){
78
-
79
- var inputName = $(this).attr('name');
80
-
81
- var inputValue = $(this).attr('value');
82
-
83
- if(localStorage[inputName]){
84
-
85
- if(inputValue == localStorage[inputName]){
86
-
87
- $(this).attr('checked','checked');
88
-
89
- }
90
-
91
- }
92
-
93
- });
94
-
95
- //select
96
-
97
- $.each($select, function(){
98
-
99
- var inputName = $(this).attr('name');
100
-
101
- var optionValue = localStorage[inputName];
102
-
103
- $('[name="' + inputName + '"]').find('option[value="' + optionValue + '"]').attr('selected', true);
104
64
 
105
65
  });
106
66
 
@@ -120,51 +80,9 @@
120
80
 
121
81
  function bindEvent(){
122
82
 
123
- //text, textarea, radio, select
124
-
125
- // $($text, $radio, $select).change(function(){
126
-
127
- // localStorage[$(this).attr('name')] = $(this).val();
128
-
129
- // });
130
-
131
- $('input[type=text], textarea, input[type=radio], select').change(function(){
83
+ $('input[type=text], input[type=hidden], textarea').change(function(){
132
84
 
133
85
  localStorage.setItem($(this).attr('name'), $(this).val());
134
-
135
- });
136
-
137
- //checkbox
138
-
139
- $checkbox.change(function(){
140
-
141
- var inputName = $(this).attr('name');
142
-
143
- var inputValue = $(this).attr('value');
144
-
145
- var cbValues = new Array;
146
-
147
- $.each( $('[name="' + inputName + '"]'), function(){
148
-
149
- if( $(this).is(':checked') ){
150
-
151
- cbValues.push($(this).attr('value'));
152
-
153
- }
154
-
155
- });
156
-
157
- //配列の格納
158
-
159
- localStorage.setItem(inputName, JSON.stringify(cbValues));
160
-
161
- });
162
-
163
- //データ削除
164
-
165
- $('input[type=reset]').click(function(){
166
-
167
- localStorage.clear();
168
86
 
169
87
  });
170
88