Formulaire mettre champ à 0

Résolu/Fermé
moon136 Messages postés 71 Date d'inscription samedi 12 août 2017 Statut Membre Dernière intervention 17 avril 2018 - Modifié le 12 août 2017 à 14:59
moon136 Messages postés 71 Date d'inscription samedi 12 août 2017 Statut Membre Dernière intervention 17 avril 2018 - 13 août 2017 à 22:57
Bonjour,

J'ai un problème dans mon formlaire, je souhaite faire disparaitre le NaN et mettre le champ à 0 lorsque je rentre une quantité, voici mon script :

var VerifFormulaire = 0;

function conditionsVerifiees() {
   var erreur=0;
   var erreurnom=0;
   var erreurmail=0;
   var Nom = document.getElementById("nom").value;
   var Mail = document.getElementById("mail").value;
        var testMail = Mail.search("@");
   var IDNom = document.getElementById("nom");
   var IDMail = document.getElementById("mail");
   var Condition = document.getElementById("cg").checked;
   VerifFormulaire = 1;  
    if (Nom == "") {
        alert("Merci de saisir un nom.");
        IDNom.style.borderColor = "#FF0000";
        erreur++; 
  erreurnom=1;
    }
    else if (Mail=="") {
        IDNom.style.borderColor = "#808080";
        alert("Merci de rentrer votre adresse e-mail");
        IDMail.style.borderColor = "#FF0000";
        erreur++;
  erreurmail=1;
    }
    else if (Mail !=="" && testMail <= 0) {
  alert("Votre adresse e-mail n'est pas valide.");
  IDMail.style.borderColor = "#FF0000";
  erreur++;
  erreurmail=1;
    }else if (Condition==false) {
  document.getElementById("cg").style.borderColor = "#FF0000";
        alert("Avant l'envoie du formulaire, veuillez accepter les conditions générales en cochant la case.");
        erreur++;
    }else
 {        
        document.getElementById("cg").style.borderColor = "#808080";
  var nomMinuscules = Nom, nomMajuscules = nomMinuscules.toUpperCase();
        Nom = nomMajuscules;    
 }
 
 if (erreurnom==0) {
        IDNom.style.borderColor = "#808080";
 }
 if (erreurmail==0) {
        IDMail.style.borderColor = "#808080";
 }
 
 if (erreur>0)
    return VerifFormulaire=0
 else{
 return VerifFormulaire=1;
  redirect;
 }
 
}

// Fonction impression du formulaire
function impressionFormulaire() {
    window.print();
}

// Fonction On change value
function CalculerTotal() {
 
var Valeur;
 var choix;
 Valeur = parseInt(document.getElementById("nbpl1").value);
 alert(Valeur);
 choix = document.getElementById("resrv1").value;
 
 if (Valeur != ""){
  if (choix=="demijour")
  Valeur = Valeur*8; 
  else
  if (choix=="jour")
  Valeur = Valeur*15;
  else
  if (choix=="repas")
  Valeur = Valeur*7;
  document.getElementById("st1").value = Valeur+" euros" ; 
 }else 
 Valeur = 0;


 var Valeur2=0;
 Valeur2 = parseInt(document.getElementById("nbpl2").value);
 choix = document.getElementById("resrv2").value;
 if (Valeur2!==''){
  if (choix=="demijour")
  Valeur2 = Valeur2*8; 
  else
  if (choix=="jour")
  Valeur2 = Valeur2*15; 
  else
  if (choix=="repas")
  Valeur2 = Valeur2*7;
  document.getElementById("st2").value = Valeur2+" euros" ;
 }else 
 valeur2 = 0;
 
 var Valeur3, totalht, tva, totalttc;
 Valeur3 = parseInt(document.getElementById("nbpl3").value);
 choix = document.getElementById("resrv3").value;
 

 if (Valeur3!=''){
  if (choix=="demijour")
  Valeur3 = Valeur3*8; 
  else
  if (choix=="jour")
  Valeur3 = Valeur3*15;
  else
  if (choix=="repas")
  Valeur3 = Valeur3*7;
  document.getElementById("st3").value = Valeur3+" euros" ;
 }else 
 Valeur3 = 0;
 if((isNaN(nbpl1))||(isNaN(nbpl2))||(isNaN(npbl3))){
    alert("Veuillez entrer une quantité en chiffre");
   } 
 totalht = Valeur+Valeur2+Valeur3;
 tva = (totalht*20)/100;
 totalttc = totalht+tva;
 totalttc = totalttc.toFixed(2);
 
 document.getElementById("st").value = totalht;
 document.getElementById("total").value = totalttc;
}

// Vérification du formulaire
function testFormReservation() {
    if(VerifFormulaire == 0) {
        alert("Veuillez vérifier votre formulaire avant son envoi.");
    }
    else {
        document.getElementById("formulaire").submit();
    }
}




window.addEventListener("load", function () {
    document.getElementById("verifier").addEventListener("click", conditionsVerifiees);
    document.getElementById("envoyer").addEventListener("click", testFormReservation);
    document.getElementById("imprimer").addEventListener("click", impressionFormulaire);
    document.getElementById("nbpl1").addEventListener("change", CalculerTotal);
    document.getElementById("nbpl2").addEventListener("change", CalculerTotal);
    document.getElementById("nbpl3").addEventListener("change", CalculerTotal);
    document.getElementById("resrv1").addEventListener("change", CalculerTotal);
    document.getElementById("resrv2").addEventListener("change", CalculerTotal);
    document.getElementById("resrv3").addEventListener("change", CalculerTotal);
});



