Using jQuery Ajax to calculate per table row
Question
I am just getting into Ajax/jQuery and was hoping someone could help me figure this out.
I have a table with multiple rows that is generated from php. On each TR row I have a 3 fields (days, hrs, mins) that I want to use to calculate time. The variables are POSTed to an ajax.php file for the calculations. and the response should populate the #totalhrs input field per table row.
I have it working so far, but only on the first row, and only if I make my calls to that specific set of IDs.
I believe the way I'm going about it is pretty ugly, and I was thinking there has to be a better more efficient way.
Thanks in advance
index.php
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".task").click(function() {
var days=$("#aaa_1_days").val();
var hrs=$("#aaa_1_hrs").val();
var mins=$("#aaa_1_mins").val();
$.ajax({
url:'ajax.php',
data:{days:days, hrs:hrs, mins:mins},
type:'POST',
success:function(data) {
$("#aaa_1_totalhrs").val(data);
}
});
});
});
</script>
</head>
<body>
<table>
<tr>
<td><input type='number' class='task' name='aaa_1_days' id='aaa_1_days' value='' min='0' /></td>
<td><input type='number' class='task' name='aaa_1_hrs' id='aaa_1_hrs' value='' min='0' /></td>
<td><input type='number' class='task' name='aaa_1_mins' id='aaa_1_mins' value='' min='0' max='45' step='15' /></td>
<td><input type='text' class='task' name='aaa_1_totalhrs' id='aaa_1_totalhrs' value='' min='0' readonly /></td>
</tr>
<tr>
<td><input type='number' class='task' name='bbb_2_days' id='bbb_2_days' value='' min='0' /></td>
<td><input type='number' class='task' name='bbb_2_hrs' id='bbb_2_hrs' value='' min='0' /></td>
<td><input type='number' class='task' name='bbb_2_mins' id='bbb_2_mins' value='' min='0' max='45' step='15' /></td>
<td><input type='text' class='task' name='bbb_2_totalhrs' id='bbb_2_totalhrs' value='' min='0' readonly /></td>
</tr>
<tr>
<td><input type='number' class='task' name='ccc_3_days' id='ccc_3_days' value='' min='0' /></td>
<td><input type='number' class='task' name='ccc_3_hrs' id='ccc_3_hrs' value='' min='0' /></td>
<td><input type='number' class='task' name='ccc_3_mins' id='ccc_3_mins' value='' min='0' max='45' step='15' /></td>
<td><input type='text' class='task' name='ccc_3_totalhrs' id='ccc_3_totalhrs' value='' min='0' readonly /></td>
</tr>
</table>
</body>
</html>
ajax.php
<?php
$post_days = $_POST['days'];
$post_hrs = $_POST['hrs'];
$post_mins = $_POST['mins'];
if($post_days){$days = $post_days*8;} else $days = 0;
if($post_hrs){$hrs = $post_hrs;} else $hrs = 0;
if($post_mins=='15'){$mins = 0.25;}
else if($post_mins=='30'){$mins = 0.5;}
else if($post_mins=='45'){$mins = 0.75;}
else $mins = 0;
$total = ($days+$hrs+$mins);
echo $total;
?>
1 answers
solution1
0 2021-04-02 05:50:56
You can use class to get required values from input-boxes. Then, use $(this).closest("tr") to get closest tr from input-box where change event has been occur and finally use .find("yourclassname") to get input values.
Demo Code :
$(document).ready(function() { $(".task").change(function() { //get closest tr var selector = $(this).closest("tr"); //use.find to get requred inputs var days = selector.find(".days").val(); var hrs = selector.find(".hrs").val(); var mins = selector.find(".mins").val(); console.log(days + " " + hrs + " " + mins) $.ajax({ url: 'ajax.php', data: { days: days, hrs: hrs, mins: mins }, type: 'POST', success: function(data) { selector.find(".totalhrs").val(data); } }); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <!--use class--> <td><input type='number' class='task days' name='aaa_1_days' id='aaa_1_days' value='' min='0' /></td> <td><input type='number' class='task hrs' name='aaa_1_hrs' id='aaa_1_hrs' value='' min='0' /></td> <td><input type='number' class='task mins' name='aaa_1_mins' id='aaa_1_mins' value='' min='0' max='45' step='15' /></td> <td><input type='text' class='task totalhrs' name='aaa_1_totalhrs' id='aaa_1_totalhrs' value='' min='0' readonly /></td> </tr> <tr> <td><input type='number' class='task days' name='bbb_2_days' id='bbb_2_days' value='' min='0' /></td> <td><input type='number' class='task hrs' name='bbb_2_hrs' id='bbb_2_hrs' value='' min='0' /></td> <td><input type='number' class='task mins' name='bbb_2_mins' id='bbb_2_mins' value='' min='0' max='45' step='15' /></td> <td><input type='text' class='task totalhrs' name='bbb_2_totalhrs' id='bbb_2_totalhrs' value='' min='0' readonly /></td> </tr> </table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.