【问题标题】：Can't get inputs from li in laravel在 laravel 中无法从 li 获取输入
【发布时间】：2019-06-25 17:16:26
【问题描述】：

我在每个 li 中都有列表，我有输入字段，但是当我发送数据时无法获取这些输入的值

刀片

@foreach($options as $group => $option)

// another options here with name="dropdown" //

// And this data won't send
<div class="tt-swatches-container">
    <div class="tt-wrapper">
        <div class="tt-title-options">{{$group}}:</div>
        <ul class="tt-list-inline tt-options-swatch options-large">
            @foreach($option as $opt)
            <li class="tt-list-inline-item">
                <label for="{{$opt->id}}">
                    <input type="checkbox" name="{{$group}}" value="{{$opt->title}}" id="{{$opt->id}}" />
                    {{$opt->title}}
                </label>
            </li>
            @endforeach
        </ul>
    </div>
</div>
@endforeach

结果

array:3 [▼
  "_token" => "kanCHxEv96MWih4TaXTKSjHYu8gDdWs1YLDCWiv0"
  "dropdown" => "title 44"
  "quantity" => "1"
  //here should be another option named color!
]

它上面的这个数据应该包含name="{{$group}}"，它是值（在本例中为 name="{{$group}}" == colors

有什么想法吗？

更新

我的表格

<form method="post" class="form-default" action="{{route('addingItem', $product->id)}}">
    @csrf

    @if(count($options)>0)
    <!-- options -->
    <div class="tt-swatches-container">
        @foreach($options as $group => $option)
        @if($group == 'color')
            <div class="tt-wrapper">
                <div class="tt-title-options">{{$group}}:</div>
                <ul class="tt-list-inline tt-options-swatch options-large">
                    @foreach($option as $opt)
                    <li class="tt-list-inline-item">
                        <label style="background-color: {{$opt->color}}" class="options-color" for="{{$opt->id}}">
                            <input type="radio" name="{{$group}}" value="{{$opt->title}}" id="{{$opt->id}}" />
                        </label>
                    </li>
                    @endforeach
                </ul>
            </div>
        @elseif($group == 'dropdown')
            <div class="tt-swatches-container">
                <div class="tt-wrapper">
                    <div class="tt-title-options">{{$group}}:</div>
                    <div class="form-group">
                        <select name="{{$group}}" class="form-control">
                            @foreach($option as $opt)
                                <option>{{$opt->title}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        @else
            <div class="tt-swatches-container">
                <div class="tt-wrapper">
                    <div class="tt-title-options">{{$group}}:</div>
                    <ul class="tt-list-inline tt-options-swatch options-large">
                        @foreach($option as $opt)
                        <li class="tt-list-inline-item">
                            <label for="{{$opt->id}}">
                                <input type="checkbox" name="{{$group}}" value="{{$opt->title}}" id="{{$opt->id}}" />
                                {{$opt->title}}
                            </label>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        @endif
        @endforeach
    </div>
    <!-- options -->
    @endif

    <div class="tt-wrapper">
        <div class="tt-row-custom-01  tt-responsive-lg">
            <div class="col-item">
                <div class="tt-input-counter style-01">
                    <span class="minus-btn"></span>
                    <input type="text" name="quantity" value="1" size="5">
                    <span class="plus-btn"></span>
                </div>
            </div>
            <div class="col-item">
                <button type="submit" data-id="{{$product->id}}" class="btn btn-lg"><i class="icon-f-39"></i>ADD TO CART</button>
            </div>
        </div>
    </div>
</form>

更新 2

$options的dd

Collection {#3133 ▼
  #items: array:3 [▼
    "color" => Collection {#3127 ▼
      #items: array:2 [▶]
    }
    "dropdown" => Collection {#3128 ▼
      #items: array:2 [▶]
    }
    "radio" => Collection {#3129 ▼
      #items: array:3 [▶]
    }
  ]
}

更新 3

外部 HTML