code html :
<!DOCTYPE html PUBLIC>
<html>
<head>
<meta charset="utf-8" />
<head>
<title>formulaire</title>
<link rel="stylesheet" href="formustyle.css">
<script src="formu.js"></script>
</head>
<body>
<div class="container">
  <h2>Formulaire de réservation :</h2>
  <p>(* = champ obligatoire)</p>
  <form id="formulaire" name="formulaire">
    <table cellpadding="0" cellspacing="4" border="0">
      <tbody>
        <tr>
          <td style="width:250px"><label for="nom">Nom :*</label></td>
          <td style="width:450px"><input type="text" id="nom" name="nom" required autofocus placeholder="Votre nom ici" required /></td>
        </tr>
        <tr>
          <td><label for="prenom">Prénom :</label></td>
          <td><input type="text" id="prenom" name="prenom" placeholder="Votre prénom ici" /></td>
        </tr>
        <tr>
          <td><label for="tel">Téléphone :</label></td>
          <td><input type="tel" id="tel" name="tel" maxlength="10" placeholder="0123456789" /></td>
        </tr>
        <tr>
          <td><label for="email">Email :*</label></td>
          <td><input type="email" id="mail" name="mail" placeholder="xxxx@yyyy.zzz" required /></td>
        </tr>
        <tr>
          <td><label for="resa">Votre réservation est pour :</label></td>
          <td><select id="resrv1" name="resrv1" >
              <option value="demijour" selected>Demi-journée</option>
              <option value="jour">Journée</option>
              <option value="repas">Repas</option>
            </select>
            <input type="text" id="nbpl1" name="nbpl1" placeholder="Qté" />
            <input type="text" id="st1" name="st1" placeholder="Sous-total HT" disabled /></td>
        </tr>
        <tr>
          <td></td>
          <td><select id="resrv2" name="resrv2" >
              <option value="demijour">Demi-journée</option>
              <option value="jour" selected>Journée</option>
              <option value="repas">Repas</option>
            </select>
            <input type="text" id="nbpl2" name="nbpl2" placeholder="Qté" />
            <input type="text" id="st2" name="st2" placeholder="Sous-total HT" disabled /></td>
        </tr>
        <tr>
          <td></td>
          <td><select id="resrv3" name="resrv3" >
              <option value="demijour">Demi-journée</option>
              <option value="jour">Journée</option>
              <option value="repas" selected>Repas</option>
            </select>
            <input type="text" id="nbpl3" name="nbpl3" placeholder="Qté" />
            <input type="text" id="st3" name="st3" placeholder="Sous-total HT" disabled /></td>
        </tr>
        <tr>
          <td><label for="st">Sous-total HT:</label></td>
          <td><input type="text" id="st" name="st" placeholder="Sous-total HT" disabled/>
            euros</td>
        </tr>
        <tr>
          <td><label for="total">Total TTC (TVA 20%):</label></td>
          <td><input type="text" id="total" placeholder="Total TTC" name="total" disabled/>
            euros</td>
        </tr>
        <tr>
          <td><label id="cdtgl" for="cdtgl">J'accepte les conditions générales *</label></td>
          <td><input type="checkbox" id="cg" name="cg" required /></td>
        </tr>
        <tr>
          <td colspan="2"><input type="button" id="verifier" value="Vérifier avant envoi" />
            <input type="button" id="imprimer" value="Imprimer" />
            <input type="reset" id="reset" value="Réintialiser" />
            <input type="button" id="envoyer" value="Envoyer ma commande" /></td>
        </tr>
      </tbody>
    </table>
  </form>
</div>
<ul>
  <li>Tarif demi-journée : 8 euros</li>
  <li>Tarif journée : 15 euros</li>
  <li>Tarif repas : 7 euros</li>
</ul>
</body>
</html>



EDIT : Ajout des balises de code (la coloration syntaxique).
Explications disponibles ici : ICI

Merci d'y penser dans tes prochains messages.


merci de votre aide :)

1 réponse

C'est quelle quantité? Quelle ligne du code? Car là j'ai pas envie de chercher dans tous ton code où il y a une erreur.

Si tu as NaN (Not a Number) c'est que t'essayes de convertir du texte en chiffre, donc "0" devient 0 mais "Plop" devient NaN, tout comme "0 Plop".

Tu peux toujours vérifier si c'est un chiffre ou non avec la fonctionne isNaN().

Ou ajouter une ligne comme
quantite = quantite || 0
. Ici si quantite équivaut à false, null, undefined, 0, "" ( chaine vide ), NaN ( Not a Number ) alors ça retourne 0.
0
moon136 Messages postés 71 Date d'inscription samedi 12 août 2017 Statut Membre Dernière intervention 17 avril 2018
12 août 2017 à 21:57
Merci pour ta réponse , donc à la ligne 121 du script j'ai mis
 if((isNaN(nbpl1))||(isNaN(nbpl2))||(isNaN(npbl3))){
    alert("Veuillez entrer une quantité en chiffre");
   } 

la ligne que tu me conseil ou dois je la placer ?

merci pour ton aide c'est sympa
0
moon136 Messages postés 71 Date d'inscription samedi 12 août 2017 Statut Membre Dernière intervention 17 avril 2018 > moon136 Messages postés 71 Date d'inscription samedi 12 août 2017 Statut Membre Dernière intervention 17 avril 2018
13 août 2017 à 22:57
le probleme est resolu merci
0