Signaler

Formulaire mettre champ à 0 [Résolu]

Posez votre question moon136 30Messages postés samedi 12 août 2017Date d'inscription 6 octobre 2017 Dernière intervention - Dernière réponse le 13 août 2017 à 22:57 par moon136
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 :)
Utile
+0
plus moins
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.
moon136 30Messages postés samedi 12 août 2017Date d'inscription 6 octobre 2017 Dernière intervention - 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
Répondre
moon136 30Messages postés samedi 12 août 2017Date d'inscription 6 octobre 2017 Dernière intervention - 13 août 2017 à 22:57
le probleme est resolu merci
Répondre
Donnez votre avis

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !