个人中心
gpt4 book ai didi

javascript - 如何使用javascript在表单上获取运行总计

转载 作者：行者123 更新时间：2023-11-29 09:52:06 25 4
gpt4 key购买 nike

我有一个看起来像这样的表格

    <form id="calculator" action="#" method="get">
    <h1>Cake Cost Estimator</h1>
    <h3>Round Cakes:</h3>
    <fieldset id="round">
        <table>
            <tr>
                <td><label>6" Round Cake (6-8): </label></td>
                <td><input id="6round" type="text" placeholder=0> </td>
           </tr>
                    <tr>
                <td><label>8" Round Cake (12-15): </label></td>
                <td><input id="8round" type="text" placeholder=0></td>
            </tr>
            <tr>
                <td><label>9" Round Cake (20-24): </label></td>
                <td><input id="9round" type="text" placeholder=0 ></td>
            </tr>
            <tr>
                <td><label>10" Round Cake (26-30): </label></td>
                <td><input id="10round" type="text" placeholder=0 ></td>
            </tr>
            <tr>
                <td><label>12" Round Cake (34-38): </label></td>
                <td><input id="12round" type="text" placeholder=0 ></td>
            </tr>
            <tr>
                <td><label>14" Round Cake (46-50): </label></td>
                <td><input id="14round" type="text" placeholder=0 ></td>
            </tr>
        </table>

    </fieldset>
    <h3>Square Cakes:</h3>
    <fieldset id="square">
        <table>
            <tr>
                <td><label>6" Square Cake (8-10): </label></td>
                <td><input id="6square" type="text" placeholder=0 ></td>
            </tr>
            <tr>
                <td><label>8" Square Cake (14-18): </label></td>
                <td><input id="8square" type="text" placeholder=0 ></td>
            </tr>
            <tr>
                <td><label>9" Square Cake (22-26): </label></td>
                <td><input id="9square" type="text" placeholder=0 ></td>
            <tr>
                <td><label>10" Square Cake (28-32): </label></td>
                <td><input id="10square" type="text" placeholder=0 ></td>
            </tr>
            <tr>
                <td><label>12" Square Cake (38-40): </label></td>
                <td><input id="12square" type="text" placeholder=0 ></td>
            </tr>
            <tr>
                <td><label>14" Square Cake (56-60): </label></td>
                <td><input id="14square" type="text" placeholder=0></td>
        </table>
    </fieldset>

    <h3>Sheet Cake:</h3>
    <fieldset id="sheet">
        <table>
            <tr>
                <td><label>1/4 Sheet (15-18): </label></td>
                <td><input id="quarter" type="text" placeholder=0 ></td>
            </tr>
            <tr>
                <td><label>1/2 Sheet (30-35): </label></td>
                <td><input id="half" type="text" placeholder=0 ></td>
            </tr>
            <tr>
                <td><label>Full Sheet (65-70): </label></td>
                <td><input id="full" type="text" placeholder=0 ></td>
            </tr>

        </table>    
    </fieldset>

    <h3>Cupcakes:</h3>
    <fieldset id="cupcakes">
        <table>
            <tr>
                <td><label>Basic Cupcake: </label></td>
                <td><input id="basic" type="text" placeholder=0 ></td>
            </tr>
            <tr>
                <td><label>Standard Cupcake: </label></td>
                <td><input id="standard" type="text" placeholder=0 ></td>
            </tr>
            <tr>
                <td><label>Premium: </label></td>
                <td><input id="premium" type="text" placeholder=0 ></td>
            </tr>

        </table>    
    </fieldset>

<h3>TOTAL:  $ <input id="total" type="text" placeholder=0 disabled="disabled"></h3>

JavaScript 看起来像这样

//Prices

