javascript - Receive a value from a view to a controller

Question

I have a home view that shows sneakers:

When you put the cursor over a pair of shoes, the card slides down and shows the sizes that exist in the database if they have stock.

I would like to know how I could go about choosing a size so that I can record that value and send it to the controller.

I have done something like this:

<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>

I have tried to pass it through an input type hidden to the controller and there pick it up, but I think I would need an id or something ...

The controller:

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']);
    }

(The rest of the code works perfectly, it just fails that $ size picks me up null)

I would also like to know how to make sure that when I press the sizes, I do not change the styles of all of them, (If not, if for example, I press 19 it is colored but if I then press 30 the 19 return to their normal styles and color 30)

Now I have something like this:

The code that colors them and changes the styles:

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";
}

Thanks!!

EDIT: Updated with all code from view.

    <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

Please don't make the input type "hidden", instead change it's style to hide is from display like this:

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