[Résolu] Formulaire mettre champ à 0

Question

moon28

12 Aug 2017 à 10:55

Bonjour
Je suis débutante en javascript et je suis bloquer sur mon script c'est un formulaire, je n'arrive pas à faire disparaitre le NaN et mettre les champs à 0 lorsque je rentre des chiffres dans le formulaire :

code javascript :

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(nnpl1))||(isNaN(nbpl2))||(isNaN(nbpl3))){
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 commmande</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>

Merci de votre aide Smiley smile

farang

12 Aug 2017 à 12:20

Bonjour,
déjà il est bon d'utiliser la coloration syntaxique pour poster du code !
L'erreur se trouve ici :

Ligne 84 :
à la place de Valeur = 0, écrire document.getElementById("st1").value = "0 euros" ;
ou bien:
laisser Valeur = 0, mais ajouter en dessous document.getElementById("st1").value = Valeur ;

Ligne 101
à la place de Valeur2 = 0, écrire document.getElementById("st2").value = "0 euros" ;
ou bien : même principe que ci dessus

Ligne 118
à la place de Valeur3 = 0, écrire document.getElementById("st3").value = "0 euros" ;
ou bien : même principe que ci dessus

En effet,mettre les 3 variables intermédiaires valeur valeur2 et valeur3 à 0 ne change en rien l'affichage du sous total dans le formulaire

attention avec les majuscules/minuscules au début des variables valeur, valeur1, valeur2, choisissons l'un ou l'autre

Ça marche en local chez moi, et chez vous ?
Modifié par farang (12 Aug 2017 - 12:21)

moon28

12 Aug 2017 à 13:50

Bonjour farang ! merci pour ta reponse rapide

j'ai essayé ta méthode mais quand je rentre un nombre pour la 1ere rubrique j'ai toujours le NaN, c'est ça que je veux faire disparaître, est ce que j'ai pas fait une erreur avec parselInt ou is NaN ?

farang

12 Aug 2017 à 16:04

oui OK vu,
solution demain dans la matinée, patience...

moon28

12 Aug 2017 à 19:12

Merci à demain Smiley smile

farang

13 Aug 2017 à 12:14

Bonjour,
Tout d'abord, je pense que l'idée de mettre des <select> pour sélectionner demi-journée, journée et repas, n'est pas une bonne idée pour l'ergonomie du formulaire, c'est carrément inutile, dans la mesure où on a bien trois lignes avec trois input, donc l'utilisateur remplit simplement le nombre de journée, demi-journées et repas, à quoi sert de sélectionner repas dans le premier <select> puisque on peut utiliser la 3ème ligne ?

Mais pour le moment on garde ce principe, qu'on pourra remplacer par un champ invisible pour chaque ligne, champ contenant le type de produit de la ligne, demijour, jour ou repas.

Ensuite je propose d'entrer les prix à un seul endroit dans le script, ce sera plus facile à maintenant et sans risque d'erreur, sous la forme d'un tableau Javascript. Les prix sont définis au tout début du script :


prix = new Array();
prix['demijour'] = 8;
prix['jour'] = 15;
prix['repas'] = 7;

Pour le recalcul, je propose de passer en paramètre à la fonction CalculerTotal() le champ <input> modifié par l'utilisateur, ou plus exactement la ligne du champ modifié, en effet on n'a pas à intervenir sur les deux lignes non concernées par la modification.

On aurait donc en fin de script ceci :


    document.getElementById("nbpl1").onchange = function () {
    	CalculerTotal("1");
    };
    document.getElementById("nbpl2").onchange = function () {
    	CalculerTotal("2");
    };
    document.getElementById("nbpl3").onchange = function () {
    	CalculerTotal("3");
    };

Quand l'utilisateur modifie le contenu d'un input, on appelle la fonction CalculerTotal() en passant en paramètre le rang de la ligne concernée et donc à traiter

Du coup la fonction CalculerTotal() devient CalculerTotal(n), n étant le numéro de ligne passé en paramètre.

Cette fonction devient beaucoup plus simple et courte :


// Fonction On change value
function CalculerTotal(n) {
	select_produits = "resrv" + n;
	input_saisie = "nbpl" + n;
	resultat = "st" + n;
	quantite = parseInt(document.getElementById(input_saisie).value);
	if (isNaN(quantite)) {
		alert("Veuillez entrer un nombre entier");
		document.getElementById(input_saisie).value = "" ;
		document.getElementById(resultat).value = "" ;
	}
	else {
		quantite = parseInt(document.getElementById(input_saisie).value);
		prix_unitaire = prix[document.getElementById(select_produits).value];
		total = quantite * prix_unitaire;
		document.getElementById(resultat).value = total +" euros" ;	
	}

var totalht, tva, totalttc;

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;
}

Quelques explications:
Au début, on construit les noms des 3 champs à prendre en compte, select, input modifié et total ht de la ligne, en fonction du paramètre passé, c'est à dire le rang de la ligne
Par exemple pour la ligne 2, le <select> sera resrv2, l'<input> modifié sera nbpl2 et le champ où écrire le résultat sera st2
On appelle quantite ce qui été saisi dans l'input,
Si cette quantité n'est pas un nombre, une alerte et on vide les champs saisie et résultat
Sinon,
on récupère le prix unitaire, tout d'abord en récupérant le nom du produit dans le <select>, ce qui nous permet de trouver la valeur correspondante dans le tableau prix Smiley abc

qu'on a initialisé au début.
Ensuite on calcule le produit et on affiche le résultat avec " euros" dans le champ sous-total

Le principe c'est donc, au lieu de récupérer le contenu d'un champ en faisant


parseInt(document.getElementById("nbpl1").value);

on commence par donner à la variable input_saisie la valeur "nbpl" + n, dans notre cas nbpl1 et c'est cette variable qu'on utilise à la place de l'ID explicite du champ à interroger :
du coup, il suffit de changer la valeur de n, pour interroger un autre champ :


parseInt(document.getElementById(input_saisie).value);

Le script devient beaucoup plus simple et beaucoup plus facilement maintenable.
Et si dans une deuxième étape on supprime les <select> pour les remplacer par un champ caché contenant le code du produit de la ligne, il n'y aura quasiment rien à changer.
Et si un ajoute ou supprime des lignes, il n'y aura rien à changer dans la fonction.

J'ai recopié le fin de la fonction, calcul des totaux, je crois qu'il ne fonctionne pas mais on verra le problème plus tard.

Pour le moment si on utilise les <select>, on ajoute les lignes pour détecter les changements:


    document.getElementById("resrv1").onchange = function () {
    	CalculerTotal("1");
    };
    document.getElementById("resrv2").onchange = function () {
    	CalculerTotal("2");
    };
    document.getElementById("resrv3").onchange = function () {
    	CalculerTotal("3");
    };

et bien entendu, supprimer les lignes


document.getElementById("nbpl1").addEventListener("change", function(){CalculerTotal("nbpl1");});
document.getElementById("nbpl2").addEventListener("change", function(){CalculerTotal("nbpl2");});
document.getElementById("nbpl3").addEventListener("change", function(){CalculerTotal("nbpl3");});
document.getElementById("resrv1").addEventListener("change", CalculerTotal);
document.getElementById("resrv2").addEventListener("change", CalculerTotal);
document.getElementById("resrv3").addEventListener("change", CalculerTotal);

Il y a juste un pb quand on change le <select> sans avoir rempli la quantité, mais comme les <select> sont appelé à disparaître ... Sinon c'est un bon exercice, modifier le script pour ne pas recalculer si on modifie le <select> alors que le champ de saisie de la quantité est vide,
... je verrais bien un deuxième paramètre à passer à la fonction, valant oui ou non selon qu'on doit recalculer ou pas

Les pros apporteront des modifs et corrigeront les imperfections

moon28

13 Aug 2017 à 20:24

Bonjour

Merci pr ta reponse alors jai essayé de faire comme tu m'as dit mais le champ ne se met pas à 0 il y a toujours ce NaN... ou j'ai peut etre mal compris ou mal placer les codes..

je remet le 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();
}
prix = new Array(){;
prix['demijour'] = 8;
prix['jour'] = 15;
prix['repas'] = 7;
}
// Fonction On change value
function CalculerTotal(n) {
	select_produits = "resrv" + n;
	input_saisie = "nbpl" + n;
	resultat = "st" + n;
	quantite = parseInt(document.getElementById(input_saisie).value);
	if (isNaN(quantite)) {
		alert("Veuillez entrer un nombre entier");
		document.getElementById(input_saisie).value = "" ;
		document.getElementById(resultat).value = "" ;
	}
	else {
		quantite = parseInt(document.getElementById(input_saisie).value);
		prix_unitaire = prix[document.getElementById(select_produits).value];
		total = quantite * prix_unitaire;
		document.getElementById(resultat).value = total +" euros" ;	
	}

var totalht, tva, totalttc;

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();
    }
}


ocument.getElementById("nbpl1").onchange = function () {
    	CalculerTotal("1");
    };
    document.getElementById("nbpl2").onchange = function () {
    	CalculerTotal("2");
    };
    document.getElementById("nbpl3").onchange = function () {
    	CalculerTotal("3");
    };
});

je galere vraiment sur cet exercice c'est fou

moon28

13 Aug 2017 à 22:34

c'est bon jai réussi ça fonctionne, je te remercie beaucoup pour ton aide

Sujet clos

JavaScript, DOM et API Web HTML5

[Résolu] Formulaire mettre champ à 0