如何對使用ajax生成的具有相同類的所有文本框的值求和？
[英]How to sum the values of all the textboxes with same class which are generated using ajax?
問題描述
我想對使用 ajax 生成的文本框的所有值求和。 我有類名adminhours的文本框，這些文本框是使用 ajax 生成的。 總和應該顯示在另一個文本框中，在類adminhours的文本框的更改事件上。 總和應乘以管理費率文本框。 請幫我。 提前致謝。
HTML
<form action="" method="post">
<div class="timecardstepcontainer">
<table class="widefat" style="width:100%" id="steponetable">
<thead>
<tr>
<th>Name</th>
<th>Email2(payment)</th>
<th>Class Rate</th>
<th>Admin Rate</th>
<th>Week</th>
<th>Status</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select name="txtuser" id="txtuser">
<option>--select--</option>
<option value="2">nitinjohnson2000</option>
</select>
</td>
<td><input type="text" name="txtemail2" style="width:100%;" readonly=""></td>
<td width="5%"><input type="text" name="txtclassrate" style="width:80px;" readonly=""></td>
<td width="5%"><input type="text" name="txtadminrate" style="width:80px;" readonly=""></td>
<td><!--<input type="text" name="txtweek" id="txtweek" />-->
<select name="txtweek" id="txtweek">
<option>--select--</option>
<option>08-31-2015</option>
<option>09-07-2015</option>
<option>09-14-2015</option>
<option>09-21-2015</option>
<option>09-28-2015</option>
<option>10-05-2015</option>
<option>10-12-2015</option>
<option>10-19-2015</option>
</select>
</td>
<td><label id="txtstatus">Not Saved</label></td>
<td><textarea name="txtcomment"></textarea></td>
</tr>
</tbody>
</table>
</div>
<div class="timecardstepcontainer" id="steptwotable">
<table class="widefat" style="width:100%">
<thead>
<tr>
<th>Session</th>
<th>Day of week</th>
<th>Date</th>
<th>Pre-Assigned</th>
<th>Start Date</th>
<th>End Date</th>
<th>Present</th>
<th>Late Arrival</th>
<th>Expense</th>
<th>Admin Hours</th>
<th>Comments</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fall 2015 - Bethany Elementary Chess Program - Plano ISD</td>
<td>Wed</td>
<td>09-02-2015</td>
<td>Y</td>
<td>2015-09-09</td>
<td>2015-12-12</td>
<td><input type="checkbox" name="presentdays[]"></td>
<td><input type="checkbox" name="latedays[]"></td>
<td>5</td>
<td><input type="text" name="admin_hours[]" class="adminhours" value="0" style="width:50px;"></td>
<td><input type="text" name="item_comment" style="width:80px;"></td>
</tr>
<tr>
<td>Fall 2015 - Ashley Elementary Chess Program - Frisco ISD</td>
<td>Mon</td>
<td>08-31-2015</td>
<td>Y</td>
<td>2015-09-14</td>
<td>2015-12-12</td>
<td><input type="checkbox" name="presentdays[]"></td>
<td><input type="checkbox" name="latedays[]"></td>
<td>15</td><td><input type="text" name="admin_hours[]" class="adminhours" value="0" style="width:50px;"></td>
<td><input type="text" name="item_comment" style="width:80px;"></td>
</tr>
<tr>
<td>Fall 2015 - Bledsoe Elementary Chess Program - Frisco ISD</td>
<td>Wed</td>
<td>09-02-2015</td>
<td>Y</td>
<td>2015-09-16</td>
<td>2015-12-12</td>
<td><input type="checkbox" name="presentdays[]"></td>
<td><input type="checkbox" name="latedays[]"></td>
<td>15</td>
<td><input type="text" name="admin_hours[]" class="adminhours" value="0" style="width:50px;"></td>
<td><input type="text" name="item_comment" style="width:80px;"></td>
</tr>
<tr>
<td>Fall 2015 - Anderson Elementary Chess Program - Frisco ISD</td>
<td>Mon</td>
<td>08-31-2015</td>
<td>Y</td>
<td>2015-09-21</td>
<td>2015-12-12</td>
<td><input type="checkbox" name="presentdays[]"></td>
<td><input type="checkbox" name="latedays[]"></td>
<td>5</td>
<td><input type="text" name="admin_hours[]" class="adminhours" value="0" style="width:50px;"></td>
<td><input type="text" name="item_comment" style="width:80px;"></td>
</tr>
</tbody>
</table>
</div>
<div class="timecardstepcontainer">
<table class="widefat" style="width:100%" id="stepthreetable">
<thead>
<tr>
<th>Day</th>
<th>Classes $</th>
<th>Late $</th>
<th>Expense</th>
<th>Admin</th>
<th>Approved Adjustment</th>
<th>Approved Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="number_of_classes" value="4" style="width:50px;" readonly=""></td>
<td><input type="text" name="totalclasses" value="40" readonly=""></td>
<td><input type="text" value="" id="latecharges" readonly=""></td>
<td><input type="text" name="totalexpense" value="40" readonly=""></td>
<td><input type="text" name="totaladminrate" value="0" readonly=""></td>
<td><input type="text" name="approved_adjustment" id="approved_adjustment" style="width:50px;"></td>
<td><textarea name="approver_comment"></textarea></td>
</tr>
</tbody>
</table>
</div>
<div class="timecardstepcontainer">
<table class="widefat" style="width:100%">
<tbody><tr>
<td>Total</td>
<td><input type="text" name="finaltotal" id="finaltotal" readonly=""></td>
<td>Approved Total</td>
<td><input type="text" name="approvedtotal" id="approvedtotal" readonly=""></td>
</tr>
</tbody></table>
</div>
<input type="hidden" name="alldata" id="alldata" value="16,15,17,14">
<div class="timecardstepcontainer">
<table>
<tbody><tr>
<td><input type="submit" name="addtimecard" value="Save" class="button button-primary button-large"></td>
</tr>
</tbody></table>
</div>
</form>
Javascript
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("select[name='txtuser']").change(function(){
jQuery.ajax({
url:ajaxurl,
type:'post',
data:{action:'timecardapp_manage_timecard_stepone',user_id: jQuery("#txtuser").val()},
success: function(response){
var data=JSON.parse(response);
jQuery("input[name='txtemail2']").val(data.email2);
jQuery("input[name='txtclassrate']").val(data.class_rate);
jQuery("input[name='txtadminrate']").val(data.admin_rate);
}
});
});
jQuery("#txtweek").change(function(){
if(jQuery("select[name='txtuser'] option:selected").text()=='--select--'){
alert("Please select a user first to proceed");
return false;
} else {
jQuery.ajax({
url:ajaxurl,
type:'post',
data:{action:'timecardapp_manage_timecard_stepone',user_id: jQuery("#txtuser").val()},
success: function(response){
var data=JSON.parse(response);
var alldata = new Array();
var currentweek = jQuery("#txtweek option:selected").text();
var days_date = new Array();
function pad(str) {
return ("0"+str).slice(-2);
}
function getNextDay(str) {
var parts = str.split("-");
var mon_day = new Date(parts[2], parts[0] - 1, parseInt(parts[1], 10) + 0, 12, 0, 0, 0);
var tue_day = new Date(parts[2], parts[0] - 1, parseInt(parts[1], 10) + 1, 12, 0, 0, 0);
var wed_day = new Date(parts[2], parts[0] - 1, parseInt(parts[1], 10) + 2, 12, 0, 0, 0);
var thu_day = new Date(parts[2], parts[0] - 1, parseInt(parts[1], 10) + 3, 12, 0, 0, 0);
var fri_day = new Date(parts[2], parts[0] - 1, parseInt(parts[1], 10) + 4, 12, 0, 0, 0);
days_date[0] = ""+pad(mon_day.getMonth()+1)+"-"+ pad(mon_day.getDate())+"-"+mon_day.getFullYear();
days_date[1] = ""+pad(tue_day.getMonth()+1)+"-"+ pad(tue_day.getDate())+"-"+tue_day.getFullYear();
days_date[2] = ""+pad(wed_day.getMonth()+1)+"-"+ pad(wed_day.getDate())+"-"+wed_day.getFullYear();
days_date[3] = ""+pad(thu_day.getMonth()+1)+"-"+ pad(thu_day.getDate())+"-"+thu_day.getFullYear();
days_date[4] = ""+pad(fri_day.getMonth()+1)+"-"+ pad(fri_day.getDate())+"-"+fri_day.getFullYear();
}
var currentweek = jQuery("#txtweek option:selected").text(), // no values available
next_day = new Date(); // or some other default
if (currentweek && currentweek.indexOf("--") == -1) { // not the first
next_day=getNextDay(currentweek);
}
var trHTML = '';
var number_of_classes = 0;
var totalexpense = 0;
var totaladminhours = 0;
jQuery.each(data.final_data, function (i, item) {
if(item.event_title == 'Admin'){
//Monday
trHTML += '<tr>';
trHTML += '<td>'+item.event_title+'</td>';
trHTML += '<td>Mon</td>';
trHTML += '<td>'+days_date[0]+'</td>';
trHTML += '<td>Y</td>';
trHTML += '<td>'+item.start_date+'</td>';
trHTML += '<td>'+item.end_date+'</td>';
trHTML += '<td> </td>';
trHTML += '<td> </td>';
trHTML += '<td>'+item.expense_allowance_value+'</td>';
trHTML += '<td><input type="text" name="admin_hours[]" class="adminhours" value="'+item.hours_allowed+'" style="width:50px;" /></td>';
trHTML += '<td><input type="text" name="item_comment" style="width:80px;" /></td>';
trHTML += '</tr>';
//Tuesday
trHTML += '<tr>';
trHTML += '<td>'+item.event_title+'</td>';
trHTML += '<td>Tue</td>';
trHTML += '<td>'+days_date[1]+'</td>';
trHTML += '<td>Y</td>';
trHTML += '<td>'+item.start_date+'</td>';
trHTML += '<td>'+item.end_date+'</td>';
trHTML += '<td> </td>';
trHTML += '<td> </td>';
trHTML += '<td>'+item.expense_allowance_value+'</td>';
trHTML += '<td><input type="text" name="admin_hours[]" class="adminhours" value="'+item.hours_allowed+'" style="width:50px;" /></td>';
trHTML += '<td><input type="text" name="item_comment" style="width:80px;" /></td>';
trHTML += '</tr>';
//Wednesday
trHTML += '<tr>';
trHTML += '<td>'+item.event_title+'</td>';
trHTML += '<td>Wed</td>';
trHTML += '<td>'+days_date[2]+'</td>';
trHTML += '<td>Y</td>';
trHTML += '<td>'+item.start_date+'</td>';
trHTML += '<td>'+item.end_date+'</td>';
trHTML += '<td> </td>';
trHTML += '<td> </td>';
trHTML += '<td>'+item.expense_allowance_value+'</td>';
trHTML += '<td><input type="text" name="admin_hours[]" class="adminhours" value="'+item.hours_allowed+'" style="width:50px;" /></td>';
trHTML += '<td><input type="text" name="item_comment" style="width:80px;" /></td>';
trHTML += '</tr>';
//Thursday
trHTML += '<tr>';
trHTML += '<td>'+item.event_title+'</td>';
trHTML += '<td>Thu</td>';
trHTML += '<td>'+days_date[3]+'</td>';
trHTML += '<td>Y</td>';
trHTML += '<td>'+item.start_date+'</td>';
trHTML += '<td>'+item.end_date+'</td>';
trHTML += '<td> </td>';
trHTML += '<td> </td>';
trHTML += '<td>'+item.expense_allowance_value+'</td>';
trHTML += '<td><input type="text" name="admin_hours[]" class="adminhours" value="'+item.hours_allowed+'" style="width:50px;" /></td>';
trHTML += '<td><input type="text" name="item_comment" style="width:80px;" /></td>';
trHTML += '</tr>';
//Friday
trHTML += '<tr>';
trHTML += '<td>'+item.event_title+'</td>';
trHTML += '<td>Fri</td>';
trHTML += '<td>'+days_date[4]+'</td>';
trHTML += '<td>Y</td>';
trHTML += '<td>'+item.start_date+'</td>';
trHTML += '<td>'+item.end_date+'</td>';
trHTML += '<td> </td>';
trHTML += '<td> </td>';
trHTML += '<td>'+item.expense_allowance_value+'</td>';
trHTML += '<td><input type="text" name="admin_hours[]" class="adminhours" value="'+item.hours_allowed+'" style="width:50px;" /></td>';
trHTML += '<td><input type="text" name="item_comment" style="width:80px;" /></td>';
trHTML += '</tr>';
alldata.push(item.session_id);
} else {
trHTML += '<tr>';
trHTML += '<td>'+item.event_title+'</td>';
trHTML += '<td>'+item.day_of_week+'</td>';
if(item.day_of_week=='Mon'){
trHTML += '<td>'+days_date[0]+'</td>';
}
if(item.day_of_week=='Tue'){
trHTML += '<td>'+days_date[1]+'</td>';
}
if(item.day_of_week=='Wed'){
trHTML += '<td>'+days_date[2]+'</td>';
}
if(item.day_of_week=='Thu'){
trHTML += '<td>'+days_date[3]+'</td>';
}
if(item.day_of_week=='Fri'){
trHTML += '<td>'+days_date[4]+'</td>';
}
trHTML += '<td>Y</td>';
trHTML += '<td>'+item.start_date+'</td>';
trHTML += '<td>'+item.end_date+'</td>';
trHTML += '<td><input type="checkbox" name="presentdays[]" /></td>';
trHTML += '<td><input type="checkbox" name="latedays[]" /></td>';
trHTML += '<td>'+item.expense_allowance_value+'</td>';
trHTML += '<td><input type="text" name="admin_hours[]" class="adminhours" value="'+item.hours_allowed+'" style="width:50px;" /></td>';
trHTML += '<td><input type="text" name="item_comment" style="width:80px;" /></td>';
trHTML += '</tr>';
number_of_classes++;
totalexpense = +totalexpense + +item.expense_allowance_value;
totaladminhours = totaladminhours + item.hours_allowed;
}
alldata.push(item.session_id);
});
jQuery('#steptwotable').find('tbody').empty();
jQuery('#steptwotable').find('tbody').append(trHTML);
var totalclasses = number_of_classes * jQuery("input[name='txtclassrate']").val();
var totaladminrate = totaladminhours * jQuery("input[name='txtadminrate']").val();
var trHTML2 = '';
trHTML2 += '<tr>';
trHTML2 += '<td><input type="text" name="number_of_classes" value="'+number_of_classes+'" style="width:50px;" readonly /></td>';
trHTML2 += '<td><input type="text" name="totalclasses" value="'+totalclasses+'" readonly /></td>';
trHTML2 += '<td><input type="text" value="" id="latecharges" readonly /></td>';
trHTML2 += '<td><input type="text" name="totalexpense" value="'+totalexpense+'" readonly /></td>';
trHTML2 += '<td><input type="text" name="totaladminrate" value="'+totaladminrate+'" readonly /></td>';
trHTML2 += '<td><input type="text" name="approved_adjustment" id="approved_adjustment" style="width:50px;" /></td>';
trHTML2 += '<td><textarea name="approver_comment"></textarea></td>';
trHTML2 += '</tr>';
jQuery('#stepthreetable').find('tbody').empty();
jQuery('#stepthreetable').find('tbody').append(trHTML2);
jQuery("#alldata").val(alldata);
var the_final_total = +totalclasses + +totalexpense - jQuery("#latecharges").val() + +totaladminrate;
jQuery("#finaltotal").val(the_final_total);
}
});
}
});
});
jQuery(document).on("keyup change", ".adminhours", function() {
var latecharge;
var admincharge;
var adminhours=jQuery(".adminhours");
if(jQuery("#latecharges").val().length > 0){
latecharge=jQuery("#latecharges").val();
} else {
latecharge=0;
}
if(jQuery("input[name='totaladminrate']").val().length > 0){
admincharge=jQuery("input[name='totaladminrate']").val();
} else {
admincharge=0;
}
alert(adminhours.length);
if(jQuery(".adminhours").val().length > 0){
for(var i = 0; i < adminhours.length; i++){
adminhours= +adminhours+ + +jQuery(adminhours[i]).val();
}
} else {
adminhours=0;
}
var thefinaltotal = +admincharge + +jQuery("input[name='totalclasses']").val() + +jQuery("input[name='totalexpense']").val() - latecharge;
jQuery("input[name='totaladminrate']").val(adminhours*jQuery("input[name='txtadminrate']").val());
jQuery("input[name='finaltotal']").val(thefinaltotal);
});
</script>
1 個解決方案
解決方案1
1 已采納 2015-10-28 17:49:16
獲取類.adminhours所有元素的邏輯不應檢查選擇器中的 val if(jQuery(".adminhours").val().length > 0) 。 我已在下面更新了您的代碼：
var totalAdminhours = 0;
if(jQuery(".adminhours").length > 0){
jQuery(".adminhours").each(function () {
totalAdminhours += totalAdminhours + jQuery(this).val();
});
} else {
totalAdminhours = 0;
}
jQuery / Ajax-如果所有表單具有相同的類，如何確定要序列化的表單？
[英]Jquery / Ajax - How to determine which form to .serialize if all forms have same class?
如何僅使用沒有庫的javascript從同一個類的不同div獲取值的總和？
[英]How can I get sum of values from different divs with the same class using only javascript without libraries?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.