Comment obtenir un signe $ dans un champ de saisie sans qu'il soit pris en compte dans la valeur

Question

J'ai une configuration très simple de la calculatrice jQuery. J'ai collé le script et le HTML ci-dessous si c'est utile.

Cela fonctionne parfaitement, mais je voudrais insérer un $ avant le contenu réel de la valeur. Donc, dans le script ci-dessous, vous pouvez entrer 100 dans le premier champ, et il vous montrera ce que 10% de réduction de 100 $/mois pour 3 ans est. J'ai juste besoin de afficher le signe du dollar, pas réellement l'ajouter à la valeur si c'est plus facile ...

Je veux aussi m'assurer que la fonctionnalité ci-dessous où seuls les nombres peuvent être entrés est conservée.

Des idées?

HTML:

<form id="savings-calculator" action="#"> 
    <label>Your monthly premium:</label> 
    <input id="premium-amount" name="premium" type="number" value="333" /> 
    <label>Your three year savings:</label> 
    <input id="three-year-savings" class="circle secondary-circle" name="three-year-savings" type="text" value="1200" /> 
</form> 

jQuery:

<script> 
jQuery(document).ready(function($) { 
$('#premium-amount').bind('keypress keydown keyup change',function(){ 
    var premium = parseFloat($(':input[name="premium"]').val(),10) 
    var v = ''; 

    if (!isNaN(premium)){ 

     v = (premium * 36) * (0.10); 
    } 

    $(':input[name="three-year-savings"]').val(v.toString()); 
});  

}); 
</script> 

Answer 1

Vous pouvez simplement l'ajouter à la chaîne que vous mettez dans le contrôle, et laisser seul la valeur calculée, comme suit:

$(':input[name="three-year-savings"]').val('$' + v.toString()); 

Notez que lorsque vous tirez la valeur du contrôle, il aura le $ dans i t, tandis que v restera inchangé. Si vous avez besoin d'utiliser la valeur de la commande, vous pouvez simplement utiliser replace avant d'utiliser parseFloat

v = parseFloat($(':input[name="three-year-savings"]').val().replace('$', ''));