Whenever I choose a category, the price is displayed in the select box. However, when I input a value in the quantity box, it multiplies the price and quantity to show the total. But instead of fetching the ID of the price and quantity multiplied from the ID, I want the multiplication of quantity and price directly. How can I achieve this?
Javascript for selecting price value from subcategories
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script type="text/javascript">
// Changing price..........
$(document).ready(function()
{
$('select#subcategory').on('change', function() {
if(subID = $(this).val())
{
$.ajax({
url: "{{url('/')}}" + '/Purchaser/add_purchaser/ajax/' + subID,
type: "GET",
dataType: "json",
success: function(data)
{
console.log(data);
$('select#productprice').empty();
$.each(data, function(key, value)
{
var option = new Option(value, key);
$(option).html(value);
$('select#productprice').append(option);
});
}
});
}else{
$('select#productprice').empty();
}
});
});
</script>
Javascript for calculating total
<script type="text/javascript">
$('tbody').delegate('#price,#quantity','keyup',function(){
var tr = $(this).parent().parent();
var price = tr.find('#productprice').val();
var quantity = tr.find('#quantity').val();
var total = (price * quantity);
tr.find('#total').val(total);
});
</script>
HTML file
<tbody>
<tr>
<td>
<select class="form-control" name="cat_id[]" id="category">
<option value="" disabled selected>Select Category</option>
@foreach($category as $key)
<option value="{{ $key->id }}">{{ $key->cat_nm }}</option>
@endforeach
</select>
</td>
<td>
<select class="form-control" id="subcategory" name="sub_cat_id[]">
<option value="" disabled selected>Subcategory from category</option>
</select>
</td>
<td>
<select class="form-control" id="productprice" name="price_id[]">
<option>Price from subcategory</option>
</select>
</td>
<td>
<input type="text" class="form-control" name="quantity[]" id="quantity">
</td>
<td>
<input type="text" class="form-control" name="total[]" id="total">
</td>
<td>
<a href="#" class="btn btn-danger" id="remove"><i class="fa fa-remove"></i></a>
</td>
</tr>
</tbody>