teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問Javascriptでフォームタグを書き換えたい

編集履歴

質問編集履歴

1

コード2を追加しました。

2020/03/13 14:54

投稿

mikeko0901
mikeko0901

スコア227

test CHANGED
@@ -1 +1 @@
1
- Laravelにて。 Javascriptでフォームタグを書き換えたい
1
+ Javascriptでフォームタグを書き換えたい
test CHANGED
@@ -1,14 +1,10 @@
1
- Laravel関係なかったらすみません。
2
-
3
-
4
-
5
1
  Laravelで開発しています。モーダルウィンドウで写真に対してコメントを付ける機能を実装しています。
6
2
 
7
3
  Javascripでモーダルウィンドウにphoto_idを引き継ぐところまでできました。
8
4
 
9
5
  モーダルウィンドウ内のFormタグをJavascriptを使って書き換えようと思っているのですが、うまくできません。アドバイスいただけますと幸いです。
10
6
 
11
- ###コード
7
+ ###試したこと1 (innerHTMLでformタグを書き換えようとしました）
12
8
 
13
9
 
14
10
 
@@ -48,14 +44,12 @@
48
44
 
49
45
  var formmodel = document.getElementById('formmodel')
50
46
 
51
- formmodel.innerHTML = "かきかえました<div class=" + recipient +"></div>"
47
+ formmodel.innerHTML = "{{ Form::open(['route' => ['admin.photoupdate', " + recipient + "], 'method' => 'put']) }}"
52
48
 
53
49
 
54
50
 
55
51
  })
56
52
 
57
-
58
-
59
53
  }
60
54
 
61
55
  </script>
@@ -80,33 +74,235 @@
80
74
 
81
75
  <img src="{{ $photo->image_path }}">
82
76
 
77
+ ※省略　猫の情報をいくつか記載※
78
+
79
+
80
+
83
- <div class="caption">
81
+ </div>
84
-
82
+
85
- <div class="small">{{ $photo->created_at }}</div>
83
+ <p>{{ $photo->comment }}</p>
86
-
87
- <div class="small">
84
+
88
-
89
- <?php // Cat名を取得する処理
90
-
91
- $cat = $cats->find($photo->cat_id);
85
+ @if ($photo->reply === Null)
92
-
93
- print $cat->name;
86
+
94
-
95
- ?>｜
87
+ {{--
96
-
88
+
97
- <a href="{{ action('UsersController@show', $photo->user_id) }}">{{ $photo->user_id }}：
89
+ {!! link_to_route('admin.photoedit', '返信', ['id' => $photo->id], ['class' => 'btn btn-apply applybtn']) !!}
98
-
90
+
99
- <?php // ユーザー名を取得する処理
91
+ --}}
100
92
 
101
93
 
102
94
 
103
- $user = $users->find($photo->user_id);
95
+ <button type="button" class="btn btn-apply applybtn" data-toggle="modal" data-target="#Modal" data-whatever="{{ $photo->id }}">
96
+
104
-
97
+ 返信
98
+
105
- print $user->name;
99
+ </button>
106
100
 
107
101
 
108
102
 
