Comment mettre à jour une zone de texte 'totale' à partir des valeurs dans une autre zone de texte et des radios avec Jquery

Question

Je me bats pour obtenir ce que je pense devrait être un peu de jquery/javascript pour fonctionner. J'ai une zone de texte et 2 la radio est comme pour que je veux mettre à jour automatiquement la zone de texte « total » lorsqu'un utilisateur modifie leurs valeurs:

<tr> 
    <td>Value:</td> 
    <td> 
    <input name="value" type="text" id="value" /> 
    </td> 
</tr> 

<tr> 
    <td>Postage:</td> 
    <td> 
    <input id="express" type="radio" name="postageradio" value="PostageExpressRadio" /> 
    Express post ($3.50) 

    <input id="registered" type="radio" name="postageradio" value="PostageRegisteredRadio" /> 
    Registered post ($5.00) 
    </td> 
</tr> 

<tr> 
    <td>Total:</td> 
    <td colspan="2"> 
    <input name="total" type="text" readonly="readonly" id="total" /> 
    </td> 
</tr> 

est ici le peu de jquery je suis venu avec, qui doesn 't fonctionne très bien dans Chrome (il est lent à mettre à jour), et ne fonctionne pas du tout avec les radios dans IE. Je suis sûr qu'il y a une meilleure façon de le faire, donc toutes les suggestions sont les bienvenues.

function calctotal() { 
    var value = $('#value').val(); 
    var amount = parseInt(value.replace(' ', '').replace('$', '')); 
    if (isNaN(amount)) amount = 0; 
    var post = 0; 
    if ($('#express').is(':checked')) post = 3.5; 
    if ($('#registered').is(':checked')) post = 5.0; 
    $('#total').val('$' + (amount + post).toFixed(2)); 
} 

// The timeout is used because otherwise the 'change' events get the previous value (???) 
function calctotalsoon() { 
    setTimeout(function() { 
    calctotal(); 
    }, 100); 
} 

$(document).ready(function() { 
    $('#value').keyup(function(event) { 
    calctotalsoon(); 
    }); 

    $('#express').change(function(event) { 
    calctotalsoon(); 
    }); 

    $('#registered').change(function(event) { 
    calctotalsoon(); 
    }); 
}); 

Merci beaucoup

Answer 1

Voici comment j'ai choisi de le rationaliser, quelqu'un d'autre peut avoir une meilleure suggestion. Conceptuellement à peu près tout ce que vous avez fait était bon. Tout d'abord, l'attribut "value" du bouton radio reflète maintenant la quantité appropriée d'affranchissement qui doit être ajoutée.

<input id="express" type="radio" name="postageradio" value="3.50" /> 
<input id="registered" type="radio" name="postageradio" value="5.00" /> 

Je rationalisées le javascript comme ceci:

function calctotal() { 
    var value = $('#value').val(); 
    var amount = parseFloat(value) || 0; 
    var post = parseFloat($("input[name=postageradio]:checked").val()) || 0; 

    $('#total').val('$' + (amount + post).toFixed(2)); 
} 

$(document).ready(function() { 
    $('#value').keyup(function(event) { 
    calctotal(); 
    }); 

    $('#express, #registered').bind('click change', function(event) { 
    calctotal(); 
    }); 
}); 

Je l'ai testé dans IE8, FF et Chrome. Vous n'avez pas besoin d'utiliser setTimeout. La valeur d'affranchissement est maintenant calculée en fonction de la valeur du bouton radio sélectionné au lieu de coder en dur la valeur. Les radios sont liées à la fois cliqué sur le changement pour IE

Fiddle ici: http://www.jsfiddle.net/NzrBj/

Answer 2

Pour bricoler autour des questions d'IE, vous pouvez ajouter les gestionnaires à votre document. Cela signifie que vous obtenez plus d'événements que vous voulez, mais il ne devrait pas être tonnes:

$(document).ready(function() { 
     $(document).keyup(function(event) { 
     calctotalsoon(); 
     }); 

     $(document).click(function(event) { 
     calctotalsoon(); 
     }); 
});