$(document).ready(function(){
//apparently you can't declare a variable with a number and letter
    var sixround = 39.95;
    var eightround = 45.95;
var nineround = 52.95;
var tenround = 60.95;
var twelveround = 74.95;
var fourteenround = 89.95;

var sixsquare = 45.95;
var eightsquare = 52.95;
var ninesquare = 60.95;
var tensquare = 74.95;
var twelvesquare = 99.95;
var fourteensquare = 116.95;

var quarterSheet = 37.95;
var halfSheet = 62.94;
var fullSheet = 95.95;

var basicCupcake = 2.25;
var standardCupcake = 2.50;
var premiumCupcake = 2.75;

//Round cakes
$("#6round").keyup(function() {
//get the value of the key you just entered
var six =$("#6round").val();
//multiply the value by the amount
 $("#total").val((sixround *six).toFixed(2));    
});
$("#8round").keyup(function() {
var eight =$("#8round").val();
 $("#total").val((eightround * eight).toFixed(2));    

});
$("#9round").keyup(function() {
var nine =$("#9round").val();
 $("#total").val((nineround * nine).toFixed(2));    
});
$("#10round").keyup(function() {
var ten = $("#10round").val();
 $("#total").val((tenround * ten).toFixed(2));    
 });
$("#12round").keyup(function() {
var twelve = $("#12round").val();
 $("#total").val((twelveround *twelve).toFixed(2));    
});
$("#14round").keyup(function() {
var fourteen = $("#14round").val();
 $("#total").val((fourteenround * fourteen).toFixed(2));    
});

//Square Cakes
$("#6square").keyup(function() {
var sixs = $("#6square").val();
 $("#total").val((sixsquare * sixs).toFixed(2));    
 });
$("#8square").keyup(function() {
 var eights = $("#8square").val();
  $("#total").val((eightsquare * eights).toFixed(2));    
});
$("#9square").keyup(function() {
var nines = $("#9square").val();
 $("#total").val((ninesquare * nines).toFixed(2));    
 });
$("#10square").keyup(function() {
var tens = $("#10square").val();
 $("#total").val((tensquare * tens).toFixed(2));    
 });
$("#12square").keyup(function() {
var twelves = $("#12square").val();
 $("#total").val((twelvesquare * twelves).toFixed(2));    
 });
$("#14square").keyup(function() {
var fourteens = $("#14square").val();
 $("#total").val((fourteensquare * fourteens).toFixed(2));    
 });

//renamed the elemet ids in the html to quarter half and full becuase it didn't like the numbers
//Sheet Cakes
$("#quarter").keyup(function() {
var quart = $("#quarter").val();
 $("#total").val((quarterSheet  * quart).toFixed(2));    
 });
$("#half").keyup(function() {
var halfs = $("#half").val();
 $("#total").val((halfSheet * halfs).toFixed(2));    
 });
$("#full").keyup(function() {
var fulls = $("#full").val();
 $("#total").val((fullSheet * fulls).toFixed(2));    
 });

//Cupcakes
$("#basic").keyup(function() {
var bas = $("#basic").val();
 $("#total").val((basicCupcake * bas).toFixed(2));    
 });
$("#standard").keyup(function() {
var stand = $("#standard").val();
 $("#total").val((standardCupcake * stand).toFixed(2));    
 });
$("#premium").keyup(function() {
var prem = $("#premium").val();
 $("#total").val((premiumCupcake * prem).toFixed(2));    
 });

 });

这会计算每个单独表格 ID 的成本或总计，例如 6 圆蛋糕，然后可以输入一个数字并计算该特定蛋糕的价格。但是我如何保持总成本的运行总计

最佳答案

我的看法不同。我用 html 元素属性解决了这个问题。

通过这种方式，您可以在页面中添加大量输入框。但是你不能忘记两个属性 class="amountBox"data-var="(这是你之前添加到 priceList 对象的价格)"然后javascript计算总值(value)。这里jsfiddle:http://jsfiddle.net/5wbhnmwd/

通过这种方式，您可以摆脱对添加到文档的每个元素的 js 操作。