103
+ @endif
104
+
109
- ?></a>
105
+ </div>
106
+
107
+ @if ($photo->reply === Null)
108
+
109
+ @else
110
+
111
+ <div class="small reply-fromadmin mt-2">
112
+
113
+ <p>{{ $photo->reply }}</p>
114
+
115
+ </div>
116
+
117
+ @endif
118
+
119
+ </div>
120
+
121
+ @endforeach
122
+
123
+ @endif
124
+
125
+
126
+
127
+ {{--★モーダルウィンドウ--}}
128
+
129
+ <div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
130
+
131
+ 　<div class="modal-dialog">
132
+
133
+ <div class="modal-content">
134
+
135
+ <div class="modal-header">
136
+
137
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
138
+
139
+ <h4 class="modal-title" id="ModalLabel">返信：</h4>
140
+
141
+ </div>
142
+
143
+ <div class="modal-body">
144
+
145
+ <div id="formmodel">
146
+
147
+ {{ Form::open(['route' => ['admin.photoupdate', $photo->id], 'method' => 'put']) }}
148
+
149
+ </div>
150
+
151
+ {{ csrf_field() }}
152
+
153
+ <div class="form-group">
154
+
155
+ {!! Form::label('reply', 'ヒトコト返信') !!}<span class="small">(50文字以内)</span>
156
+
157
+ <div>
158
+
159
+ {!! Form::textarea('reply', null, ['size' => '40x5']) !!}
160
+
161
+ </div>
162
+
163
+ </div>
164
+
165
+ </div>
166
+
167
+ <div class="modal-footer">
168
+
169
+ <button type="button" class="btn btn-default" data-dismiss="modal">キャンセル</button>
170
+
171
+ {!! Form::submit('更新', ['class' => 'btn btn-apply']) !!}
172
+
173
+ {{ Form::close() }}
174
+
175
+ </div>
176
+
177
+ </div>
178
+
179
+ </div>
180
+
181
+ </div>
182
+
183
+
184
+
185
+ @endsection
186
+
187
+ ```
188
+
189
+
190
+
191
+ 上部に<script>タグがあります。script内の//formタグの書き換え部分のinnerHTMLで、
192
+
193
+ {{--★モーダルウィンドウ--}} の、```<div id="formmodel">```にある
194
+
195
+ ```
196
+
197
+ {{ Form::open(['route' => ['admin.photoupdate', $photo->id], 'method' => 'put']) }}
198
+
199
+ ```
200
+
201
+ の$photo->id部分を各photoごとに書き換ようとしました。
202
+
203
+ ↓しかし、このように、script自体がよみこまれなくなってしまいます。。
204
+
205
+ ![イメージ説明](9949799e8b252247c06750566bfddf17.png)
206
+
207
+
208
+
209
+
210
+
211
+ innerHTML部分をテキストにするとうまく書き換えられます
212
+
213
+ ![イメージ説明](a6fe8912f260ae41ccf0bae9f62b1446.png)
214
+
215
+
216
+
217
+
218
+
219
+
220
+
221
+
222
+
223
+
224
+
225
+ ### 追加　試したこと2
226
+
227
+ こちらの記事を見つけて、innerHTMLではなくて、actionを書き換えてみました。
228
+
229
+ https://www.sejuku.net/blog/28720
230
+
231
+
232
+
233
+ それで、コードを以下に変更しました。
234
+
235
+ ```
236
+
237
+ @extends('layouts.app_admin')
238
+
239
+
240
+
241
+ @section('content')
242
+
243
+
244
+
245
+ <script>
246
+
247
+ window.onload = function() {
248
+
249
+
250
+
251
+ $('#Modal').on('show.bs.modal', function (event) {
252
+
253
+ var button = $(event.relatedTarget) //モーダルを呼び出すときに使われたボタンを取得
254
+
255
+ var recipient = button.data('whatever') //data-whatever の値を取得
256
+
257
+ //Ajaxの処理はここに
258
+
259
+ var modal = $(this) //モーダルを取得
260
+
261
+ modal.find('.modal-title').text('photoid：' + recipient) //モーダルのタイトルに値を表示
262
+
263
+
264
+
265
+ })
266
+
267
+
268
+
269
+ function clickEvent() {
270
+
271
+
272
+
273
+ document.myform.action = "{{ route('admin.photoupdate', ['id' => " + recipient + " ]) }}";
274
+
275
+
276
+
277
+ }
278
+
279
+
280
+
281
+ }
282
+
283
+
284
+
285
+ </script>
286
+
287
+
288
+
289
+ <h1>Photo一覧</h1>
290
+
291
+
292
+
293
+ <div class="row mt-5">
294
+
295
+ @if (count($photos) > 0)
296
+
297
+ @foreach ($photos as $photo)
298
+
299
+
300
+
301
+ <div class="col-xs-12 col-md-3 text-center contents-cats mb-5">
302
+
303
+ <img src="{{ $photo->image_path }}">
304
+
305
+ ※省略　猫の情報をいくつか記載※
110
306
 
111
307
 
112
308
 
@@ -176,7 +372,11 @@
176
372
 
177
373
  <div id="formmodel">
178
374
 
179
- {{ Form::open(['route' => ['admin.photoupdate', $photo->id], 'method' => 'put']) }}
375
+ <form name="myform" method="POST" action="{{ route('admin.photoupdate', ['id' => $photo->id ]) }}" id="myform">
376
+
377
+ <input type="hidden" name="_method" value="PUT">
378
+
379
+
180
380
 
