Additionner les values d'un formulaire

Salut à tous,


Je fais mon premier essai de formulaire, et je voudrais pouvoir calculer un montant total à payer, issu de la valeur que j'ai attrbuée aux différents boutons radio qui seront selectionnés par le visiteur.

Seul petit hic : Débutant dans les formulaires et ignorant absolu dans le JS...je nage un peu ...

Voici le bout de code que j'ai ébauché..Je suis ouvert à tous vos conseils !!!

Merci,

Lutin

<form method="post" action="traitement_inscript.php">
 <fieldset>
       <legend>INCRIPTION EN LIGNE AU CONGRES :</legend>
       
       <small>Les champs obligatoires sont marqués d'une * </small>
       
 <p> <label class="rouge">Nom :.................<input type="text" name="nom" tabindex="10" /></label>  *</p>
 <p> <label class="rouge">Prénom :.............<input type="text" name="prenom" /></label> * </p>
 <p> <label class="rouge">Adresse :.............<input type="text" name="adresse" /></label>*  </p>
 <p> <label class="rouge">Code Postal :.......<input type="text" name="codepostal"  /></label>*  </p>
 <p> <label class="rouge">Ville :..................<input type="text" name="ville"  /></label> * </p>
 <p> <label class="rouge">Telephone :.........<input type="text" name="telephone"  /></label>  *</p>
 <p> <label>Fax :....................<input type="text" name="fax"  /></label>  </p>
 <p> <label class="rouge">E-mail :................<input type="text" name="mail"  /></label>  *</p>
 <p> <label class="rouge">Section Locale :...<input type="text" name="sectionlocale"  /></label>*  </p>
 <p>________________________________________________________________________________</p>
 <p><b>Cotisation (obligatoire) CR-ROM inclus </b>*</p>
 <p> <input type="radio" name="cotisation" value="130"> Cotisation CNO 2007 : 130 euros </p>
 <p> <input type="radio" name="cotisation" value="65">Cotisation CNO 2007 réduite (retraité/interne) : 65 euros</p>     
  <p>________________________________________________________________________________</p>
 
 
 <p><b>Inscription XXIVemes Journées du CNO (déjeuners compris) : </b> </p>
 <p> <input type="radio" name="dateinscripton" value="300"> Inscription avant le 20/02/07 : 300 euros </p>
 <p> <input type="radio" name="dateinscripton" value="345">Inscription après le 20/02/07 : 345 euros</p>     
  <p>________________________________________________________________________________</p>
 
 <p><b>Tarifs réduits sans CD-ROM (déjeuners compris) : </b> </p>
 <p> <input type="radio" name="tarifreduit" value="150"> Etudiant 3e cycle sans activité libérale, sans FIF-PL : 150 euros </p>
 <p> <input type="radio" name="tarifreduit" value="65">Interne des CHU à jour de sa cotisation : 65 euros</p>     
  <p>________________________________________________________________________________</p>

 <p><b>Inscription au cours post-congrès (J.P. Okeson - samedi 17 mars) : </b> </p>
 <p> <input type="radio" name="postcongres" value="65"> Congressiste : 65 euros </p>
 <p> <input type="radio" name="postcongres" value="65">Non congressiste membre du CNO : 65 euros</p> 
 <p> <input type="radio" name="postcongres" value="85">Non congressiste non membre du CNO : 85 euros</p>     
  <p>________________________________________________________________________________</p>

 
 
 <p><b>Soirée de Gala - Jeudi 15 mars (A bord du Marseillois) :</b> </p>
 <p> <input type="checkbox" name="gala" value="100"> Inscription : 100 euros</p>
 <p> <input type="checkbox" name="gala2" value="100"> Accompagné de : 100 euros</p>   
  <p>________________________________________________________________________________</p>
 
 <p> <label class="rouge">Total :            <input type="text" name="total" tabindex="40" /></label>  *</p>
 
 <p> <input type="submit" /> <input type="reset" name="Effacer" /></p>
 
 	
</fieldset>
</form>  

<hors-sujet>
Vraiment pas top les <p> avec des underscore Pourquoi ne pas utiliser un simple <hr /> ?
</hors-sujet>

