valeurs mise à jour problème dans le formulaire (jquery sur la fonction)

Question

J'ai ce formulaire de commande simple qui fonctionne bien sauf une condition. Laissez-moi vous donner un exemple. Je remplis tous les champs avec des valeurs numériques, le script compte le nombre d'éléments, leur valeur totale - pas de problème. Maintenant le problème commence si je décide de mettre à jour la valeur et laisse l'un des champs vides (sur la fonction de flou change l'entrée vide dans 0) mais il ne met pas à jour la valeur à 0, ainsi le script ne recalcule pas la valeur de la commande . (le script de calcul est déclenché par la fonction keyup). Ce que je voudrais faire est de garder la fonctionnalité de (sur le flou et sur les fonctions de mise au point) et de les connecter à la fonction kayup (afin que le calcul puisse être fait). J'espère que je m'explique clairement. J'ai essayé certaines choses mais je ne peux pas obtenir toutes les fites fonctionnent ensemble. S'il vous plaît aider. Merci beaucoup d'avance.

travail 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> 

ET 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

Vérifiez si les valeurs sont numériques si pas les mettre à 0

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

Démo: https://jsfiddle.net/97tnrepg/54/

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