我正在撰寫庫存管理系統，我用什么用戶來選擇產品，我使用 axios 來獲取產品的相應價格
它是一個多行，用戶單擊添加產品以選擇產品并顯示相應的價格
jquery 創建一個新的產品行，還允許用戶選擇產品，它使用 axios 從服務器請求價格。
當請求從服務器回傳價格時，它會更新價格輸入欄位。
但它使用 0 而不是 axios 的回應來更新價格
$("#add-product").click(function(e) {
e.preventDefault();
$("#new-field").clone().appendTo("#wrapper");
});
$("#payment-method").change(function() {
$(".full-payment").css({
"display": "block"
});
})
$("#wrapper").on('change', '.product', function(e) {
e.preventDefault();
$(this).closest('.row-field').find('.price').html("loading...")
let price = 0;
axios.get("/api/get-price/" $(this).val())
.then(function(response) {
console.log(response.data.price)
$(this).closest('.row-field').find('.price').html(price);
$(this).closest('.row-field').find('.price').val(price);
});
})
$("#wrapper").on('keyup', '.quantity', function() {
var total = 0;
let price = $(this).closest(".row-field").find(".price").val();
console.log("price", price)
if (isNaN(price)) {
alert("Allow the rpice to load")
} else {
total = parseInt($(this).closest(".row-field").find(".price").val()) * parseInt($(this).val());
if (isNaN(total)) {
$(this).closest(".row-field").find(".sub-total").html(0.00);
return;
}
$(this).closest(".row-field").find(".sub-total").html(total);
console.log("total", total);
var total = 0,
val;
$(".sub-total").each(function() {
vals = parseInt($(this).text());
console.log("value ", vals)
val = isNaN(vals) || $.trim(vals) === "" ? 0 : parseFloat(vals);
total = val;
})
$(".total").html(total);
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6 offset-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
<li class="breadcrumb-item active">Add New Sales</li>
</ol>
</div>
</div>
</div>
<!-- /.container-fluid -->
</section>
<!-- Main content -->
<section class="content">
<div class="container-fluid">
<div class="row">
<!-- left column -->
<div class="col-md-12">
<!-- general form elements -->
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Add New Sales</h3>
</div>
<!-- /.card-header -->
<!-- form start -->
<form role="form" action="{{ url('admin/sales/store-sales') }}" method="post">
@csrf
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Payment Method</label>
<select name="payment_method" id="payment-method" class="form-control">
<option value="">Select Payment Method</option>
<option value="cash">Cash</option>
<option value="bank_transfer">Bank Transfer</option>
</select>
<!-- @if ($errors->first())
<span style="font-size: 12px; color: red">{{ $errors->first('payment_method') }}</span>
@endif -->
</div>
</div>
<div class="col-md-12 right my-3">
<a href="#" class="btn btn-danger" id="add-product">Add New Product</a>
</div>
<div id="wrapper" class="col-md-12">
<div id="new-field" class="col-md-12 row-field">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label>Product Name</label>
<select name="product[]" class="form-control product">
<option value="">Select Product Name</option>
@foreach ($products as $product)
<option value="{{ $product->id }}" name="product[]">
{{ $product->name }}</option>
@endforeach
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Quantity</label>
<input type="text" name="quantity[]" class="form-control quantity" value="{{ old('quantity') }}" placeholder="Enter Quantity">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Unit Price</label>
<div class="price form-control">Price</div>
<input type="hidden" name="price[]" class="price" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Sub Total</label>
<div class="form-control sub-total">0.00</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.card-body -->
<div id="new-field" class="row">
<div class="col-md-9">
Total
</div>
<div class="col-md-3 total">
N
<span>0.00</span>
</div>
</div>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-primary float-md-right">Add Sales</button>
</div>
</form>
</div>
<!-- /.card -->
</div>
<!--/.col (left) -->
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</section>
</div>uj5u.com熱心網友回復：
你有一個欄位和一個具有相同類的 div。我會保存
const $priceDiv = $(this).closest('.row-field').find('div.price');
$priceDiv.html("loading")
const $priceInp = $(this).closest('.row-field').find('input.price');
.then(function(response) {
console.log(response.data.price);
$priceDiv.html(response.data.price);
$priceInp.val(response.data.price);
還要記得多換地方：
$(this).closest(".row-field").find(".price").val();
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/430035.html
標籤：jQuery 拉拉维尔 laravel-5 axios
上一篇：AArch64例外優先級