Rajout formule dans script

Rajout formule dans script - Javascript/Node.js - Programmation

Marsh Posté le 05-09-2015 à 13:14:10    

Bonjour à toutes et à tous !
 
Voilà, pour être brève, je suis correctrice de textes en français (le client me soumet son document, je corrige l'orthographe, la grammaire, la syntaxe, etc.). Il s'agit d'un travail rémunéré. Je dispose d'un site internet.
 
J'ai installé un formulaire de devis en ligne permettant au client de connaître le tarif de la prestation.
Il inscrit le nombre de lettres, coche la formule choisie (1,2 ou 3) ainsi que son statut (étudiant, particulier ou professionnel) et le prix apparaît.
 
Au départ, je ne proposais que deux formules (1 et 2). Mais je souhaite en proposer une troisième (le prix sera plus élevé).
 
Tout d'abord, voici mon script initial (sans la formule 3) :  
 

Code :
  1. {source 0}
  2. <!DOCTYPE html>
  3. <html lang="fr">
  4. <head>
  5.   <meta charset="utf-8">
  6.   <title>Blog de correction textes</title>
  7.   <style>
  8.   body {
  9.   background-size: 5px 900px, 6px 6px;
  10.   font-family: Verdana, Geneva, sans-serif;
  11.   font-size: 13px;
  12.   color: #000309;
  13.   text-align: left;
  14.   line-height: 24px;
  15. }
  17. #page {
  18.   width: 650px;
  19.   margin: auto;
  20.   padding: 20px;
  21.   background: #d8d8d8; /* Old browsers */
  22.   background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#d8d8d8), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
  23.   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8d8d8', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  24.   background:    -moz-linear-gradient(top,       #d8d8d8 1%, #ffffff 100%); /* FF3.6+ */
  25.   background: -webkit-linear-gradient(top,       #d8d8d8 1%, #ffffff 100%); /* Chrome10+,Safari5.1+ */
  26.   background:      -o-linear-gradient(top,       #d8d8d8 1%, #ffffff 100%); /* Opera 11.10+ */
  27.   background:     -ms-linear-gradient(top,       #d8d8d8 1%, #ffffff 100%); /* IE10+ */
  28.   background:         linear-gradient(to bottom, #d8d8d8 1%, #ffffff 100%); /* W3C */
  29. }
  31. #prix { font-weight:bold; font-size:200%; color:blue; }
  33. h1 {
  34.   font-size: 0em;
  35.   line-height: 1em;
  36.   margin: 0;
  37.   text-transform: uppercase;
  38. }
  40. fieldset {
  41.   border: none;
  42.   margin: 0 0 1ex;
  43.   padding: 0;
  44. }
  46. .explications {
  47.   border-left: solid thin #0042b0;
  48.   padding-left: 1ex;
  49. }
  51. .explications ul {
  52.   list-style: none;
  53.   font-size: 10px;
  54.   font-style: italic;
  55.   padding: 0;
  56. }
  58. .explications li {
  59.   margin: 1ex 0;
  60. }
  62. .explications h2 {
  63.   font-style: italic;
  64.   font-size: 1em;
  65.   margin: 0 0 1em;
  66. }
  68. explications h3 {
  69.   font-style: italic;
  70.   font-size: 1em;
  71.   margin: 0 0 1em;
  72. }
  74. .etape {
  75.   font-weight: bold;
  76.   text-transform: uppercase;
  77. }
  78. .etape::after {
  79.   content: "\00A0: ";
  80. }
  81.   </style>
  82. </head>
  83. <body>
  85. <!DOCTYPE html>
  86. <html lang="fr">
  87. <head>
  88.   <meta charset="utf-8">
  89.   <title>Devis pour correction &ndash; Liliana78</title>
  91. </head>
  92. <body>
  94. <section id="page">
  95.   <h1>Coût de votre correction</h1>
  96.   <form id="testform">
  97.     <fieldset>
  98.       <p>
  99.         <label for="nbchar" class="etape">Nombre de signes</label>
  100.         <input id="nbchar" type="text" name="nbchar" value="0" />
  101.       </p>
  102.       <div class="explications">
  103.         <h2>Où trouver le nombre de signes ? (Caractères + espaces) </h2>
  104.         <ul>
  105.           <li>Word 2007/2010 : Cliquez sur l'onglet <strong>Révisions</strong>,
  106.             puis <strong>Vérification</strong> et enfin <strong>Statistiques</strong>.
  107.             Repérez la ligne <strong>caractères espaces compris.</strong>
  108.           </li>
  109.           <li>Word 2003/OpenOffice : Cliquez sur <strong>Outils</strong>,
  110.             puis <strong>Statistiques.</strong> Repérez la ligne
  111.             <strong>caractères espaces compris.</strong>
  112.           </li>
  113.         </ul>
  114.       </div>
  115.     </fieldset>
  116.     <fieldset>
  117.       <p>
  118.         <strong class="etape">Formule</strong>
  119.         <input  id="forumle1" type="radio" name="formule" value="1" checked="checked" />
  120.         <label for="forumle1">Simple</label>
  121.         <input  id="formule2" type="radio" name="formule" value="2" />
  122.         <label for="formule2" />Approfondie</label>
  123.    
  124.        
  125.       </p>
  126.       <p class="details">
  127.         Voir <a href="formules/correction-reformulation">tableau comparatif</a>
  128.       </p>
  129.       <p>
  130.         <label class="etape" for="formjur">Statut</label>
  131.         <select id="formjur" name="formjur">
  132.           <option value="0">Étudiant</option>
  133.           <option value="1">Particulier</option>
  134.           <option value="2">Professionnel</option>
  135.         </select>
  136.         <input type="submit" value="Calculer" />
  137.       </p>
  138.     </fieldset>
  139.   </form>
  141.   <div id="resultat"></div>
  143. </section>
  145. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  146. <script type="text/javascript">// <![CDATA[
  147. function formatNumber (num) {
  148.     return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1 " )
  149. }
  150. $(function(){
  151.        $("input:submit" ).click(
  152.             function(){
  153.                 var calcul = 0;
  154.    var coefReduction = 10/100;
  155.                 if($("input:checked" ).val() == 1){
  156.                     if($("#formjur" ).val()== 1){
  157.                         calcul = $("#nbchar" ).val() * 0.0035;
  158.                     }else if ($("#formjur" ).val()== 2) {
  159.                         calcul = $("#nbchar" ).val() * 0.004;
  160.                     }else{
  161.                         calcul = $("#nbchar" ).val() * 0.003;
  162.                     }
  163.                 }else{
  164.                     if($("#formjur" ).val()== 1){
  165.                         calcul = $("#nbchar" ).val() * 0.0058;
  166.                     }else if ($("#formjur" ).val()== 2) {
  167.                         calcul = $("#nbchar" ).val() * 0.0066;
  168.                     }else{
  169.                         calcul = $("#nbchar" ).val() * 0.005;
  170.                     }
  171.              
  172.                  
  173.                 }
  174.                 var resultat = Math.ceil(calcul);
  175.                 $("#resultat" ).html("Tarif généralement appliqué : <span id=\"prix\">"+resultat+" &euro;</span>" );
  176.                 return false;
  179.             }
  180.        
  181.         );
  182.     });
  183. // ]]></script>


 
 
 
Et voici les modifications que j'ai apportées, sans succès, pour ajouter la formule 3 :
 

Code :
  1. <strong class="etape">Formule</strong>
  2.         <input  id="forumle1" type="radio" name="formule" value="1" checked="checked" />
  3.         <label for="forumle1">Simple</label>
  4.         <input  id="formule2" type="radio" name="formule" value="2" />
  5.         <label for="formule2" />Approfondie</label>
  6.         <input  id="formule3" type="radio" name="formule" value="3" />
  7.         <label for="formule3" />Complète</label>


         
 

Code :
  1. if($("input:checked" ).val() == 1){
  2.                     if($("#formjur" ).val()== 1){
  3.                         calcul = $("#nbchar" ).val() * 0.0035;
  4.                     }else if ($("#formjur" ).val()== 2) {
  5.                         calcul = $("#nbchar" ).val() * 0.004;
  6.                     }else{
  7.                         calcul = $("#nbchar" ).val() * 0.003;
  8.                     }
  9.                 }else{
  10.                     if($("#formjur" ).val()== 1){
  11.                         calcul = $("#nbchar" ).val() * 0.0058;
  12.                     }else if ($("#formjur" ).val()== 2) {
  13.                         calcul = $("#nbchar" ).val() * 0.0066;
  14.                     }else{
  15.                         calcul = $("#nbchar" ).val() * 0.005;
  16.                     }
  17.                  }else{
  18.                     if($("#formjur" ).val()== 1){
  19.                         calcul = $("#nbchar" ).val() * 0.007;
  20.                     }else if ($("#formjur" ).val()== 2) {
  21.                         calcul = $("#nbchar" ).val() * 0.008;
  22.                     }else{
  23.                         calcul = $("#nbchar" ).val() * 0.006;
  24.                     }
  25.              
  26.                  
  27.                 }


 
Ai-je oublié quelque chose ?
 
Merci de votre aide.

Reply

Marsh Posté le 05-09-2015 à 13:14:10   

Reply

Marsh Posté le 10-09-2015 à 17:34:55    

Code :
  1. <strong class="etape">Formule</strong>
  2. <input  id="forumle1" type="radio" name="formule" value="1" checked="checked" />
  3. <label for="forumle1">Simple</label>
  4. <input  id="formule2" type="radio" name="formule" value="2" />
  5. <label for="formule2" />Approfondie</label>
  6. <input  id="formule3" type="radio" name="formule" value="3" />
  7. <label for="formule3" />Complète</label>


       

 
Code :
  1. $(function(){
  2.       $("input:submit" ).click(
  3.         function(){
  4.           var calcul = 0;
  5.           var coefReduction = 10/100;
  6.           if($("input[name=formule]:checked" ).val() == 1) {
  7.             if ($("#formjur" ).val()== 1) {
  8.               calcul = $("#nbchar" ).val() * 0.0035;
  9.             } else if ($("#formjur" ).val() == 2) {
  10.               calcul = $("#nbchar" ).val() * 0.004;
  11.             } else {
  12.               calcul = $("#nbchar" ).val() * 0.003;
  13.             }
  14.           } else if ($("input[name=formule]:checked" ).val() == 2) {
  15.             if($("#formjur" ).val()== 1) {
  16.               calcul = $("#nbchar" ).val() * 0.0058;
  17.             } else if ($("#formjur" ).val() == 2) {
  18.               calcul = $("#nbchar" ).val() * 0.0066;
  19.             } else {
  20.               calcul = $("#nbchar" ).val() * 0.005;
  21.             }
  22.           } else {
  23.               if ($("#formjur" ).val()== 1) {
  24.                 calcul = $("#nbchar" ).val() * 0.007;
  25.               } else if ($("#formjur" ).val() == 2) {
  26.                 calcul = $("#nbchar" ).val() * 0.008;
  27.               } else {
  28.                 calcul = $("#nbchar" ).val() * 0.006;
  29.               }
  30.           }
  31.           var resultat = Math.ceil(calcul);
  32.           $("#resultat" ).html("Tarif généralement appliqué : <span id=\"prix\">"+resultat+" €</span>" );
  33.           return false;
  34.         }
  35.       );
  36.     });
 

Quand on a 2 conditions : if > else
Si on en ajoute une 3e ou + : if > else if.... (n conditions) > else

 

J'ai modifié la condition pour qu'elle soit plus parlante en ajoutant le nom du formulaire des radios

 

++

 

EDIT:

 

Au lieu de garder ce code degueux autant utiliser des tableaux:

 
Code :
  1. $(function(){
  2.   var tarifs = [[0.003,0.005,0.006],   // Etudiant
  3.                 [0.0035,0.0058,0.007], // Particulier
  4.                 [0.004,0.0066,0.008]]; // Professionnel
  6.   $("#testform" ).submit(function() {
  8.       var coefReduction = 0.9,
  9.           nbrCaractere  = $("#nbchar" ).val(),
  10.           formule       = $("input[name=formule]:checked" ).val() - 1,
  11.           client        = $("#formjur" ).val(),
  12.           resultat      = Math.ceil(tarifs[client][formule] * nbrCaractere);
  14.       $("#resultat" ).html("Tarif généralement appliqué : <span id=\"prix\">" + resultat + " €</span>" );
  15.       return false;
  16.   });
  17. });


Message édité par FBZ le 10-09-2015 à 19:14:43

---------------
[Feed-back]
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed