表单中的值更新问题（jquery 函数）

Question

我有这个简单的订单，除了一个条件外，它工作正常。让我举个例子。我用数值填写所有文件，脚本计算项目数量，它们的总价值 - 没问题。

如果我决定更新值并将其中一个字段留空（在模糊功能上将空输入更改为 0），现在问题开始了，但它不会将值更新为 0，因此脚本不会重新计算命令。（计算脚本由keyup函数触发）

我想做的是保留（模糊和对焦功能）的功能并将它们连接到 kayup 功能（以便可以完成计算）。希望我解释清楚。我尝试了一些东西，但我无法让所有功能一起工作。请帮忙。非常感谢您。

工作 JSFiddle： https://jsfiddle.net/nitadesign/97tnrepg/53/

HTML:

<span class="txtbooking"><strong>SHOPPING BASKET</strong></span>
<div id="order_total" style="display: none;"></div>
<input type='submit' name='submit' id='submit' class="submitorder" value='Check Out' />  
<form name='packaging' action="test.php" method='post'>  
    <input name="totalUnits" type="hidden" id="totalUnits">  
    <p>Pack 1</p>
    <input type='text' class='pack' name='pack01' id='pack01' autocomplete='off' maxlength='3' value='0'/>
    <input type='hidden' class='pack' id='ppack01-price' name='ppack01-price' value='5' />

    <p>Pack 2</p>
    <input type='text' class='pack' name='pack02' id='pack02' autocomplete='off' maxlength='3' value='0'/>
    <input type='hidden' class='pack' id='ppack02-price' name='ppack02-price' value='7' />
    <p>Pack 3</p>
    <input type='text' class='pack' name='pack03' id='pack03' autocomplete='off' maxlength='3' value='0'/>
    <input type='hidden' class='pack' id='ppack03-price' name='ppack03-price' value='9' />
</form>

和 JS:

var orders = [];
$(".pack").keyup(function () {
    var curId = this.id.split("k")[1];
    var packPrice = parseFloat($('#ppack' + curId + '-price').val()).toFixed(2);
      var packUnit = parseInt($(this).val());
      var packTotal = parseInt(packUnit * packPrice);

    var order = null;   
    order = GetOrder(curId);

    if(order == null){
        order = {};
        order.id = curId;
        order.packPrice = packPrice;
        order.packUnit = packUnit;
        order.packTotal = packUnit * packPrice;
        orders.push(order);
    }
    else{
        order.packPrice = packPrice;
        order.packUnit = packUnit;
        order.packTotal = packUnit * packPrice;     
        UpdateOrders(order);
    }



    $(window).scroll(CalculateTotal)
    CalculateTotal();
    ;

});

function GetOrder(curId){
    var order = null;

    for(i = 0; i< orders.length; i++){
        if(orders[i].id == curId){
            order = orders[i];
            break;
        }
    }

    return order;
}

function UpdateOrders(order){
    for(i = 0; i< orders.length; i++){
        if(orders[i].id == order.id){
            orders[i] = order;
            break;
        }
    }   
}

function CalculateTotal(){


    var total = 0;
    for(i = 0; i< orders.length; i++){
        total = total + orders[i].packTotal;
    }
    console.log('total : ' + total);

    if(total > 0){
        var counter = 0;  
        $("input[name^=pack]").each(function(){
        if($(this).val() != "" && $(this).val() != 0) counter++;
        });
        console.log('counter : ' + counter);
        var totalUnits = 0; 
        $("input[name^=pack]").each(function(){
            packUnit = parseInt($(this).val());
            totalUnits = totalUnits + packUnit;
        });
        document.packaging.elements['totalUnits'].value = totalUnits;
        console.log('totalUnits : ' + totalUnits);

        $("#order_total").html('<table class="txts"><tr><td>Total Items:</td><td><strong>' + totalUnits + '<strong></td><tr><td>' + 'Order Subtotal:</td><td><strong>&pound;' + total.toFixed(2) + '</strong></td></tr></table>');
        $("#order_total").show();
        $('.submitorder').show();
    }
    if(total == 0){
        $("#order_total").html('<span class="txts">Your shopping basket is empty</span>');
        $("#order_total").show();
        $('.submitorder').hide();
    }

}

$("input[name^=pack]").on("change blur", function () {
    if (!this.value) {
        this.value = 0;
    }
});

$("input[name^=pack]").on("change focus", function () {
    if (this.value == "0") {
        this.value = "";
    }   
});

$(function(){
    $(window).scroll(CalculateTotal)
    CalculateTotal();
});

Answer 1

检查值是否为数字，如果不设置为 0

if (isNaN(packUnit)) {
      packUnit = 0;
    }

演示：https://jsfiddle.net/97tnrepg/54/

或https://jsfiddle.net/97tnrepg/55/

表单中的值更新问题（jquery 函数）

values update issue in the form (jquery on function)

jquery

forms

keyup

onblur

onfocus