javascript - 从视图接收值到控制器
问题描述
我有一个显示运动鞋的主视图:
当您将光标放在一双鞋上时,卡片会向下滑动并显示数据库中存在的尺码(如果有库存)。
我想知道如何选择尺寸,以便我可以记录该值并将其发送到控制器。
我做了这样的事情:
<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>
解决方案
请不要将输入类型设置为"hidden",而是将其样式更改为从显示中隐藏,如下所示:
<input type="number" name="size" value="{{$stock->size}}" style="display:none;"/>
推荐阅读
- python - python插入实时文本框
- docker - Kubernetes 无法提取图像,没有基本的身份验证凭据
- http - HTTP 方法 GET 可以与“multipart/form-data”编码一起使用吗?
- css - 在不同分辨率的文本网格后面一致地缩放和定位 SVG
- sql - 如何在 SQL 中创建一个自动填充的日期表
- node.js - 带有 ESLint 和 Prettier 的 TypeScript 轻量级脚本支持
- r - 高阶因子的 AVE 和 Omega 值(lavaan 和 semTools)
- python - Numpy 可以在 CPU 上击败 keras 矩阵乘法的运行时间吗?
- linux - 你如何编写一个 linux shell 脚本来操作文件名和创建新文件
- angular - 从 p 表的 TS 文件内部对 2 和 3 供电