Sinon ça manque un peu d'id sur les champs (pour associer un champ et son label), ce qui déjà facilitera le javascript. Donc pour chaque champs, met un id unique, qui sera repris dans le label, genre :

<label for="pouet">Pouet</label> <input type="text" name="tagada" id="pouet" />

Avec un id sur tous les champs, faire l'addition sera alors beaucoup plus simple. Fait déjà ça, et reviens après

Ah merde, j'aurais pas du mettre pouet dans le label Bon tu vois le principe, je remet l'exemple

<label for="pouet">Entrez votre pouet :</label> <input type="text" name="tagada" id="pouet" />

L'id peut être égal au name s'il est unique dans tout le document donc

Bon maintenant pour faire propre, fait en sorte que le bouton résultat appel une fonction, genre calcul(). Ensuite rajoute un script quelque part, et après c'est tout simple vu que t'as des id partout, genre :

document.getElementById("resultat").value = parseInt(document.getElementById("machin1")) + parseInt(document.getElementById("machin2))....

Normalement parseInt sert à transformer une chaîne de caractères en nombre, pour pouvoir faire l'addition (à vérifier toutefois)

Petite question : Dans la mesure ou un seul bouton radio par groupe ne sera selectionné, faut il quand meme donner un id différent à chaque radio d'un meme groupe ?

J'ai du merder quelquepart , il me renvoit 'NaN' dans le champ résultat.

<head>

<script type="text/javascript">
test_class = "rouge"; // à renseigner si on identifie les labels par une class css
message = "merci de remplir tous les champs obligatoires";

function verif_form(formulaire) {
	vide = 0;
	for ( var i=0; i<formulaire.getElementsByTagName("label").length; i++ ) {
		element_label = formulaire.getElementsByTagName("label")[i];
		txt_label = element_label.firstChild.nodeValue;
		class_label = element_label.className;
		if ( (test_text != "" && txt_label.indexOf(test_text) != -1) || (test_class != "" && class_label == test_class) ) {
			if ( element_label.getAttribute("htmlFor") || element_label.getAttribute("for") ) {
				if ( document.all ) id_champs = element_label.getAttribute("htmlFor");
				else id_champs = element_label.getAttribute("for");
				champs = document.getElementById(id_champs);
				if ( champs.tagName == "INPUT" && champs.getAttribute("type") == "text" ) {
					if ( champs.value == "" ) vide ++;
				}
				else if ( champs.tagName == "TEXTAREA" && champs.value == "" ) vide ++;
			}
			else {
				if ( element_label.getElementsByTagName("input")[0] ) {
					input_label = element_label.getElementsByTagName("input")[0];
					if ( input_label.getAttribute("type") == "text" && input_label.value == "" ) vide ++;
				}
				else if ( element_label.getElementsByTagName("textarea")[0] && element_label.getElementsByTagName("textarea")[0].value == "" ) vide ++;
			}
		}
	}
	for (var j=0; j<formulaire.getElementsByTagName("select").length; j++ ) {
		liste = formulaire.getElementsByTagName("select")[j];
		for ( var k=0; k<liste.options.length; k++) {
			if ( liste.options[k].selected == true && liste.options[k].value == "" ) vide ++;
		}
	}
	if ( vide != 0 ) {
		alert(message);
		return false;
	}
	else {
		return true;
	}
}
window.onload = function() {
	document.getElementsByTagName("form")[0].onsubmit = 
	function () { return verif_form(this); }
}
</script>




 <script language="JavaScript">
     function calcultotal() {
       document.getElementById("resultat").value = parseInt(document.getElementById("Cotisation130")) + parseInt(document.getElementById("Cotisation65")) + parseInt(document.getElementById("Inscription300")) + parseInt(document.getElementById("Inscription345")) + parseInt(document.getElementById("Etudiant150")) + parseInt(document.getElementById("Interne65")) + parseInt(document.getElementById("congress65")) + parseInt(document.getElementById("Noncongress65")) + parseInt(document.getElementById("Noncongress85")) + parseInt(document.getElementById("Gala100")) + parseInt(document.getElementById("Galab100"))         
  }
 </script>










</head>

<body bgcolor="#125495">

   
 
  
  
<div style="background-color: white; border: #FAD348 3px solid;">
<p />
<form method="post" action="traitement_inscript.php" name="formulaire">
 <fieldset>
       <legend>INCRIPTION EN LIGNE AU CONGRES :</legend>
       
       <small>Les champs obligatoires sont marqués d'une * </small>
       
 <p> <label class="rouge">Nom :.................<input type="text" name="nom" size="30" /></label>  *</p>
 <p> <label class="rouge">Prénom :.............<input type="text" name="prenom" size="30" /></label> * </p>
 <p> <label class="rouge">Adresse :.............<input type="text" name="adresse" size="30" /></label>*  </p>
 <p> <label class="rouge">Code Postal :.......<input type="text" name="codepostal" size="30" /></label>*  </p>
 <p> <label class="rouge">Ville :..................<input type="text" name="ville" size="30" /></label> * </p>
 <p> <label class="rouge">Telephone :.........<input type="text" name="telephone" size="30" /></label>  *</p>
 <p> <label>Fax :....................<input type="text" name="fax" size="30" /></label>  </p>
 <p> <label class="rouge">E-mail :................<input type="text" name="mail" size="30" /></label>  *</p>
 <p> <label class="rouge">Section Locale :...<input type="text" name="sectionlocale" size="30" /></label>*  </p>
 <hr />
 
 
 <p><b>Cotisation (obligatoire) CR-ROM inclus </b>*</p>
 
 <p> <label for="Cotisation130">Cotisation CNO 2007 : 130 euros</label><input type="radio" name="cotisation" value="130" id="Cotisation130">  </p>
 
 <p> <label for="Cotisation65">Cotisation CNO 2007 réduite (retraité/interne) : 65 euros </label><input type="radio" name="cotisation" value="65" id="Cotisation65"></p>     
 <hr />
 
 
 
 <p><b>Inscription XXIVemes Journées du CNO (déjeuners compris) : </b> </p>
 
 <p> <label for="Inscription300">Inscription avant le 20/02/07 : 300 euros </label><input type="radio" name="dateinscription" value="300" id="Inscription300">  </p>
 
 <p> <label for="Inscription345">Inscription après le 20/02/07 : 345 euros</label><input type="radio" name="dateinscription" value="345" id="Inscription345"></p>     
  <hr />
 
 
 <p><b>Tarifs réduits sans CD-ROM (déjeuners compris) : </b> </p>
 
 <p> <label for="Etudiant150">Etudiant 3e cycle sans activité libérale, sans FIF-PL : 150 euros</label><input type="radio" name="tarifreduit" value="150" id="Etudiant150">  </p>
 
 <p><label for="Interne65">Interne des CHU à jour de sa cotisation : 65 euros</label> <input type="radio" name="tarifreduit" value="65" id="Interne65"></p>     
  <hr />

 
 
 <p><b>Inscription au cours post-congrès (J.P. Okeson - samedi 17 mars) : </b> </p>
 
 <p><label for="congress65">Congressiste : 65 euros <input type="radio" name="postcongres" value="65" id="congress65"> </p>
 <p> <label for="Noncongress65">Non congressiste membre du CNO : 65 euros<input type="radio" name="postcongres" value="65" id="Noncongress65"></p>
  
 <p><label for="Noncongress85">Non congressiste non membre du CNO : 85 euros</label> <input type="radio" name="postcongres" value="85" id="Noncongress85"></p>     
  <hr />

 
 
 
 <p><b>Soirée de Gala - Jeudi 15 mars (A bord du Marseillois) :</b> </p>
 
 <p> <label for="Gala100">Inscription : 100 euros</label><input type="checkbox" name="gala" value="100" id="Gala100"> </p>
 <p> <label for="Galab100">Accompagné de : 100 euros</label><input type="checkbox" name="gala2" value="100" id="Galab100"> </p>   
  <hr />
  
  
  <p><input type="text" name="resultat" size="40" id="resultat"></p>
  <p>
  <input type="button" value="Calculer total" onClick="calcultotal()">
  
<!--  
onClick="document.formulaire.resultat.value = document.formulaire.cotisation.value + document.formulaire.dateinscription.value + document.formulaire.tarifreduit.value + document.formulaire.postcongres.value + document.formulaire.gala.value + document.formulaire.gala2.value">
-->
</p>
  
  
 
  
 
 <p> <input type="submit" /> <input type="reset" name="Effacer" /></p>
 
 	
</fieldset>
</form>  
</div>
</body>

Merci pour ton aide .. [/i]

Atomic Lutin a écrit :
Petite question : Dans la mesure ou un seul bouton radio par groupe ne sera selectionné, faut il quand meme donner un id différent à chaque radio d'un meme groupe ?

Ouais, chaque radio doit avoir un id différent. Moi je rajoute un numéro en général

Oui je vois mieux le truc, j'ai renommé tous les id en Rx, c'est plus rapide pour la suite lol

Bonjour
A quoi servent toutes tes balises <p> ?
Il suffit d'une seule après la balise <form> et sa fermante avant </p>. Le texte sera plus claire. Remplace à la limite tes <p> par des <li> d'une liste non ordonnée (<ul>) ou par des <dt> si tu veux éviter les <li> sans puce.
De plus dans la balise <form> il faudrait utiliser un truc du genre onsubmit="return valider();"
Si tu peux associer ce onsubmit dans le .js et pas dans la balise cela n'en sera que mieux, comme il est déjà fait avec window.onload.
Enfin quant à faire, puisque tu dis être débutant autant te lancerf de suite dans le "striict" et éviter les arguments tels bgcolor et les caractères accentués.
Bon courage

A vrai dire je ne saisis pas tout

Pour les balises <p>, c'est vrai que je n'ai pas l'habitude d'utiliser les autres mais je vais essayer d'y songer.

Pour le bgcolor, je n'ai jamais réussi à integrer ca dans ma feuille CSS, ca n'a jamais été pris en compte, et comme je suis un peu préssé par le temps je suis allé au plus simple, mais un peit coup de pouce serait le bienvenu !!


Pour les caractères accentués, je sais, c'est mal...

Pour le onsubmit="return valider(); parcontre je ne sais pas du tout ce que ca veut dire

Merci pour votre aide !!
Modifié par Atomic Lutin (12 Nov 2006 - 15:27)

-------------------
Pour le bgcolor, je n'ai jamais réussi à integrer ca dans ma feuille CSS, ca n'a jamais été pris en compte, et comme je suis un peu préssé par le temps je suis allé au plus simple, mais un peit coup de pouce serait le bienvenu !!
----------------------------
il faut utiliser comme style
background-color : MaCouleurdeFond;
color : MaCouleurDeTexte;

Attention les 2 sont obligatoires pour valider ta feuille de style.

-----------------------------------------------------
Pour le onsubmit="return valider(); parcontre je ne sais pas du tout ce que ca veut dire
--------------------------------------------------------------
Ton bouton "submit sert à envoyer le formulaire au serveur de son destinataire. Mais l'envoi ne peut s'effectuer que si le formulaire est valide. Ta fonction de validation teste d'ailleurs ce formulaire et retourne parfois "true" et parfois "false". Le formujlaire, si tu écris "onsubmit="return valider()" ne sera soumis que si ta fonction de validation retourne "true" et ser

je crois avoir eu un problème avec le message précédent. Je reprends
-------------
Le formulaire, si tu écris "onsubmit="return valider()" ne sera soumis que si ta fonction de validation retourne "true" et sera bloqué sinon.

De plus, la "mode" ou le coté "puriste" voudrait que le javascript n'apparaisse pas du tout dans le xhtml. C'est pour cela qu'il faut essayer d'associer le "onsubmit" à ton formulaire directement dans ton .js et non pas dans ta balise <form> en écrivant quelque chose comme

var form = document.getElementsByTagName("form");
forms[0].onsubmit = valider; (sans parenthèses) puis tu écris ta fonction valider(). (forms[0] signifie que c'est le premier formulaire si tu en as plusieurs)

bon courage

pour accéder à ton champ d'identificateur resultat :
document.forms[0].resultat.value = MonCalcul;

si MonCalcul est déjà évalué (un calcul, un texte, ...)

coucou a écrit :
pour accéder à ton champ d'identificateur resultat :
document.forms[0].resultat.value = MonCalcul;

si MonCalcul est déjà évalué (un calcul, un texte, ...)

Alalala Faut y aller par document.getElementById, c'est plus propre et c'est surtout standard