从视图接收值到控制器

Question

我有一个显示运动鞋的主视图：

当您将光标放在一双鞋上时，卡片会向下滑动并显示数据库中存在的尺码（如果有库存）。

我想知道如何选择尺寸，以便我可以记录该值并将其发送到控制器。

我做过这样的事情：

<div class="all-sizes">
<div id="stock-size-{{$stock->id}}" class="stock-size" onclick="changeText({{$stock->id}})">
<span>{{$stock->size}}</span>
<input type="hidden" name="size" value="{{$stock->size}}"/>
</div>
 </div>

我试图通过隐藏到控制器的输入类型将其传递并在那里拾取它，但我想我需要一个 id 或其他东西...

控制器：

public function add($id, Request $request) {
        $product = Product::find($id);
        $size = $request->input('size');
        
        
        if ($product) {
            $cart_item = new CartItem();
            $cart_item->user_id = \Auth::user()->id;
            $cart_item->product_id = $product->id;
            $cart_item->quantity = 1;
            $cart_item->size = $size;
            $cart_item->save();
        }
        
        return redirect()->route('home')->with(['message', $product->brand." ".$product->name." ".'añadido a la cesta']);
    }

（其余代码完美运行，只是 $ size 将我选为 null 失败）

我还想知道如何确保当我按下尺寸时，我不会更改所有尺寸的样式，（如果没有，例如，如果我按下 19，它是彩色的，但如果我再按下30 19 恢复正常样式和颜色 30)

现在我有这样的东西：

为它们着色和更改样式的代码：

function changeText(id) {
    var stock_size = document.querySelector("#stock-size-" + id);
    var stock_size_span = document.querySelector("#stock-size-" + id + " span");
    stock_size.style.borderStyle = "none";
    stock_size.style.backgroundColor = "black";
    stock_size_span.style.color = "white";
}

谢谢！！

编辑：更新了视图中的所有代码。

    <div class="swiper-container">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            @foreach($products_limit as $product)
            <div class="swiper-slide">
                <div id="card-{{$product->id}}" class="home-card" onmouseenter="mouseEnterMethod('{{$product->id}}')" onmouseleave="mouseLeaveMethod('{{$product->id}}')">
                    @foreach($product->product_images as $i=>$product_image)
                    @if($i<1)
                    <a href="{{route('product.detail', ['brand' => $product->brand, 'name' => $product->name])}}"><img id="image-{{$product->id}}" class="card-image" src="{{url('product/'.$product_image->image)}}">
                        @endif
                        @endforeach
                        <h2>{{$product->brand . " ". str_replace('-', ' ', $product->name)}}</h2>
                        @if($product->discount>0)
                        <span><s>{{$product->price}} €</s></span>
                        <span class='discount'>-{{$product->discount}}%</span>
                        <p>{{\CountCartItem::calcPriceWithDiscount($product->id)}} €</p>
                        @else
                        <span></span>
                        <p>{{$product->price}} €</p>
                    </a>
                    @endif
                    @if(count($product->stocks)>0)
                    @foreach($product->stocks->sortBy('size') as $stock)
                    @if($stock->stock>0)
                    <div class="all-sizes">
                        <div id="stock-size-{{$stock->id}}" class="stock-size" onclick="changeText({{$stock->id}})">
                            <span>{{$stock->size}}</span>
                            <input style="display:none;" name="size" value="{{$stock->size}}"/>
                        </div>
                    </div>
                    @else
                    <p class='no-stock'>{{$stock->size}}</p>
                    @endif
                    @endforeach
                    @else
                    <p>No hay Stock!!</p>
                    @endif
                    <a href="{{route('cart.add', ['id' => $product->id])}}" class="addCart" id="addCart-{{$product->id}}">Add to Cart</a>
                </div>
            </div>
            @endforeach
        </div>

        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

Answer 1

请不要将输入类型设为“隐藏”，而是将其样式更改为隐藏，如下所示：

<input type="number" name="size" value="{{$stock->size}}" style="display:none;"/>