instruction "if" dans javascript & affichage résultat dans l'étiquette

Question

J'ai un formulaire d'inscription où un client sélectionne son paquet désiré via une liste déroulante. Ils sélectionnent ensuite s'ils souhaitent bénéficier d'une réduction pluriannuelle en sélectionnant Oui ou Non. Si le bouton radio Oui est sélectionné, une liste déroulante s'affiche (en utilisant javascript) avec une sélection d'années 1-3. Je ne suis pas du tout familier avec javascript, et ce que je dois faire ensuite, c'est quand le client sélectionne les années 1, 2, 3 pour des remises de plusieurs années, pour calculer cette réduction et afficher dans une étiquette à côté de la liste déroulante si le client a sélectionné des remises non à plusieurs années.

Voici mon code existant: Javascript pour cacher la réduction annuelle dropdownlist

<script type='text/javascript'> 

$(function(){ 

$('#discountselection').hide(); 

    $('#No').click(function(){ 
     $('#discountselection').hide(); 
    }); 

    $('#Yes').click(function(){ 
     $('#discountselection').show(); 
    }); 

}); 

</script> 

Et voici le code HTML:

 <td width="343">Package*</td> 

     <td colspan="4"> 

     <select class="purple" name="package"> 

      <option value="Standard">Standard - &euro;55 Monthly</option> 

      <option value="Premium" selected="selected">Premium - &euro;99 Monthly</option> 

      <option value="Platinum">Platinum - &euro;149 Monthly</option> 

     </select> 

     </td> 

     <tr> 

     <td width="343">Would You like to avail of our multiyear discounts?* 

     <br />See <a href="#dialog" name="modal">Pricing</a> for more details 

     </td> 

     <td colspan="4"> 

      <input name="discount" type="radio" id="Yes" value="Yes" />Yes 

      <input name="discount" type="radio" id="No" value="No" checked="checked" />No<br /> 

      <select name="discountselection" class="purple" id="discountselection"> 

       <option value="1" selected="selected">1 Year</option> 

       <option value="2">2 Years</option> 

       <option value="3">3 Years</option> 

      </select>     

     </td> 

Ce serait la déclaration si je aurais besoin d'exécuter dans le javascript pour calculer le prix:

if package == "standard" && discountselection == "1" 
{ 
    cost = 45 * 12; 
    //display cost in label 
} 
elseif package == "standard" && discountselection =="2" 
{ 
    cost = 45 * 24; 
    //display cost in label 
} 
elseif package == "standard" && discountselection =="3" 
{ 
    cost = 45 * 36; 
    //display cost in label 
} 
elseif package == "premium" && discountselection =="1" 
{ 
    cost = 85 * 12; 
    //display cost in label 
} 
elseif package == "premium" && discountselection =="2" 
{ 
    cost = 85 * 24; 
    //display cost in label 
} 
elseif package == "premium" && discountselection =="3" 
{ 
    cost = 85 * 36; 
    //display cost in label 
} 
elseif package == "platinum" && discountselection =="1" 
{ 
    cost = 134 * 12; 
    //display cost in label 
} 
elseif package == "platinum" && discountselection =="2" 
{ 
    cost = 134 * 24; 
    //display cost in label 
} 
else package == "platinum" && discountselection =="3" 
{ 
    cost = 134 * 36; 
    //display cost in label 
} 

Je ne suis pas sûr de savoir comment créer cette instruction IF dans Javascript. Si quelqu'un pouvait offrir des conseils, de l'aide ou des liens vers des tutoriels qui pourraient m'aider, je serais très reconnaissant.

Answer 1

J'espère avoir bien compris votre question, mais vous essayez d'afficher une étiquette avec les coûts si l'utilisateur a sélectionné une valeur dans votre boîte de sélection.

Si vous pouvez accomplir cela en utilisant l'événement change (fourni par jQuery).

$("#discountselection").change(function() { 
    var product_cat = $("#package option:selected").val(); 

    if(product_cat == "standard") { 
     product_prefix = 45; 
    } else if (product_cat == "premium") { 
     product_prefix = 85; 
    } else if (product_cat == "platinum") { 
     product_prefix = 134; 
    } 

    var selected_value = $("#discountselection option:selected").val(); 
    var cost = product_prefix * (12 * selected_value); 
    $("#costlabel").val(cost); 
}); 

Mais s'il vous plaît sachez que vous devriez double contrôle ces valeurs sur le serveur!

Answer 2

En javascript else et si doivent être des mots séparés. En javascript, la condition d'une instruction if doit ou doit figurer entre parenthèses. Donc:

if(package == "standard" && discountselection == "1") 
{ 
    cost = 45 * 12; 
} 
else if(package == "standard" && discountselection =="2") 
{ 
    cost = 45 * 24; 
} 

Et ainsi de suite. Mais, si j'étais vous, j'essaierais de faire quelque chose d'un peu plus automatique. Je déteste la frappe répétitive!

var discount = {1: 12, 2: 24, 3: 36}; 

var package_prices = {'standard': 45, 'premium': 85, 'platinum': 134 }; 

var cost = package_prices[package] * discount[discountselection]; 

Maintenant cost devrait être correct, et regardez tous les efforts que vous enregistrez.

Note: J'ai suivi votre exemple de code, ici, mais dans votre code HTML réel vos valeurs d'options ont un premier cas de caractère supérieur, donc en fait, ce serait un échec à moins que la variable package_prices ont été modifiés en fonction (par exemple 'Standard': 45 au lieu de 'standard': 45

Si vous cherchez un bon matériel de référence sur Javascript, par opposition à des tutoriels plus bavards, vous ne pouvez pas faire mieux que le Mozilla Developer Center, par exemple voici leur documentation if/else.