Sujet Précédent Sujet Suivant

Script formulaire JS non fonctionnel

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 21 août 2017 à 23:09
moon136 Messages postés 71 Date d'inscription samedi 12 août 2017 Statut Membre Dernière intervention 17 avril 2018 - 23 août 2017 à 00:04
bonjour mon script n'est plus fonctionnel , je tourne en rond avec le fichier js pour voir ce qui ne va pas. c au niveau de la fonction de calcul j'ai ajouter des choses pour supprimer les NaN.. ca marchait en ajoutant les accolades qui manquent mon script ne marche plus. Pouvez vous m'aider SVP ? 

<!DOCTYPE html PUBLIC>
<html>
<head>
<meta charset="utf-8" />
<title>mon formulaire</title>
<link rel="stylesheet" href="style.css">
<script src="formulaire.js"></script>
</head>
<body>
 <form id="Formulaire" name="Formulaire" enctype="text/plain" method="post" action="mailto:monmail@outlook.fr.com?subject=test">
  <h2>Formulaire de réservation :</h2>
  <p>(* = champ obligatoire)</p>
  <ul>
   <li>
    <label for="nom">Nom :*</label><input type="text" id="nom" name="nom" placeholder="Votre nom ici" required />
   </li>
   <li>
    <label for="prenom">Prénom :</label><input type="text" id="prenom" name="prenom" placeholder="Votre prénom ici" />
   </li>
   <li>
    <label for="tel">Téléphone :</label><input type="tel" id="tel" name="tel" maxlength="10" placeholder="0123456789" />
   </li>
   <li>
    <label for="mail">Email :*</label><input type="email" id="mail" name="mail" placeholder="xxx@yyyy.zzz" required />
   </li>
   <li>
    <label for="resa">Votre réservation est pour :</label>
    <select id="resa1" name="resa1" >
     <option value="demijour">Demi-journée</option>
     <option value="jour">Journée</option>
     <option value="repas">Repas</option>
    </select>
    <input type="text" id="nombre1" name="nombre1" placeholder="Qté" />
    <input type="text" id="stot1" name="stot1" placeholder="Sous-total HT" disabled />
    <label></label>
    <select id="resa2" name="resa2" >
     <option value="demijour">Demi-journée</option>
     <option value="jour" selected>Journée</option>
     <option value="repas">Repas</option>
    </select>
    <input type="text" id="nombre2" name="nombre2" placeholder="Qté" />
    <input type="text" id="stot2" name="stot2" placeholder="Sous-total HT" disabled /><br>
    <label></label>
    <select id="resa3" name="resa3" >
     <option value="demijour">Demi-journée</option>
     <option value="jour">Journée</option>
     <option value="repas" selected>Repas</option>
    </select>
    <input type="text" id="nombre3" name="nombre3" placeholder="Qté" />
    <input type="text" id="stot3" name="stot3" placeholder="Sous-total HT" disabled />
   </li>
   <li>
    <label for="st">Sous-total HT:</label><input type="text" id="st" name="st" placeholder="Sous-total HT" disabled/> euros
   </li>
   <li>
    <label for="total">Total TTC (TVA 20%):</label><input type="text" id="total" placeholder="Total TTC" name="total" disabled/> euros
   </li>
   <li>
    <label id="cdtgl" for="cdtgl">J'accepte les conditions générales *</label>
    <input type="checkbox" id="cg" name="cg" required />
   </li>
   <li><br /></li>
   <li>
    <input type="button" id="verifier" value="Vérifier avant envoi" />
    <input type="button" id="imprimer" value="Imprimer" />
    <input type="reset" />
    <input type="button" id="envoyer" value="Envoyer ma commande" />
   </li>
  </ul>
 </form>
 <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>

 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("nombre1").value);
 alert(Valeur);
 if (isNaN(Valeur)) { Valeur = 0; }
 choix = document.getElementById("resa1").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("stot1").value = Valeur+" euros" ; 
  
 }else 
 Valeur = 0;


 var Valeur2=0;
 Valeur2 = parseInt(document.getElementById("nombre2").value);
 if (isNaN(Valeur2)) { Valeur2 = 0; }
 choix = document.getElementById("resa2").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("stot2").value = Valeur2+" euros" ;
 }else {
 valeur2 = 0;
 
 var Valeur3, totalht, tva, totalttc;
 Valeur3 = parseInt(document.getElementById("nombre3").value);
 if (isNaN(Valeur3)) { Valeur3 = 0; }
 choix = document.getElementById("resa3").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("stot3").value = Valeur3+" euros" ;
 }
 else{
 Valeur3 = 0;
 
 } 
 function totalht(){
 totalht = Valeur+Valeur2+Valeur3;
 tva = (totalht*20)/100;
 totalttc = totalht+tva;
 totalttc = totalttc.toFixed(2);
 document.getElementById("st").value = totalht;
 sousTotal = parseInt(document.getElementById("st").value);
 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("nombre1").addEventListener("change", CalculerTotal);
    document.getElementById("nombre2").addEventListener("change", CalculerTotal);
    document.getElementById("nombre3").addEventListener("change", CalculerTotal);
    document.getElementById("resa1").addEventListener("change", CalculerTotal);
    document.getElementById("resa2").addEventListener("change", CalculerTotal);
    document.getElementById("resa3").addEventListener("change", CalculerTotal);
});


