11548 sujets

JavaScript, DOM et API Web HTML5

Grande noyade sur une formule de calcul en javascript

Bonjour à tous

Non, non... ne pouffez pas en lisant la suite Smiley bawling , moi j'ai une belle migraine et les neurones à zéro.
Bon, pour m'excuser : je suis print et pas web.
Je profite de mon conger maternité pour tenter de monter des formulaires en ligne en php, java et tout ce qu'on veut. Être moins bête en somme.

Bref, je dois avoir le cerveau sous oxygéné, un gros cumul d'insomnie ou je ne sais quoi d'autre de fin de grossesse, mais là, je vire aux contractions à force de rater mon truc.

La première partie de mon formulaire-contact (avec case texte nom, bouton radio etc, adresse mail, envoi de fichiers possible, le tout renvoyer sur ma boite mail) marche nickel chrome.
C'était trop beau pour durer.

Je voulais travailler une partie "devis en ligne" pour intégrer les calculs. Et là, je me vautre sur la fin : J'ai mon prix HT calculé en fonction des cases cochées (OK j'ai bien pioché les codes et aide sur le web car ça commence à me dépasser les calculs)... Mais rien ne va pour le calcul de la TVA et du TTC. Ca reste à zéro. J'ai voulu intégrer un code qui ne va pas avec le reste. Et j'en suis au verre d'efferalgan.
Surtout que l'étape suivante sera d'envoyer les cases sélectionnées et les prix sur la boite mail de l'internaute... Je n'ai donc pas fini de me prendre la tête.

Si quelqu'un peut m'expliquer ce que depuis ce matin je ne percute plus dans ce code, ce serait hachement sympa ! Déjà que le calcul de sous et les femmes ça fait 2...

Voici le code que j'ai travaillé sur une page à part de mon formulaire nickel, par précaution.
Mais ne riez pas. Merci tout plein.


<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="generator" content="Adobe GoLive" />
		<title>CALCUL-DEVIS</title>
		<script type="text/javascript">

// Calcul du total des articles choisis.
function calculateTotal(inputItem) {
  with (inputItem.form) {
    // Traitement des différents types de cases.
    if (inputItem.type == "radio") {   // Boutons radio.
      // Soustraction de la valeur des boutons radio décochés.
      calculatedTotal.value = eval(calculatedTotal.value) - eval(previouslySelectedRadioButton.value);
      // Enregistrement de la valeur des boutons radio cochés.
      previouslySelectedRadioButton.value = eval(inputItem.value);
      // Prise en compte de la valeur du bouton radio sélectionné sur le total total.
      calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value);
    } else {   // check boxes.
      if (inputItem.checked == false) {   // Soustraction des checkbox décochés.
          calculatedTotal.value = eval(calculatedTotal.value) - eval(inputItem.value);
      } else {   // Prise en compte des checkbox cochés sur le total.
          calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value);
      }
    }

    // La valeur totale doit jamais être moins de 0.
    if (calculatedTotal.value < 0) {
      InitForm();
    }

    // Rendu de la valeur totale.
    return(formatCurrency(calculatedTotal.value));
  }
}

// Choix du format du prix + euro.
function formatCurrency(num) {
  num = num.toString().replace(/\$|\,/g,'');
  if(isNaN(num))
     num = "0";
  sign = (num == (num = Math.abs(num)));
  num = Math.floor(num*100+0.50000000001);
  cents = num%100;
  num = Math.floor(num/100).toString();
  if(cents<10)
      cents = "0" + cents;
  for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
      num = num.substring(0,num.length-(4*i+3)) + ',' + num.substring(num.length-(4*i+3));
  return (((sign)?'':'-') + num + '.' + cents + '€' );
}

 // Calcul de la TVA + TTC > La partie totalement fausse après x essais de codes divers et variés !!!
      var pourCentTva = 0.18;
      
      function calcul(obj) {
        var valeur = parseInt(obj.options[obj.selectedIndex].value, 10);
        if (valeur == '#')
          return;
        
        var total = parseFloat(obj.form.ht.value);
        if (valeur)
        {
          var tva = Math.round(total * pourCentTva * 100) / 100;
          var ttc = total + tva;
        }
        else
        {
          var tva = 0;
          var ttc = total;
        }
        obj.form.tva.value = tva;
        obj.form.ttc.value = ttc;
      }
      
 <!--
function checkCheckBox(f){
if (f.agree.checked == false )
{
alert('Vous devez cocher la case à cocher!.');
return false;
}else
return true;
}
//-->

