The onkeyup() event cannot worked after I add new row.
I think the problem is because the function checkamount() where it can only performed based on first rom.
The amount should be changed after I change the Hour as first row worked.
Please help. Thanks !!
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jautocalc@1.3.1/dist/jautocalc.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var repeat = '<tr><td><input class="form-control" name="dayhour[]" type="number" id="dayhour" onkeyup="checkamount()" required></td> <td><select class="form-control" name="wagetype[]" type="text" id="wagetype" onchange="calc(this)" > <option value="" id="-----" hidden>-----</option><option value="Standby Allowance" id="Standby Allowance">Standby Allowance</option><option value="Normal days - OT" id="Normal days - OT">Normal days - OT</option> <option value="Public Holidays - OT" id="Public Holidays - OT">Public Holidays - OT</option> </select> </td><td><input class="form-control" name="rate[]" type="double" id="rate" readonly ></td><td><input class="form-control" name="amount[]" type="double" id="amount" readonly></td></td><td><input class="btn btn-danger" type="button" name="remove" id="remove" value="remove"></td> </tr>';
$("#add").click(function() {
$("#table_field").append(repeat);
});
$("#table_field").on('click', '#remove', function() {
$(this).closest('tr').remove();
});
});
function calc(el) {
//get num1 field value
var aa = parseFloat($(el).closest('tr').find('[name*=dayhour').val());
var amount;
var rate;
//compare
if (el.value == "Standby Allowance") {
rate = 300.00;
amount = 300.00;
} else if (el.value == "Normal days - OT") {
rate = 18.75;
amount = rate * aa;
}else if (el.value == "Public Holidays - OT") {
rate = 37.50;
amount = rate * aa;
}
//find rate and amout and add value there
$(el).closest('tr').find('[name*=rate]').val(rate);
$(el).closest('tr').find('[name*=amount]').val(amount);
}
function checkamount() {
var textValue1 = document.getElementById('dayhour').value;
var textValue2 = document.getElementById('rate').value;
document.getElementById('amount').value =textValue1 * textValue2;
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="insert-form" name="table_field" id="insert_form" method="post" action="applyForm.inc.php" onsubmit="return checkforblank()">
<hr><h1 class="text-center">Overtime Table </h1><hr>
<div class="input-field">
<table class="table table-bordered" id="table_field" >
<tr>
<th>Hour</th>
<th>wagetype</th>
<th>Rate</th>
<th>Amount</th>
<th>Add or Remove</th>
</tr>
<tr>
<td><input class="form-control" name="dayhour[]" type="number" id="dayhour" onkeyup="checkamount()" required ></td>
<td><select class="form-control" name="wagetype[]" type="text" id="wagetype" onchange="calc(this)" >
<option value="" id="-----" hidden>-----</option>
<option value="Standby Allowance" id="Standby Allowance">Standby Allowance</option>
<option value="Normal days - OT" id="Normal days - OT">Normal days - OT</option>
<option value="Public Holidays - OT" id="Public Holidays - OT">Public Holidays - OT</option>
</select>
</td>
<td><input class="form-control" name="rate[]" type="double" id="rate" readonly ></td>
<td><input class="form-control" name="amount[]" type="double" id="amount" readonly></td>
<td><input class="btn btn-warning" type="button" name="add" id="add" value="add"></td>
</tr>
</table>
</div>
</form>
Here is how it's worked http://jsfiddle.net/L9eo6zfn/1/
Since you're already using jQuery, you can catch the onkeyup event with this library. The important thing is to attach the event to the document, this way, it will work with any input, even those added programmatically.
Here is how I would do it:
$(document).ready(function() {
var repeat = '<tr><td><input class="form-control" name="dayhour[]" type="number" id="dayhour" required></td> <td><select class="form-control" name="wagetype[]" type="text" id="wagetype" onchange="calc(this)" > <option value="" id="-----" hidden>-----</option><option value="Standby Allowance" id="Standby Allowance">Standby Allowance</option><option value="Normal days - OT" id="Normal days - OT">Normal days - OT</option> <option value="Public Holidays - OT" id="Public Holidays - OT">Public Holidays - OT</option> </select> </td><td><input class="form-control" name="rate[]" type="double" id="rate" readonly ></td><td><input class="form-control" name="amount[]" type="double" id="amount" readonly></td></td><td><input class="btn btn-danger" type="button" name="remove" id="remove" value="remove"></td> </tr>';
$("#add").click(function() {
$("#table_field").append(repeat);
});
$("#table_field").on('click', '#remove', function() {
$(this).closest('tr').remove();
});
// Here is how to catch the keyup event
$(document).on("keyup", "#dayhour", function() {
console.log("checkamount");
checkamount();
});
});
function calc(el) {
//get num1 field value
var aa = parseFloat($(el).closest('tr').find('[name*=dayhour').val());
var amount;
var rate;
//compare
if (el.value == "Standby Allowance") {
rate = 300.00;
amount = 300.00;
} else if (el.value == "Normal days - OT") {
rate = 18.75;
amount = rate * aa;
}else if (el.value == "Public Holidays - OT") {
rate = 37.50;
amount = rate * aa;
}
//find rate and amout and add value there
$(el).closest('tr').find('[name*=rate]').val(rate);
$(el).closest('tr').find('[name*=amount]').val(amount);
}
function checkamount() {
var textValue1 = document.getElementById('dayhour').value;
var textValue2 = document.getElementById('rate').value;
document.getElementById('amount').value =textValue1 * textValue2;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="insert-form" name="table_field" id="insert_form" method="post" action="applyForm.inc.php" onsubmit="return checkforblank()">
<hr><h1 class="text-center">Overtime Table </h1><hr>
<div class="input-field">
<table class="table table-bordered" id="table_field" >
<tr>
<th>Hour</th>
<th>wagetype</th>
<th>Rate</th>
<th>Amount</th>
<th>Add or Remove</th>
</tr>
<tr>
<td><input class="form-control" name="dayhour[]" type="number" id="dayhour" onkeyup="checkamount()" required ></td>
<td><select class="form-control" name="wagetype[]" type="text" id="wagetype" onchange="calc(this)" >
<option value="" id="-----" hidden>-----</option>
<option value="Standby Allowance" id="Standby Allowance">Standby Allowance</option>
<option value="Normal days - OT" id="Normal days - OT">Normal days - OT</option>
<option value="Public Holidays - OT" id="Public Holidays - OT">Public Holidays - OT</option>
</select>
</td>
<td><input class="form-control" name="rate[]" type="double" id="rate" readonly ></td>
<td><input class="form-control" name="amount[]" type="double" id="amount" readonly></td>
<td><input class="btn btn-warning" type="button" name="add" id="add" value="add"></td>
</tr>
</table>
</div>
</form>