Dec 11, 2022
0
Level 3
How to check dynamically added each row selling quantity with quantity in stock using jQuery/JavaScript in laravel-9
I want to create a function on keyup click that should rise a message Selling Quantity is more than Quantity in Stock I tried the below code
I am getting the data using ajax request and there is a readonly column which shows the total product count in stock which works perfectly. I am adding the multiple invoices to dynamicly adding row list the only problem I am facing is that I don't know how to check each product count when I am adding it into the list of invoice should not be grater than stock it only check the first row did not check the other rows.
I am little week on jquery/javascript if someone could help me.
Here I am checking the stock quantity and selling quantity
<script type="text/javascript">
$(document).on('keyup click', '.unit_price,.selling_qty', function() {
// start here
var current_stock_qty = $('#current_stock_qty').val();
var seling_qty = $(".selling_qty").val();
var sum = 0;
if (current_stock_qty <seling_qty) {
$.notify("Selling Quantity is Grather then Quantity in Stock " , {
globalPosition: 'top right',
className: 'error'
});
}
});
}); // end here
</script>
add_invoice Blade html code
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">Add Invoice </h4><br><br>
<div class="row">
<div class="col-md-3">
<div class="md-3">
<label for="example-text-input" class="form-label">Category Name </label>
<select name="category_id" id="category_id" class="form-select select2"
aria-label="Default select example">
<option selected="">Open this select menu</option>
@foreach ($category as $cat)
<option value="{{ $cat->id }}">{{ $cat->name }}</option>
@endforeach
</select>
</div>
</div>
<div class="col-md-3">
<div class="md-3">
<label for="example-text-input" class="form-label">Product Name </label>
<select name="product_id" id="product_id" class="form-select select2"
aria-label="Default select example">
<option selected="">Open this select menu</option>
</select>
</div>
</div>
<div class="col-md-1">
<div class="md-3">
<label for="example-text-input" class="form-label">Stock(Pic/Kg)</label>
<input class="form-control example-date-input" name="current_stock_qty" type="text"
id="current_stock_qty" readonly style="background-color:#ddd">
</div>
</div>
<div class="col-md-2">
<div class="md-3">
<label for="example-text-input" class="form-label" style="margin-top:43px;">
</label>
<i
class="btn btn-secondary btn-rounded waves-effect waves-light fas fa-plus-circle addeventmore">
Add More</i>
</div>
</div>
</div>
</div>
<!-- ---------------------------------- -->
<div class="card-body">
<form method="post" action="{{ route('invoice.store') }}">
@csrf
<table class="table-sm table-bordered" width="100%" style="border-color: #ddd;">
<thead>
<tr>
<th width="7%">PSC/KG</th>
<th width="10%">Unit Price </th>
<th width="15%">Total Price</th>
<th width="7%">Action</th>
</tr>
</thead>
<tbody id="addRow" class="addRow">
</tbody>
<tbody>
</tbody>
</table><br>
<div class="form-row">
<div class="form-group col-md-12">
<textarea name="description" class="form-control" id="description" placeholder="Write Description Here"></textarea>
</div>
</div><br>
<div class="form-group">
<button type="submit" class="btn btn-info" id="storeButton"> Invoice Store</button>
</div>
</form>
</div> <!-- End card-body -->
</div>
</div> <!-- end col -->
</div>
javascrip code is like below
<script id="document-template" type="text/x-handlebars-template">
<tr class="delete_add_more_item" id="delete_add_more_item">
<input type="hidden" name="date" value="@{{date}}">
<input type="hidden" name="invoice_no" value="@{{invoice_no}}">
<td>
<input type="hidden" name="category_id[]" value="@{{category_id}}">
@{{ category_name }}
</td>
<td>
<input type="hidden" name="product_id[]" value="@{{product_id}}">
@{{ product_name }}
</td>
<td>
<input type="number" min="1" class="form-control selling_qty text-right" name="selling_qty[]" value="">
</td>
<td>
<input type="number" class="form-control unit_price text-right" name="unit_price[]" value="">
</td>
<td>
<input type="number" class="form-control selling_price text-right" name="selling_price[]" value="0" readonly>
</td>
<td>
<i class="btn btn-danger btn-sm fas fa-window-close removeeventmore"></i>
</td>
</tr>
</script>
<script type="text/javascript">
$(document).ready(function() {
$(document).on("click", ".addeventmore", function() {
var date = $('#date').val();
var invoice_no = $('#invoice_no').val();
var category_id = $('#category_id').val();
var category_name = $('#category_id').find('option:selected').text();
var product_id = $('#product_id').val();
var product_name = $('#product_id').find('option:selected').text();
if (date == '') {
$.notify("Date is Required", {
globalPosition: 'top right',
className: 'error'
});
return false;
}
if (category_id == '') {
$.notify("Category is Required", {
globalPosition: 'top right',
className: 'error'
});
return false;
}
if (product_id == '') {
$.notify("Product Field is Required", {
globalPosition: 'top right',
className: 'error'
});
return false;
}
var source = $("#document-template").html();
var tamplate = Handlebars.compile(source);
var data = {
date: date,
invoice_no: invoice_no,
category_id: category_id,
category_name: category_name,
product_id: product_id,
product_name: product_name
};
var html = tamplate(data);
$("#addRow").append(html);
});
</script>
$(document).on("click", ".removeeventmore", function(event) {
$(this).closest(".delete_add_more_item").remove();
totalAmountPrice();
});
<script type="text/javascript">
$(function() {
$(document).on('change', '#category_id', function() {
var category_id = $(this).val();
$.ajax({
url: "{{ route('get-product') }}",
type: "GET",
data: {
category_id: category_id
},
success: function(data) {
var html = '<option value="">Select Category</option>';
$.each(data, function(key, v) {
html += '<option value=" ' + v.id + ' "> ' + v.name +
'</option>';
});
$('#product_id').html(html);
}
})
});
});
</script>
<script type="text/javascript">
$(function() {
$(document).on('change', '#product_id', function() {
var product_id = $(this).val();
$.ajax({
url: "{{ route('check-product-stock') }}",
type: "GET",
data: {
product_id: product_id
},
success: function(data) {
$('#current_stock_qty').val(data);
}
});
});
});
</script>
Please or to participate in this conversation.