merci de votre aide

4 réponses

Réponse 1 / 4
jordane45 Messages postés 38238 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 6 septembre 2024 4 689
21 août 2017 à 23:19
Bonjour

Commence par regarder dans la console du navigateur si il n'y a pas d'erreurs
0
Réponse 2 / 4
moon136 Messages postés 71 Date d'inscription samedi 12 août 2017 Statut Membre Dernière intervention 17 avril 2018
21 août 2017 à 23:23
merci pour la reponse

j'ai regarder et j'ai ca comme message :
SyntaxError: missing ) after condition[En savoir plus]. donc il y a un probleme avec ma syntax if, else. c'est ca?

desolée je suis debutante
0
jordane45 Messages postés 38238 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 6 septembre 2024 4 689
21 août 2017 à 23:51
Oui visiblement c'est ce que signifie le message
0
jordane45 Messages postés 38238 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 6 septembre 2024 4 689 > jordane45 Messages postés 38238 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 6 septembre 2024
22 août 2017 à 00:43
Au passage .. je t'invite (très très) fortement à utiliser la syntaxe suivante pour tes IF 
if (condition) {
   instructions1;
   instructions2;
   instructionsN;
} else {
   instructions3;
   instructionsN;
}
0
Réponse 3 / 4
moon136 Messages postés 71 Date d'inscription samedi 12 août 2017 Statut Membre Dernière intervention 17 avril 2018
22 août 2017 à 13:41
bjr oui
mon principal probleme et je m'en sors pas car par exemple jai une accolade dans le if is NaN 


if (isNaN(Valeur3)) { Valeur3 = 0; }{
	choix = document.getElementById("resa3").value;



et jai 2 if qui se suivent : 


if (Valeur3!=''){
		if (choix==='demijour")
		Valeur3 = Valeur3*8;	}



c'est là que je crois que c'est faux
0
jordane45 Messages postés 38238 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 6 septembre 2024 4 689
22 août 2017 à 13:59
Oulaaaa...

premier code 
if (isNaN(Valeur3)) { 
         Valeur3 = 0; 
	choix = document.getElementById("resa3").value;
}


Second code : 
if (Valeur3!='') {
   if (choix==='demijour') {
      Valeur3 = Valeur3*8;	 
   } // fin du premier if

} // fin du second if
0
Réponse 4 / 4
moon136 Messages postés 71 Date d'inscription samedi 12 août 2017 Statut Membre Dernière intervention 17 avril 2018
Modifié le 23 août 2017 à 00:05
merci jordane , donc j'ai essayé pas à pas de nettoyer mon script il fonctionne mais pas au niveau des conditions je vois pas clair la . 

(isNaN(Valeur)) { Valeur = 0; }
 choix = document.getElementById("resa1").value;
 
 if (choix==='demijour') {
      Valeur = Valeur*8;  
   } // fin du premier if

} // fin du second if

  else
  if (choix=="jour"){
  Valeur = Valeur*15;
  else if (choix=="repas"){
  Valeur = Valeur*7;
  document.getElementById("stot1").value = Valeur+" euros" ; 
 }else 
 {Valeur = 0};


 var Valeur2=0;
 Valeur2 = parseInt(document.getElementById("nombre2").value);
 if (isNaN(Valeur2)) { 
         Valeur2= 0; 
 choix = document.getElementById("resa3").value;
}
 if (choix==='demijour') {
      Valeur2 = Valeur2*8;  
   } // fin du premier if

} // fin du second if

  }else
  if (choix=="jour")
  Valeur2 = Valeur2*15;} 
  else if (choix=="repas"){
  Valeur2 = Valeur2*7;
  document.getElementById("stot2").value = Valeur2+" euros" ;
 }else 
 {valeur2 = 0};
 
 var Valeur3, totalht, tva, totalttc;
 Valeur3 = parseInt(document.getElementById("nombre3").value);
 
 if (isNaN(Valeur3)) { 
         Valeur3 = 0; 
 choix = document.getElementById("resa3").value;
}
 if (choix==='demijour') {
      Valeur3 = Valeur3*8;  
   } // fin du premier if

} // fin du second if
 
  else if (choix=="jour"){
  Valeur3 = Valeur3*15};
  else if (choix=="repas"){
  Valeur3 = Valeur3*7;
  document.getElementById("stot3").value = Valeur3+" euros" ;
 }else 
 {Valeur3 = 0};


si quelqu un pourrait voir avec des yeux neuf

merci de votre aide
0

Discussions similaires

Je n'arrive plus à récuperer mon compte Outlook
gnulinux_ -
laure -

4 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
Contacter le "bon coin"
babet56 -
SUDEST13 -

28 réponses
Compte HOTMAIL bloqué . Que faire ?
HAPOKA -
Charliemouse1922 -

27 réponses
code couleur associé a une image
magic charly -
pandora -

9 réponses