Q&A
name属性に[]をつけるのはわかるんですけど、保存などをどうすればいいのかがわからない感じですね
僕が考えたのはカスタム属性でjs処理するときに番号を振って配列に入れると考えたのですが、やり方がわかりませんでした。
サイトなどではfor文で繰り返すときにiを振れるので行けますが、jsでのやり方がわかりません
laravelでデータの複数送信しようとしています。
しようとしていること
Shop/editで店(Shopテーブル)の更新(今回はコードを載せてない)、
商品(Commodityテーブル)の新規追加と更新(すでに保存されている商品の名前変更など)を同時にしようとしています。
商品の新規追加はformをjsで増やしすべて保存したいです。
また商品の更新も同時に行いたいです。
コードは書いてませんが画像(Imageテーブル)の複数送信もしようとしています。
わからないこと
for文を使わずに配列に格納する方法
商品を保存する際のupdataOrCreateを使う方法
jsを使ってフォーム追加したときの複数送信の仕方
別の質問
edit.blade.phpで@for($i = 0 ; $i < hoge; $i ++)を書き
hogeの部分をjsでボタンを押した回数によって増減させる方法(非同期で)が知りたいです。
参考にしたもの
https://teratail.com/questions/198804
https://nekorokkekun.hatenablog.com/entry/2019/07/12/125556
わかりずらい部分がありましたら訂正します。
よろしくお願いいたします。
Shop/edit.blade.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="//code.jquery.com/jquery-3.5.0.min.js"></script> <script src="{{ asset('/js/shop.js') }}" defer></script> </head> <body> <form method="POST" action="{{url('Shop/update')}}" enctype="multipart/form-data"> {{ csrf_field() }} <!-- @method('PUT') --> <!-- 商品更新 --> @foreach ($commodity as $com) <label for="com-name"> 商品 </label> <input id="com-name" name="com-name[]" class="com-name" value="{{ old('com-name', $com->name) }}" type="text" > <label for="com-price"> 金額 </label> <input id="com-price" name="com-price[]" class="com-price" value="{{ old('com-price', $com->price) }}" type="text" > <label for="description"> 商品紹介 </label> <textarea id="description" name="description[]" class="com-description" rows="4" >{{ old('description', $com->description) }}</textarea> @endforeach <!-- 新規商品 --> <p> 新規商品数<span id="press-button">1</span>個 </p> <div id="input_pluralBox"> <div id="input_plural" data-index=1> <label for="com-name"> 商品 </label> <input id="com-name" name="com-name[]" class="com-name" value="{{ old('com-name') }}" type="text" > <label for="com-price"> 金額 </label> <input id="com-price" name="com-price[]" class="com-price" value="{{ old('com-price') }}" type="text" > <label for="description"> 商品紹介 </label> <textarea id="description" name="description[]" class="com-description" rows="4" >{{ old('description') }}</textarea> <input type="button" value="＋" class="add pluralBtn"> <input type="button" value="－" class="del pluralBtn"> </div> </div> </div> <div class="mt-5"> <a class="btn btn-secondary" href="{{ action('ShopController@show', $shop->id) }}"> キャンセル </a> <button type="submit" class="btn btn-primary"> 更新する </button> <input type="hidden" name="_token" value="{{csrf_token()}}"> <input type="hidden" name="id" value="{{$shop->id}}"> <input type="hidden" name="ids" value="{{$commodities}}"> </form> </div> </body> </html>
ShopController.php
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Illuminate\Support\Collection; use App\Shop; use App\Image; use App\Commodity; use App\Review; class ShopController extends Controller { public function edit($id) { $shop = Shop::findOrFail($id); $commodity = Commodity::where('shop_id', $id)->get(); $commodities = collect($commodity)->count(); return view('shop.edit', ['shop' => $shop, 'commodity' => $commodity, 'commodities' => $commodities]); } public function update(Request $request) { $value = Shop::findOrFail($request->id); $value->fill($request->all())->save(); foreach ($request->num as $id) { $com = new Commodity; echo var_dump($request->name[$i]); $com->name = $request->input('name[$i]'); $com->price = $request->input('com-price'[$i]); $com->description = $request->input('description'[$i]); $com->save(); $i++; } $reviews = Review::all(); $review = Review::select('evaluation')->get(); $review = collect($review)->avg('evaluation'); return view('shop.show', ['shop' => $value, 'review' => $review, 'reviews' => $reviews]); } }
shop.js
<!-- 新規商品のフォーム追加コード --> var count_value = 1; $(document).on("click", ".add", function() { $(this).parent().clone(true).insertAfter($(this).parent()); count_value++; document.getElementById("press-button").innerHTML = count_value; }); $(document).on("click", ".del", function() { var target = $(this).parent(); if (target.parent().children().length > 1) { target.remove(); count_value--; document.getElementById("press-button").innerHTML = count_value; } });
回答2件
0
ベストアンサー
jsとカスタムデータ属性を使って解決できました。
ありがとうございました。
投稿2020/05/31 06:31
退会済みユーザー
総合スコア0
0
チェックボックスと考え方は同じかと。
name属性の属性値に[]つければ良いと思いますがそういうことではなく？
投稿2020/05/30 00:32
総合スコア80875
「保存」がDBのことでしたらループさせるしかありません。
あとは設計次第
そうなんですね
Shop/edit.blade.phpでname="hoge[]"ではなく,id="hoge[]"になっていたので修正いたしました。
失礼いたしいました。
確認ですが、
jsを使ってフォームを増やす場合はカスタム属性を使って配列に番号を振る
そうすればsubmitする際に配列に入った形で保存されるので、ループさせupdateOrCreateを使えば複数挿入できるってことでよろしいでしょうか。
jsでやるとしても、カスタム属性をつける際にedit.blade.phpにてhiddenをつけデータをcontrollerで使えるようにしなければならないですか？
参考URLのように
カスタム属性にしなくても（dataのことだろうか）
name="hoge[1]" とかにしてしまえばいいと思います。
※これも用途次第。JavaScriptから何か扱うならdataのほうがいいと思います。
カスタム属性はカスタムデータ属性(data-index="1"など)で合っています。
一度下記のように更新と新規両方にやってみます。
m.ts10806さんのアドバイスを参考に一度いろいろ試してみます。
ありがとうございました。
また、なにか質問するかもしれませんが気が向いたらよろしくお願いいたします。
<label for="com-name">
商品
</label>
<input
id="com-name"
name="com-name[1]"
class="com-name"
value="{{ old('com-name') }}"
type="text"
>
<label for="com-price">
金額
</label>
<input
id="com-price"
name="com-price[1]"
class="com-price"
value="{{ old('com-price') }}"
type="text"
>
<label for="description">
商品紹介
</label>
<textarea
id="description"
name="description[1]"
class="com-description"
rows="4"
>{{ old('description') }}</textarea>
<input type="hidden" name="num[]">
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。