英文:
How can I use jQuery with Laravel and Ajax to update a div's price based on a user-selected shipment service?
问题
我想要更新div中的价格，以使用用户选择的运输服务。
<p class="mb-1"><b id="shipping-value">Rp. 0</b></p>
当用户选择运输服务时，有人可以帮我吗？
英文:
i have input select like this :
<div class="mb-4 pb-2">
<select class="form-select" id="shipment-price" required
@if(Cart::content()->isEmpty()) disabled @endif>
<option value="" disabled selected style="display: none;">- Select Delivery Service -</option>
@forelse ($shipment as $shipping)
<option value="{{ $shipping->id }}">{{ $shipping->name }} ({{ presentPrice($shipping->price) }})</option>
@empty
<option value="0">-</option>
@endforelse
</select>
</div>
and div like this
<div class="row justify-content-between">
<div class="col">
<p class="mb-1"><b>Shipping</b></p>
</div>
<div class="flex-sm-col col-auto">
<p class="mb-1"><b id="shipping-value">Rp. 0</b></p>
</div>
</div>
i want to update div price to use user selected shipment service
<p class="mb-1"><b id="shipping-value">Rp. 0</b></p>
when user select the shipment service, can somebody help me ??
答案1
得分: 0
shipment-price 的 onChange 事件会触发对应的路由，返回 shipment value。
$(document).ready(function(){
$('#shipment-price').on('change', function(e){ //on change of shipment-price
let shipmentValue = $('#shipment-price').val(); // the dropdown item selected value
$.ajax({
type : "GET",
dataType : 'json',
url : "{{route('pricevalue', ['id='+shipmentValue])}}",
success : function(data){
console.log(data);
if(data.status){ //from your response
$('#shipping-value').val(data.amount) // you can check the console to be sure of the response
}
},error: function(e){
console.log(e);
},
})
});
})
你的路由会是这样的：
Route::get('/get-shipment-price/{id}', [ShipmentController::class, 'getShipmentPrice'])->name('pricevalue');
而在 YourController 中的 getShipmentPrice 函数会是这样的：
public function getShipmentPrice(Request $request)
{
$shipmentPrice = Shipment::where('shipment-type', $request->id)->first();
if ($shipmentPrice) {
return response()->json([
'status' => true, 'data' => $shipmentPrice
]);
}
return response()->json([
'status' => false, 'message' => 'Error',
]);
}
英文:
onChange of shipment-price, you would have a route to return the shipment value.
$(document).ready(function(){
$('#shipment-price').on('change', function(e){ //on change of shipment-price
let shipmentValue = $('#shipment-price').val(); // the dropdown item selected value
$.ajax({
type : "GET",
dataType : 'json',
url : "{{route('pricevalue', ['id'=>"+shipmentValue+"])}}",
success : function(data){
console.log(data);
if(data.status){ //from your response
$('#shipping-value').val(data.amount) // you can check the console to be sure of the response
}
},error: function(e){
console.log(e);
},
})
});
})
Your route would look like:
Route::get('/get-shipment-price/{id}', [ShipmentController::class, 'getShipmentPrice'])->name('pricevalue');
While your getShipmentPrice function in YourController would look like:
public function getShipmentPrice(Request $request)
{
$shipmentPrice = Shipment::where('shipment-type', $request->id)->first();
if ($shipmentPrice) {
return response()->json([
'status' => true, 'data' => $shipmentPrice
]);
}
return response()->json([
'status' => false, 'message' => 'Error',
]);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论