// Mise en forme des valeurs.
function InitForm() {
  document.selectionForm.total.value='0€';
  document.selectionForm.calculatedTotal.value=0;
  document.selectionForm.previouslySelectedRadioButton.value=0;
  document.selectionForm.tva.value='0€';
  document.selectionForm.calculatedTVA.value=0;
  document.selectionForm.ttc.value='0€';
  document.selectionForm.calculatedTTC.value=0;

  // Remise à zéro des boutons si décoche.
  for (i=0; i < document.selectionForm.elements.length; i++) {
    if (document.selectionForm.elements[i].type == 'checkbox' | document.selectionForm.elements[i].type == 'radio') {
      document.selectionForm.elements[i].checked = false;
    }
  }
}
</script>

	</head>

	<body onload="InitForm();" onreset="InitForm();">	
		<p></p>
		<table><tr><td>
  <form method="POST" name="selectionForm">
    <b>Carte de visite</b><br>
    Montage avec création originale au préalable........................... >
    <input type="radio" name="creation"   value="175.00"  onclick="this.form.total.value=calculateTotal(this);">
    <br>  
    Conception et montage d'après les éléments fournis................. > 
    <input type="radio" name="conception" value="85.00" onclick="this.form.total.value=calculateTotal(this);">
    <br>  
    Montage seul d'après une création/conception déjà effectuée... > 
    <input type="radio" name="montage"   value="50.00"  onclick="this.form.total.value=calculateTotal(this);">
    <br>
    <br><br>
    <b>Suppléments éventuels :</b> <br>
      <input type="checkbox" name="Extra" value="0.00" onclick="this.form.total.value=calculateTotal(this);"> Envoi PDF imprimeur via mail ou ftp 
    <br>
      <input type="checkbox" name="Extra"  value="12.00" onclick="this.form.total.value=calculateTotal(this);"> Gravure des fichiers source sur CD et envoi postal 
    <br>
      <input type="checkbox" name="Extra" value="30.00" onclick="this.form.total.value=calculateTotal(this);"> Achat de visuels 
    <br>
      <input type="checkbox" name="Extra" value="15.00" onclick="this.form.total.value=calculateTotal(this);"> Retouche de visuels 
    <br>
    <br>
    <br>
    <input type="hidden" name="calculatedTotal" value="0"> Prix Hors Taxe : 
    <input type="text" name="total" value="0" readonly onfocus="this.blur();"><br>
    <input type="hidden" name="previouslySelectedRadioButton" value="0">
    <input type="hidden" name="calculatedTVA" value="0"> TVA : 
    <input type="text" name="tva" readonly onfocus="this.blur();"><br>
	<input type="hidden" name="calculatedTTC" value="0"> Prix TTC : 
	<input type="text" name="ttc" readonly onfocus="this.blur();"><br>
	<input type="reset" value="Effacer">
    
  </form>
</td></tr></table>
<p><font face="verdana" size="1"><b>Conditions : </b>Ce devis en ligne n'a qu'une valeur informative. Pour tout devis officiel, écrivez directement à </font><a href="mailto:monmail@monmail.moi?subject=Demande%20de%20devis%20CARTE%20VISITE"><font face="verdana,arial,helvetica" size="1" color="black"><b>Mon Nom</b></font></a></p>
<form action="#" method="GET" onsubmit="return checkCheckBox(this)">
<font face="verdana" size="1"><b>Avant d'envoyer le formulaire, vous confirmez avoir prix note des conditions ci-dessus :</b></font><br>
J'accepte : <input type="checkbox" value="0" name="agree"><br><br>
<input type="submit" value="Envoi du formulaire">
</form>

</html>
[/i][/i][/i]
entki a écrit :
J'ai voulu intégrer un code qui ne va pas avec le reste.

Les codes JavaScript que l'on peut intégrer efficacement sont des codes créés pour ce type d'usage: on parle de librairies JavaScript pour les plus importants (on devrait parler de bibliothèques ou de boites à outils pour une traduction correcte), de plugins, voire de scripts. Ils doivent être accompagnés d'une documentation détaillée expliquant ce qu'ils sont capables de faire et comment les utiliser. Et pour les utiliser correctement, des connaissances de base en JavaScript sont nécessaires.

Donc si le code que tu as utilisé ne correspond pas à cette définition, la stratégie «j'intègre un code que j'ai trouvé» ne va pas marcher. Il faut alors lire le code que l'on a trouvé, le considérer comme un exemple, le comprendre, et écrire son propre code qui s'inspire de l'exemple mais sera précisément adapté au besoin. Notons que cela demande un niveau encore un peu plus avancé en JavaScript (maitrise des bases).

Le reste est du bricolage que je n'encourage pas.

entki a écrit :
Surtout que l'étape suivante sera d'envoyer les cases sélectionnées et les prix sur la boite mail de l'internaute...

Cette étape se fera à priori côté serveur (en PHP, par exemple). Concrètement, cela veut dire qu'il faudra dans tous les cas réaliser le calcul en PHP, puis réaliser l'envoi d'un message en PHP également. Le calcul en JavaScript est facultatif. Il correspond à une optimisation ergonomique: donner en temps réel une estimation à l'utilisateur, au fur et à mesure de sa saisie ou des choix effectués.

Voilà pour les généralités.

Sur le code lui-même, j'ai bloqué sur la première balise <font> rencontrée dans le code. Ça m'a fait un choc, du coup j'ai opté pour de l'aspirine.
Sujet clos
Aller à