teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問Ajaxを使ってフォーム内容を保持

編集履歴

質問編集履歴

3

解決

2016/11/09 09:41

投稿

maonmyo
maonmyo

スコア36

test CHANGED
@@ -1 +1 @@
1
- Ajaxを使ってフォームの内容を保持させたい
1
+ Ajaxを使ってフォーム内容を保持
test CHANGED
@@ -26,44 +26,6 @@
26
26
 
27
27
 
28
28
 
29
- ---------------------------------------------------------------
30
-
31
-
32
-
33
- 内容を修正します。
34
-
35
-
36
-
37
- その前に、
38
-
39
- 「Ajaxを使わない」では、やっていませんが、
40
-
41
- 考え方としては
42
-
43
- 入力して送信されたものを初期値として設定すれば出来るのかと考えています。
44
-
45
- paramsで受け取って変数に入れて、その変数をvalueに入れて、、、といった感じです。
46
-
47
- しかしRuby , javascriptの両方とも初心者なので、それで出来るかどうかはちょっとわかりませんが。。
48
-
49
-
50
-
51
- そして、Ajaxを使うことが前提なので、
52
-
53
- 自分なりに調べて参考になるサイトをみつけ
54
-
55
- 以下のようなコードを書きました。
56
-
57
-
58
-
59
- 改めてアドバイスお願いします。
60
-
61
-
62
-
63
-
64
-
65
-
66
-
67
29
 
68
30
 
69
31
  Ajaxを使うことで画面遷移がないため、フォームの値は残る。
@@ -72,120 +34,8 @@
72
34
 
73
35
 
74
36
 
75
- 今困っているのは、「フォームの値を受け取れない」ということです。
76
37
 
77
38
 
39
+ 自己解決しました。
78
40
 
79
-
80
-
81
- ```javascript
82
-
83
- $('#search').on('click', function(){
84
-
85
- $.ajax({
86
-
87
- data: {sendText:'テストです。'},
88
-
89
- url:'user/search',
90
-
91
- type:'post'
92
-
93
- }).done(function (returnData){
94
-
95
- console.log('OK');
96
-
97
- });
98
-
99
- });
100
-
101
- ```
102
-
103
- このコードで、searchアクションが走ることを確認でき、
104
-
105
- 且つ、データとして「テストです。」という文字列を送り、
106
-
107
- controller側で、paramsで受け取ることが出来ました。
108
-
109
-
110
-
111
- そこから、今度はフォームに入力した値を送りたいので以下のように書き直しました。
112
-
113
- ```javascript
114
-
115
-
116
-
117
- $('#search').on('click', function(){
118
-
119
- var sendData = $('#form_search').serialize();
120
-
121
-
122
-
123
- $.ajax({
124
-
125
- data: sendData,
126
-
127
- url:'user/search',
128
-
129
- type:'post'
130
-
131
- }).done(function (returnData){
132
-
133
- console.log('OK');
134
-
135
- });
136
-
137
- });
138
-
139
-
140
-
141
- ```
142
-
143
-
144
-
145
- ですが、sendDateを受け取ることができません。
146
-
147
- アクション自体は走ります。
148
-
149
-
150
-
151
- この場合の、serializeされている#form_searchはどこのタグのidなのでしょうか？
152
-
153
- ```ruby
154
-
155
- [html.erb]
156
-
157
-
158
-
159
- <form>
160
-
161
- <input type="text" id="id" name="id">
162
-
163
- <input type="text" id="name" name="name">
164
-
165
- <select name="" id="">
166
-
167
- <option value="0">大人</option>
168
-
169
- <option value="1">子供</option>
170
-
171
- </select>
172
-
173
- <button type="button" id="search">検索</button>
174
-
175
- </form>
176
-
177
- ```
178
-
179
-
180
-
181
- formタグ、各inputタグ、どちらのidもform_searchにして試しましたが
182
-
183
- 全てアクションが走るのみで値は送信されませんでした。
184
-
185
-
186
-
187
- 何が間違っているのか教え頂きたいです。
188
-
189
-
190
-
191
- よろしくおねがいします。
41
+ お世話様です。

2

追記と変更

2016/11/09 09:41

投稿

maonmyo
maonmyo

スコア36

test CHANGED
File without changes
test CHANGED
@@ -24,6 +24,132 @@
24
24
 
25
25
 
26
26
 
