laravel index　再振り

配列のindex番号をCommodityControllerのstoreアクションの時、またはjqueryで再度振りなおす方法を教えていただきたいです。

jsで商品の情報を入力するフォーム(index番号付き)をjqueryを使って増やしたり消したりできるようにしています。
フォームを一つ以上消したときフォームにつけているindex番号が歯抜け状態になり保存するときに
Undefined offset: 1
と出ます(index番号1を消したとき)

なのでindex番号をsubmitする時、またはCommodityControllerのstoreアクションの時に再振りすることで治ると思ったのですがうまくできませんでした。
よろしくお願いいたします。

CommodityController

public function create($id)
    {
        return view('commodity/create', ['id' => $id]);
    }

 public function store(Request $request)
    {
        $value = Shop::findOrFail($request->id);
        $i = 0;
        foreach ($request->num as $val) {
            $com = new Commodity;
            $com->name = $request->name[$i];
            $com->price = $request->price[$i];
            $com->description = $request->description[$i];
            $com->shop_id = $request->id;
            $com->user_id = $request->user()->id;
            $com->save();
            $i++;
            }
            $reviews = Review::all();
            $review = Review::select('evaluation')->get();
            $review = collect($review)->avg('evaluation');
            return redirect()->route('shop.show', ['$id' => $value, 'shop' => $value, 'review' => $review, 'reviews' => $reviews]);
        }

create.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="{{route('Commodity.store')}}" enctype="multipart/form-data">
    {{ csrf_field() }}
    <p>
      新規商品数<span id="press-button">1</span>個
    </p>
    <div id="input_pluralBox" data-index="1">
      <div id="input_plural" class="input_plural[]">
          <label for="com-name">
            商品
          </label>
          <input
          id="name"
          name="name[]"
          class="name"
          value="{{ old('name') }}"
          type="text"
          >

          <label for="com-price">
            金額
          </label>
          <input
          id="price"
          name="price[]"
          class="price"
          value="{{ old('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[]">
        <input type="hidden" name="num[]">
      </div>
    </div>
    <input type="button" value="aa" class="a">
    <a class="btn btn-secondary" href="{{ action('ShopController@show', $id) }}">
        キャンセル
    </a>
    <button type="submit" class="btn btn-primary">
        更新する
    </button>
    <input type="hidden" name="id" value="{{$id}}">
</body>
</html>

shop.js

$(function(){
  const buildFileField = (index)=> {
    const html = `<div id="input_plural" class="input_plural[${index}]">
      <label for="com-name">
        商品
      </label>
      <input
      id="name"
      name="name[${index}]"
      class="name"
      value=""
      type="text"
      >

      <label for="com-price">
        金額
      </label>
      <input
      id="price"
      name="price[${index}]"
      class="price"
      value=""
      type="text"
      >

      <label for="description">
          商品紹介
      </label>
      <textarea
          id="description"
          name="description[${index}]"
          class="com-description"
          rows="4"
      ></textarea>

    <input type="button" value="＋" class="add pluralBtn[${index}]">
    <input type="button" value="－" class="del pluralBtn[${index}]">
    <input type="hidden" name="num[${index}]">
    </div>`;
    return html;
  }
  var count_value = 0;
  var count_values = 1;
  $(document).on("click", ".add", function() {
    count_value++;
    count_values++;
    document.getElementById("press-button").innerHTML = count_values;
    var hoge = document.getElementById('input_pluralBox').dataset.index;
    var hoga = hoge.innerHTML = count_value;
    $('#input_pluralBox').append(buildFileField(hoga));
  });
  $(document).on("click", ".del", function() {
    var s = $(this).parent()
    const targetIndex = $(this).index(".del");
      if (count_values > 1) {
        count_values--;
        document.getElementById("press-button").innerHTML = count_values;
        var s = $(this).parent().remove();
      }
  });

  // index番号をreplaceを追加って再度設定しようとして書いたコード
// .aは仮置きのボタンのclass名
$(document).on("click", ".a", function() {
            var faga = document.getElementById("press-button").innerHTML = count_values;
              $("#input_pluralBox").children().each((index, element) => {
                  var o = $(element).children()
                  var k= $(element).attr("class")
                  var l = k.replace(`${k}`, `input_plural[${index}]`)
                $(element).children().each((index, element) => {
                  var d = $(".name").attr("name");
                  console.log(d);
                  $('.btn btn-primary').on('click',function(e){
                    e.preventDefault();
                  });
            });
});

プラスを押したときのフォームが増えている画像

index番号1番を消し、歯抜け状態の画像

行動規範の内容に同意します

回答1件

ベストアンサー

index番号を振る理由がわからないのですが、
buildFileFieldにindex番号を渡さなくてもname=num[]のようにすれば、POSTしたときに、

PHP
1//<input type="hidden" name="num[]" value="1">
2//<input type="hidden" name="num[]" value="2">
3// 上記を送信した場合
4// dd($request->num);
5array:2 [▼
6  0 => "1"
7  1 => "2"
8]

のように採番されるので活用してはいかがでしょうか。

採番しないといけない理由がある場合は、

javascript
1$('input[name^=num]').filter(function(index){ 
2　$(this).attr('name','num['+index+']') 
3});

上記のようなコードを要素増減時に差し込めば採番されるはずです。

https://api.jquery.com/filter/#filter-function

※あと、storeアクションのforeach内でリダイレクトされてますね。これでは一つしかsaveされないですね。

投稿2020/06/03 05:20

編集2020/06/03 05:38

kensii

総合スコア191

退会済みユーザー

2020/06/03 06:16

javescriptをやったらいけました。あなたは神ですか？もっと勉強します。ありがとうございました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

laravel index　再振り

関連した質問