<form id="calculator" action="#" method="get">
     <h1>Cake Cost Estimator</h1>

     <h3>Round Cakes:</h3>

    <fieldset id="round">
        <table>
            <tr>
                <td>
                    <label>6" Round Cake (6-8):</label>
                </td>
                <td>
                    <input id="6round" class="amountBox" data-var="sixround" type="text" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>8" Round Cake (12-15):</label>
                </td>
                <td>
                    <input id="8round" class="amountBox" data-var="eightround" type="text" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>9" Round Cake (20-24):</label>
                </td>
                <td>
                    <input id="9round" class="amountBox" data-var="nineround" type="text" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>10" Round Cake (26-30):</label>
                </td>
                <td>
                    <input id="10round" class="amountBox" data-var="tenround" type="text" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>12" Round Cake (34-38):</label>
                </td>
                <td>
                    <input id="12round" class="amountBox" data-var="twelveround" type="text" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>14" Round Cake (46-50):</label>
                </td>
                <td>
                    <input id="14round" class="amountBox" data-var="fourteenround" type="text" placeholder=0>
                </td>
            </tr>
        </table>
    </fieldset>
     <h3>Square Cakes:</h3>

    <fieldset id="square">
        <table>
            <tr>
                <td>
                    <label>6" Square Cake (8-10):</label>
                </td>
                <td>
                    <input id="6square" class="amountBox" data-var="sixsquare" type="text" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>8" Square Cake (14-18):</label>
                </td>
                <td>
                    <input id="8square" class="amountBox" data-var="eightsquare" type="text" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>9" Square Cake (22-26):</label>
                </td>
                <td>
                    <input id="9square" class="amountBox" data-var="ninesquare" type="text" placeholder=0>
                </td>
                <tr>
                    <td>
                        <label>10" Square Cake (28-32):</label>
                    </td>
                    <td>
                        <input id="10square" class="amountBox" data-var="tensquare" type="text" placeholder=0>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>12" Square Cake (38-40):</label>
                    </td>
                    <td>
                        <input id="12square" class="amountBox" data-var="twelvesquare" type="text" placeholder=0>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>14" Square Cake (56-60):</label>
                    </td>
                    <td>
                        <input id="14square" class="amountBox" data-var="fourteensquare" type="text" placeholder=0>
                    </td>
        </table>
    </fieldset>
     <h3>Sheet Cake:</h3>

    <fieldset id="sheet">
        <table>
            <tr>
                <td>
                    <label>1/4 Sheet (15-18):</label>
                </td>
                <td>
                    <input id="quarter" class="amountBox" data-var="quarterSheet" type="text" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>1/2 Sheet (30-35):</label>
                </td>
                <td>
                    <input id="half" class="amountBox" data-var="halfSheet" type="text" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>Full Sheet (65-70):</label>
                </td>
                <td>
                    <input id="full" class="amountBox" data-var="fullSheet" type="text" placeholder=0>
                </td>
            </tr>
        </table>
    </fieldset>
     <h3>Cupcakes:</h3>

    <fieldset id="cupcakes">
        <table>
            <tr>
                <td>
                    <label>Basic Cupcake:</label>
                </td>
                <td>
                    <input id="basic" class="amountBox" data-var="basicCupcake" type="text" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>Standard Cupcake:</label>
                </td>
                <td>
                    <input id="standard" class="amountBox" data-var="standardCupcake" type="text" placeholder=0>
                </td>
            </tr>
            <tr>
                <td>
                    <label>Premium:</label>
                </td>
                <td>
                    <input id="premium" class="amountBox" data-var="premiumCupcake" type="text" placeholder=0>
                </td>
            </tr>
        </table>
    </fieldset>

<h3>TOTAL:  $ <input id="total" type="text" placeholder=0 disabled="disabled"></h3>
//Prices

$(document).ready(function () {
    var priceList = {
        sixround : 39.95,
        eightround : 45.95,
        nineround : 52.95,
        tenround : 60.95,
        twelveround : 74.95,
        fourteenround : 89.95,
        sixsquare : 45.95,
        eightsquare : 52.95,
        ninesquare : 60.95,
        tensquare : 74.95,
        twelvesquare : 99.95,
        fourteensquare : 116.95,
        quarterSheet : 37.95,
        halfSheet : 62.94,
        fullSheet : 95.95,
        basicCupcake : 2.25,
        standardCupcake : 2.50,
        premiumCupcake : 2.75
    };

    $('.amountBox').on('change', function(){
        var value = $(this).val();
        var price = priceList[$(this).data('var')];
        $(this).val((value*price).toFixed(2));
        $('#total').val('0');

        $('.amountBox').each(function(){
            if(!isNaN(parseFloat($(this).val()))){
                $('#total').val((parseFloat($('#total').val()) + parseFloat($(this).val())).toFixed(2));
            }
        });
    });

});

关于javascript - 如何使用javascript在表单上获取运行总计，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27155136/

25 4 0
文章推荐： javascript - 显示/隐藏 wordpress 子菜单
文章推荐： MySQL : Select from table based on shape of arabic character in a column
文章推荐： javascript - 在 JS 中创建快捷方式会降低性能吗
文章推荐： javascript - 解释变量 "leaking"是怎样的？
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com