Reputation: 293
How do i prevent and give alert so user can't input the value of totalontarget and totalofftarget to be larger than totalofservices
<script>
$(document).ready(function() {
$('.totalofservices').keyup(function(){
$(this).closest('tr').find(".totalontarget").val($(this).val());
$(this).closest('tr').find(".totalofftarget").val("0");
});
});
</script>
for($x = 1; $x <= 3; ++$x) {
echo "
<tr>
<td>Zone $x</td>
<td><input style='text-align:center' class='form-control totalofservices' type='text' size='20' id='totalofservices[]' name='totalofservices'></td>
<td><input style='text-align:center' class='form-control totalontarget' type='text' size='20' id='totalontarget' name='totalontarget[]'></td>
<td><input style='text-align:center' class='form-control totalofftarget' type='text' size='20' id='totalofftarget' name='totalofftarget[]'></td>
</tr>";
}
Upvotes: 0
Views: 82
Reputation: 186
Try something like that
$('.totalontarget, .totalofftarget').on('keyup', function(e){
var max = $(this).parent().parent().find('.totalofservices').val();
if ($(this).val() > max) {
alert('Value more that ' + max);
e.preventDefault();
}
});
Upvotes: 0
Reputation: 726
Check this out : https://jqueryvalidation.org/. Anyway, even if client validation could look more user-friendly, it should be implemented also in the server side.
Upvotes: 1