Wie man ein "totales" Textfeld von den Werten in einem anderen Textfeld und Radios mit Jquery aktualisiert

Question

Ich kämpfe, um zu bekommen, was ich denke, sollte ein einfaches bisschen jquery/javascript sein, um zu arbeiten. Ich habe eine Textbox und zwei Radios bekam wie so, dass ich will, automatisch die ‚total‘ Textbox aktualisieren, wenn ein Benutzer ihre Werte ändert:

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

Hier ist das Bit von jquery ich habe kommen mit, die doesn Funktioniert in Chrome nicht sehr gut (es ist langsam zu aktualisieren) und funktioniert in IE überhaupt nicht mit den Radios. Ich bin mir sicher, dass es einen besseren Weg dafür gibt, daher sind alle Vorschläge willkommen.

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(); 
    }); 
}); 

Vielen Dank

Answer 1

Hier ist, wie ich es zu rationalisieren wählte, jemand anderes kann einen besseren Vorschlag. Konzeptionell war alles, was Sie getan haben, gut.

Als Erstes gibt das Attribut "value" des Optionsfelds die entsprechende Menge an Porto an, die hinzugefügt werden sollte.

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

Dann rationalisiert ich das Javascript in etwa so:

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(); 
    }); 
}); 

ich es in IE8, FF und Chrome getestet. Sie müssen das setTimeout nicht verwenden. Der Portowert wird nun basierend auf dem Wert des ausgewählten Optionsfelds berechnet, anstatt den Wert fest zu codieren. Die Radios werden sowohl klicken und Änderung gebunden für IE willen

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

Answer 2

um die IE Probleme hacken, könnten Sie die Handler zu Ihrem Dokument hinzuzufügen. Dies bedeutet, dass Sie mehr Ereignisse als Sie wollen, aber es sollte nicht Tonnen sein:

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

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