<form method="post" class="form-default" action="http://shopping.dev.com/addingItem/22">
<input type="hidden" name="_token" value="kanCHxEv96MWih4TaXTKSjHYu8gDdWs1YLDCWiv0">
    <!-- options -->
    <div class="tt-swatches-container">
        <div class="tt-wrapper">
            <div class="tt-title-options">color:</div>
            <ul class="tt-list-inline tt-options-swatch options-large">
                <li class="tt-list-inline-item">
                    <label style="background-color: #e74c3c" class="options-color" for="28">
                        <input type="radio" name="color" value="red" id="28">
                    </label>
                </li>
                <li class="tt-list-inline-item">
                    <label style="background-color: #2980b9" class="options-color" for="29">
                        <input type="radio" name="color" value="blue" id="29">
                    </label>
                </li>
            </ul>
        </div>                                                                                          
        <div class="tt-swatches-container">
            <div class="tt-wrapper">
                <div class="tt-title-options">dropdown:</div>
                <div class="form-group">
                    <select name="dropdown" class="form-control">
                        <option>title 33</option>
                        <option>title 44</option>
                    </select>
                </div>
            </div>
        </div>
            <div class="tt-wrapper">
                <div class="tt-title-options">radio:</div>
                <ul class="tt-list-inline tt-options-swatch options-large">
                    <li class="tt-list-inline-item">
                        <label for="36">
                            <input type="checkbox" name="radio" value="hi" id="36">
                            hi
                        </label>
                    </li>
                        <li class="tt-list-inline-item">
                        <label for="37">
                            <input type="checkbox" name="radio" value="hii" id="37">
                            hii
                        </label>
                    </li>
                        <li class="tt-list-inline-item">
                        <label for="38">
                            <input type="checkbox" name="radio" value="bye" id="38">
                            bye
                        </label>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- options -->

    <div class="tt-wrapper">
        <div class="tt-row-custom-01  tt-responsive-lg">
            <div class="col-item">
                <div class="tt-input-counter style-01">
                    <span class="minus-btn"></span>
                    <input type="text" name="quantity" value="1" size="5">
                    <span class="plus-btn"></span>
                </div>
            </div>
            <div class="col-item">
                <button type="submit" data-id="22" class="btn btn-lg"><i class="icon-f-39"></i>ADD TO CART</button>
            </div>
        </div>
    </div>
</form>

【问题讨论】：

stackoverflow.com/questions/41966620/…的可能重复
也许你从来没有打过else。你能dd($options)吗？
@Mozammil 当然我会，但只是想知道我的图像我的视图中有所有 3 种类型的选项（颜色、选择、复选框），所以我也点击了其他部分。
@Mozammil 已更新
有趣。应该管用。你能给我们看看控制器吗？

标签： php laravel

【解决方案1】：

您提供的一切似乎都是正确的。不过，可能存在一些问题。

首先，看看你的原始输出代码，这里：https://codepen.io/cjke/pen/vbxRwb?editors=1000

填写所有字段并点击提交，您将看到 codepen 正确地吐出这些值。所以你最终呈现的表单正在做它应该做的一切（这是你的确切代码，我所做的唯一改变是删除动作）。

所以，我的第一个猜测是，您没有提交数据。即：您在以用户身份提交时实际上并没有填写字段，这将使您没有设置radio 和color（相对于为空）。如果是这种情况，您需要处理“默认”状态。

我的第二个猜测是，您在提交表单之前是否进行了一些验证，这可能会弄乱它。但这不太可能。

我的第三个猜测，但不太可能，是您有一些特定于应用程序的中间件剥离提交数据。不太可能，除非您团队中的其他人编写了它？

如果这三个都不是，您需要更新您的问题以包含您的控制器代码。

【讨论】：

嗨，谢谢你的想法，实际上我发现这个问题与你的第二个猜测有关，有一个 javascript 代码正在向父 li 添加类以获取设计，因为我已经删除了那个 js 代码它似乎正在工作，但现在我的模板设计搞砸了。我尝试了很多从 css 到 js 的方法，以便在父 li 中再次添加 active 类都失败了。 这是我删除的代码 codepile.net/pile/jM6Q3qxW 也许你能理解其中的一些内容，所以我可以再次将 active 类添加到父 li 的类，而不会弄乱数据发送？
似乎这将是一个新问题。但是不确定为什么活动类（或缺少）会限制数据提交。虽然查看您的代码（在链接中），但似乎 li click 事件处理程序可能会阻止它到达实际输入？
可能是的，我怀疑 li 问题我猜我是对的 :)（不知何故）

【解决方案2】：

当你做dd($options)时你能扩展你的color对象吗？

根据 li 的内容，它使用的是 ff 变量：

{{ $group }}
{{ $opt->id }} //a number
{{ $opt->title }} //a color title/name?
{{ $opt->color }} //a color title/name?

只是在这里尝试，但 title 或 color 可能不存在于 $opt 中

【讨论】：