javascript - 如何对使用ajax生成的具有相同类的所有文本框的值求和？-6ren

javascript - 如何对使用ajax生成的具有相同类的所有文本框的值求和？

转载作者：行者123 更新时间：2023-11-30 00:20:17

我想对使用 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>&nbsp;</td>';
                            trHTML += '<td>&nbsp;</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>&nbsp;</td>';
                            trHTML += '<td>&nbsp;</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>&nbsp;</td>';
                            trHTML += '<td>&nbsp;</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>&nbsp;</td>';
                            trHTML += '<td>&nbsp;</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>&nbsp;</td>';
                            trHTML += '<td>&nbsp;</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>

最佳答案

获取类 .adminhours 的所有元素的逻辑不应检查选择器 if(jQuery(".adminhours").val().length > 0) 中的 val。我已经在下面更新了您的代码:

var totalAdminhours = 0;
if(jQuery(".adminhours").length > 0){
        jQuery(".adminhours").each(function () {
            totalAdminhours += totalAdminhours + jQuery(this).val();        
        });
    } else {
        totalAdminhours = 0;
    }

关于javascript - 如何对使用ajax生成的具有相同类的所有文本框的值求和？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33396942/

文章推荐： php - 如何根据特定领域进行搜索？

文章推荐： android - Multidex 仅在 AndroidTest 中不起作用

文章推荐： php - MYSQL php 如果不存在则选择不起作用

文章推荐： android - ListView 项目未显示

tomcat - 无法使用 JDK6 生成 keystore ，但可以使用 JDK5 生成
我正在尝试使用以下 keytool 命令为我的应用程序生成 keystore : keytool -genkey -alias tomcat -keystore tomcat.keystore -ke
javascript - D3.js:生成 X 轴会删除我的一些点的标签，生成 Y 轴会将它们全部删除
编辑:在西里尔正确解决问题后，我注意到只需将生成轴的函数放在用于生成标签的函数下面就可以解决问题。我几乎读完了 O'Reilly 书中关于 D3.js 的教程，并在倒数第二页上制作了散点图，但是当添
graphql - 从 Schema 生成 GraphQL GUI 和从 GUI 生成 Schema
虽然使用 GraphiQL 效果很好，但我的老板要求我实现一个用户界面，用户可以在其中通过 UI 元素(例如复选框、映射关系)检查呈现给他们的元素并获取数据，这样做将为该人生成 graphql 输入，
java - 如何删除 Netbean 6.8 中的生成源(jax-ws)？我应该根据网站地址从 WSDL 生成 WS 客户端还是从 api 生成 WS 客户端？
我尝试在 Netbean 6.8 中使用 ws-import 生成 Java 类。我想重新生成 jax-ws，因为在 ebay.api.paypalapi 包中发现了一个错误(我认为该错误是由于 Pa
生成 Perl 日期时间？
我有一个 perl 脚本，它获取系统日期并将该日期写入文件名。系统日期被分配给 TRH1 变量，然后它被设置为一个文件名。 $TRH1 =`date + %Y%m%d%H%M`; print "TR
Haskell UUID 生成
我是 Haskell 的新手，需要帮助。我正在尝试构建一种必须具有某种唯一性的新数据类型，因此我决定使用 UUID 作为唯一标识符: data MyType = MyType { uuid ::
php - 生成 XML
我制作了一个脚本，它可以根据 Mysql 数据库中的一些表生成 XML。该脚本在 PHP 中运行。 public function getRawMaterials($apiKey, $format
openssl - 生成、签署和验证数字签名
所以这是我的项目中的一个问题。 In this task, we will use OpenSSL to generate digital signatures. Please prepare a f
r - 生成/绘制对数正态生存函数
我在 SAS LIFEREG 中有一个加速故障时间模型，我想绘制它。因为 SAS 在绘图方面非常糟糕，我想实际重新生成 R 中曲线的数据并将它们绘制在那里。 SAS 提出了一个尺度(在指数分布固定为
Django key 生成
我正在为 Django 后端制作一个样板，并且我需要能够使它到达下一个下载它的人显然无法访问我的 secret key 的地方，或者拥有不同的 key 。我一直在研究一些选项，并在这个过程中进行了实验
iPhone Excel 生成
我正在创建一个生成采购订单的应用程序。我可以根据用户输入的详细信息创建文本文件。我想生成一个看起来比普通文本文件好得多的 Excel。有没有可以在我的应用程序中使用的开源库？最佳答案目前还没有任何
ScalaCheck 生成 BST
我正在尝试使用 ScalaCheck 为 BST 创建一个 Gen，但是当我调用 .sample 方法时，它给了我 java.lang.NullPointerException。我哪里错了？ seal
Javascript 测验结果计算/生成
已关闭。此问题需要 debugging details 。目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and the
verilog 生成 if/else
我尝试编写一些代码，例如(在verilog中): parameter N = 128; if (encoder_in[0] == 1) begin 23 binary_out = 1;
hibernate - Grails 生成
我正忙于在 Grails 项目中进行从 MySQL 到 Postgres 的相当复杂的数据迁移。我正在使用 GORM 在 PostGres 中生成模式，然后执行 MySQL -> mysqldump
XSLT 生成 UUID
如何使用纯 XSLT 生成 UUID？基本上是寻找一种使用 XSLT 创建独特序列的方法。该序列可以是任意长度。我正在使用 XSLT 2.0。最佳答案这是一个good example 。基本上，
ios - 生成.app文件并安装在设备上
我尝试安装.app文件，但是当我安装并单击“同步”(在iTunes中)时，我开始在设备上开始安装，然后停止，这是一个问题，我不知道在哪里，但我看到了我无法解决的奇怪的事情: 最佳答案似乎您没有在Xc
java - 生成 JavaDocs？
自从我生成 JavaDocs 以来已经有一段时间了，我确信这些选项在过去 10 年左右的时间里已经得到了改进。我能否得到一些有关生成器的建议，该生成器将输出类似于 .Net 文档结构的 JavaDo
.net - 生成 PDF
我想学习如何生成 PDF，我不想使用任何第三方工具，我想自己用代码创建它。到目前为止，我所看到的唯一示例是我通过在第 3 方 dll 上打开反射器查看的代码，以查看发生了什么。不幸的是，到目前为止我看
C# Excel 生成
我正在从 Epplus 库生成 excel 条形图。这是我成功生成的。我的 table 是这样的 Mumbai Delhi Financial D

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何对使用ajax生成的具有相同类的所有文本框的值求和？