181
381
  </div>
182
382
 
@@ -200,9 +400,9 @@
200
400
 
201
401
  <button type="button" class="btn btn-default" data-dismiss="modal">キャンセル</button>
202
402
 
203
- {!! Form::submit('更新', ['class' => 'btn btn-apply']) !!}
403
+ <button onclick="clickEvent()">送信</button>
204
-
404
+
205
- {{ Form::close() }}
405
+ </form>
206
406
 
207
407
  </div>
208
408
 
@@ -218,98 +418,24 @@
218
418
 
219
419
  ```
220
420
 
221
-
222
-
223
- 上部に<script>タグがあります。script内の//formタグの書き換え部分のinnerHTMLで、
224
-
225
- {{--★モーダルウィンドウ--}} の、```<div id="formmodel">```にある
421
+ document.myform.actionで、モーダルウィンドウ中の<form>タグの
226
-
227
- ```
422
+
228
-
423
+
424
+
229
- {{ Form::open(['route' => ['admin.photoupdate', $photo->id], 'method' => 'put']) }}
425
+ <form name="myform" method="POST" action="{{ route('admin.photoupdate', ['id' => $photo->id ]) }}" id="myform">
230
-
231
- ```
426
+
232
-
427
+
428
+
233
- の$photo->id部分を各photoごとに書き換えたいです。
429
+ のactionを書き換えるようにしてみました。しかし、
234
-
235
-
236
-
237
- 上記のコードのscriptでは、
430
+
238
-
239
- ```
240
-
241
- //formタグの書き換え
242
-
243
- var formmodel = document.getElementById('formmodel')
244
-
245
- formmodel.innerHTML = "かきかえました<div class=" + recipient +"></div>"
246
-
247
- ```
248
-
249
- としており、結果を見るとinnerHTMLはうまくいっているようです。
250
-
251
- ![イメージ説明](a6fe8912f260ae41ccf0bae9f62b1446.png)
431
+ ![イメージ説明](008aa8193b534ae014af568f1736046b.png)
252
-
253
-
254
-
255
- しかし、本来は{{ Form::open～　を書き換えたいので、<script>の//formタグの書き換え部分を以下に変更すると
432
+
256
-
257
-
258
-
259
- ```
433
+
260
-
261
- <script>
434
+
262
-
263
- window.onload = function() {
264
-
265
-
266
-
267
- $('#Modal').on('show.bs.modal', function (event) {
268
-
269
- var button = $(event.relatedTarget) //モーダルを呼び出すときに使われたボタンを取得
270
-
271
- var recipient = button.data('whatever') //data-whatever の値を取得
435
+ 2, 3, 4の返信ボタンをクリックして返信を登録しても、5にupdateされてしまい、photo->idがうまく指定できていないようです…
272
-
273
- //Ajaxの処理はここに
436
+
274
-
275
- var modal = $(this) //モーダルを取得
276
-
277
- modal.find('.modal-title').text('photoid：' + recipient) //モーダルのタイトルに値を表示
437
+ （modal.find('.modal-title').text('photoid：' + recipient) //モーダルのタイトルに値を表示）はできているようで、モーダルウィンドウに各photo->idは表示されます。
278
-
279
-
280
-
438
+
439
+
440
+
281
- //formタグの書き換え
441
+ 何か良い方法あれば、アドバイスお願いします・・！
282
-
283
- var formmodel = document.getElementById('formmodel')
284
-
285
- formmodel.innerHTML = "{{ Form::open(['route' => ['admin.photoupdate', " + recipient + "], 'method' => 'put']) }}"
286
-
287
-
288
-
289
- })
290
-
291
- }
292
-
293
- </script>
294
-
295
-
296
-
297
- ```
298
-
299
- ↓このように、script自体がよみこまれなくなってしまいます。。
300
-
301
- ![イメージ説明](9949799e8b252247c06750566bfddf17.png)
302
-
303
-
304
-
305
-
306
-
307
- Javascriptの変数を渡してFormでupdateしたいのですが、Javascriptのコードがいけないのか、LaravelのFormタグの使い方がいけないのか、わからず困っています。
308
-
309
-
310
-
311
- 他の方法でも構いませんので、モーダルからupdateする方法をご教示いただけますと幸いです。
312
-
313
-
314
-
315
- よろしくお願いいたします。