27
+
28
+
29
+ ---------------------------------------------------------------
30
+
31
+
32
+
33
+ 内容を修正します。
34
+
35
+
36
+
37
+ その前に、
38
+
39
+ 「Ajaxを使わない」では、やっていませんが、
40
+
41
+ 考え方としては
42
+
43
+ 入力して送信されたものを初期値として設定すれば出来るのかと考えています。
44
+
45
+ paramsで受け取って変数に入れて、その変数をvalueに入れて、、、といった感じです。
46
+
47
+ しかしRuby , javascriptの両方とも初心者なので、それで出来るかどうかはちょっとわかりませんが。。
48
+
49
+
50
+
51
+ そして、Ajaxを使うことが前提なので、
52
+
53
+ 自分なりに調べて参考になるサイトをみつけ
54
+
55
+ 以下のようなコードを書きました。
56
+
57
+
58
+
59
+ 改めてアドバイスお願いします。
60
+
61
+
62
+
63
+
64
+
65
+
66
+
67
+
68
+
69
+ Ajaxを使うことで画面遷移がないため、フォームの値は残る。
70
+
71
+ ボタンクリックでアクションを走らせ、フォーム内容はPOSTで送信、検索結果を表示。という流れを目指してます。
72
+
73
+
74
+
75
+ 今困っているのは、「フォームの値を受け取れない」ということです。
76
+
77
+
78
+
79
+
80
+
81
+ ```javascript
82
+
83
+ $('#search').on('click', function(){
84
+
85
+ $.ajax({
86
+
87
+ data: {sendText:'テストです。'},
88
+
89
+ url:'user/search',
90
+
91
+ type:'post'
92
+
93
+ }).done(function (returnData){
94
+
95
+ console.log('OK');
96
+
97
+ });
98
+
99
+ });
100
+
101
+ ```
102
+
103
+ このコードで、searchアクションが走ることを確認でき、
104
+
105
+ 且つ、データとして「テストです。」という文字列を送り、
106
+
107
+ controller側で、paramsで受け取ることが出来ました。
108
+
109
+
110
+
111
+ そこから、今度はフォームに入力した値を送りたいので以下のように書き直しました。
112
+
113
+ ```javascript
114
+
115
+
116
+
117
+ $('#search').on('click', function(){
118
+
119
+ var sendData = $('#form_search').serialize();
120
+
121
+
122
+
123
+ $.ajax({
124
+
125
+ data: sendData,
126
+
127
+ url:'user/search',
128
+
129
+ type:'post'
130
+
131
+ }).done(function (returnData){
132
+
133
+ console.log('OK');
134
+
135
+ });
136
+
137
+ });
138
+
139
+
140
+
141
+ ```
142
+
143
+
144
+
145
+ ですが、sendDateを受け取ることができません。
146
+
147
+ アクション自体は走ります。
148
+
149
+
150
+
151
+ この場合の、serializeされている#form_searchはどこのタグのidなのでしょうか？
152
+
27
153
  ```ruby
28
154
 
29
155
  [html.erb]
@@ -44,24 +170,22 @@
44
170
 
45
171
  </select>
46
172
 
47
- <button type="submit">検索</button>
173
+ <button type="button" id="search">検索</button>
48
174
 
49
175
  </form>
50
-
51
-
52
176
 
53
177
  ```
54
178
 
55
179
 
56
180
 
181
+ formタグ、各inputタグ、どちらのidもform_searchにして試しましたが
182
+
57
- 単純にvalue属性に初期値として変数を持ってくれば出来るのでしょうか？
183
+ 全てアクションが走るのみで値は送信されませんでした。
58
184
 
59
185
 
60
186
 
61
- 何かヒントになるようなサイトなどあれば教えて頂きたいです。
187
+ 何が間違っているのか教え頂きたいです。
62
188
 
63
189
 
64
190
 
65
- Ajaxに関しては全く触れたことが無かったのですが、
191
+ よろしくおねがいします。
66
-
67
- 「Ajaxを使って」というのがどういうことなのかイマイチぴんときません。

1

追記

2016/11/09 06:05

投稿

maonmyo
maonmyo

スコア36

test CHANGED
@@ -1 +1 @@
1
- フォームの内容を保持
1
+ Ajaxを使ってフォームの内容を保持させたい
test CHANGED
@@ -56,6 +56,12 @@
56
56
 
57
57
  単純にvalue属性に初期値として変数を持ってくれば出来るのでしょうか？
58
58
 
59
+
60
+
61
+ 何かヒントになるようなサイトなどあれば教えて頂きたいです。
62
+
63
+
64
+
59
65
  Ajaxに関しては全く触れたことが無かったのですが、
60
66
 
61
- 何かヒントになるようなサイトなどあれば教えて頂きたいです。
67
+ 「Ajaxを使って」というのがどういうことなのかイマイチぴんときません。