I want to create auto calculation in javascript but my form in foreach. So for now it only calculate once… But my form most of it is in array
here is my form view.blade code
<!-- Retail -->
<div class="card-body" id="retail">
@foreach($tenant->tenantSpace as $tenantSpace)
<div class="border p-2 mt-1 mb-3 mt-lg-0 rounded">
<h4>Lot no: {{$tenantSpace->space->unit_no}}</h4>
<input type="hidden" name="tenant_space_id[]" value="{{$tenantSpace->id}}">
<div class="row">
<div class="col-lg-3 mb-2">
<div class="input-group">
<div class="input-text text-muted" style="font-size: 17px; ">Total Size (Sqft): </div>
<input id="total-area" name="total_area[]" class="form-control" type="number" placeholder="Total Size" value="{{ $tenantSpace->space->space_size }}" readonly>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="row">
<!-- First Table -->
<div class="col-lg-4">
<div class="col-lg-12">
<div class="border p-2 mt-1 mt-lg-0 rounded">
<h4>Year 1</h4>
<div class="table-responsive">
<table>
<thead>
<tr class="text-muted mb-4 text-truncate">
<th>Price PSF (RM)</th>
<th style="padding-left: 9px;">Total Price (RM)</th>
</tr>
</thead>
<tbody style="text-align: center;">
<tr>
<td>
<input id="price-rate-yr1" name="price_rate_yr1[]" type="text" class="form-control" placeholder="Price PSF" value="{{ $tenantSpace->rate->price_rate_yr1 }}"></input>
<input id="id" name="rate_id[]" type="hidden" class="form-control" placeholder="id" value="{{ $tenantSpace->rate->id }}"></input>
</td>
<td>
<input id="monthly-rent-yr1" name="monthly_rent_yr1[]" type="text" class="form-control" placeholder="Total Price (RM)" value="{{ $tenantSpace->rate->monthly_rent_yr1 }}" readonly></input>
</td>
@error('price_rate_yr1[]')
<div class="alert alert-danger">{{ $message }}</div>
@enderror
</tr>
</tbody>
</table>
</div> <!-- end .table-responsive-->
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12">
<div class="border p-2 mt-1 mt-lg-0 rounded">
<h4>Year 2</h4>
<div class="table-responsive">
<table>
<thead>
<tr class="text-muted mb-4 text-truncate">
<th>Price PSF (RM)</th>
<th style="padding-left: 9px;">Total Price (RM)</th>
</tr>
</thead>
<tbody style="text-align: center;">
<tr>
<td>
<input id="price-rate-yr2" name="price_rate_yr2[]" type="text" class="form-control" placeholder="Price PSF" value="{{ $tenantSpace->rate->price_rate_yr2 }}"></input>
</td>
<td>
<input id="monthly-rent-yr2" name="monthly_rent_yr2[]" type="text" class="form-control" placeholder="Total Price (RM)" value="{{ $tenantSpace->rate->monthly_rent_yr2 }}" readonly></input>
</td>
</tr>
</tbody>
</table>
</div> <!-- end .table-responsive-->
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12">
<div class="border p-2 mt-1 mt-lg-0 rounded">
<h4>Year 3</h4>
<div class="table-responsive">
<table>
<thead>
<tr class="text-muted mb-4 text-truncate">
<th>Price PSF (RM)</th>
<th style="padding-left: 9px;">Total Price (RM)</th>
</tr>
</thead>
<tbody style="text-align: center;">
<tr>
<td>
<input id="price-rate-yr3" name="price_rate_yr3[]" type="text" class="form-control" placeholder="Price PSF" value="{{ $tenantSpace->rate->price_rate_yr3 }}"></input>
</td>
<td>
<input id="monthly-rent-yr3" name="monthly_rent_yr3[]" type="text" class="form-control" placeholder="Total Price (RM)" value="{{ $tenantSpace->rate->monthly_rent_yr3 }}" readonly></input>
</td>
</tr>
</tbody>
</table>
</div> <!-- end .table-responsive-->
</div>
</div>
</div>
</div>
</div>
</div>
@endforeach
</div>
<!-- end col -->
this is my current javascript for auto calculation
<script>
$(document).ready(function() {
// Function to calculate monthly rent for each year
function calculateMonthlyRent(year) {
var totalArea = parseFloat($('#total-area').val());
var priceRate = parseFloat($('#price-rate-' + year).val());
var monthlyRent = totalArea * priceRate;
$('#monthly-rent-' + year).val(monthlyRent.toFixed(2));
}
// Bind input change event for each price input
$('[id^=price-rate-]').on('input', function() {
var year = $(this).attr('id').split('-').pop();
calculateMonthlyRent(year);
});
// Trigger calculation initially
$('[id^=price-rate-]').each(function() {
var year = $(this).attr('id').split('-').pop();
calculateMonthlyRent(year);
});
});
</script>
I expect it can auto calculate based on the array [], for now it can only auto calculate once … Please help me