CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 29 08:29:41

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil > Forum >

Formulaire dynamique et html pour un submit

Poser une question dans le forum ou lancer une discussion

Formulaire dynamique et html pour un submit

jeudi 10 mars 2011 à 09:00:03 | Formulaire dynamique et html pour un submit

spaceboy89

1 msg

Bonjour,

Je vais essayer de m'expliquer clairement sur ce problème qui me bloque depuis un moment.
J'ai crée un formulaire html avec des parties en javascript pour me permettre d'afficher de nouveaux champs suivant le choix que fait l'utilisateur. De ce côté pas de soucis. Par contre c'est pour envoyer le résultat par mail qui me pose problème. J'ai des champs en html et des <form> mais je ne veux qu'un seul submit pour envoyer tout ça.

Pouvez vous m'aider ? Je vous joins mon code.

Merci beaucoup d'avance.

Code Javascript :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>NFB Finance - Demande en ligne</title>
</head>

<body>
<html>
<head>
<p><span style="color: #333399;"><span style="font-family: book antiqua,palatino;"><span style="font-size: x-large;">Demande en ligne</span></span></span></p>
</head>
<style type="text/css">
   .non_visible {
      display : none;
   }
   .visible {
      display : block;
   }
</style>

<!-- Code javascript pour les différentes actions par rapport au menu déroulant du titre -->

<script language="JavaScript">
function afficherTitre() {
   var titre1 = document.getElementById("titre1");
   var titre2 = document.getElementById("titre2");
   var choix = document.form1.titre.value;
   switch(choix) {
      case '0' :
         titre1.className = 'non_visible';
         titre2.className = 'non_visible';
         break;
      case '1' :
         titre1.className = 'visible';
         titre2.className = 'non_visible';
         break;
      case '2' :
         titre1.className = 'non_visible';
         titre2.className = 'visible';
         break;
   }
}
</script>

<!-- Code javascript pour les différentes actions par rapport au menu déroulant de la situation -->

<script language="JavaScript">
function afficherSituation() {
   var situation1 = document.getElementById("situation1");
   var situation2 = document.getElementById("situation2");
   var situation3 = document.getElementById("situation3");
   var situation4 = document.getElementById("situation4");
   var choix = document.form2.situation.value;
   switch(choix) {
      case '0' :
         situation1.className = 'non_visible';
         situation2.className = 'non_visible';
         situation3.className = 'non_visible';
         situation4.className = 'non_visible';
         break;
      case '1' :
         situation1.className = 'visible';
         situation2.className = 'visible';
         situation3.className = 'visible';
         situation4.className = 'visible';
         break;
      case '2' :
         situation1.className = 'visible';
         situation2.className = 'visible';
         situation3.className = 'visible';
         situation4.className = 'visible';
         break;
      case '3' :
         situation1.className = 'non_visible';
         situation2.className = 'non_visible';
         situation3.className = 'non_visible';
         situation4.className = 'non_visible';
      case '4' :
         situation1.className = 'non_visible';
         situation2.className = 'non_visible';
         situation3.className = 'non_visible';
         situation4.className = 'non_visible';
         break;
   }
}
</script>

<!-- Code javascript pour les différentes actions par rapport au menu déroulant du pret -->

<script language="JavaScript">
function afficherPret() {
   var pret1 = document.getElementById("pret1");
   var pret2 = document.getElementById("pret2");
   var pret3 = document.getElementById("pret3");
   var pret4 = document.getElementById("pret4");
   var pret5 = document.getElementById("pret5");
   var pret6 = document.getElementById("pret6");
   var pret7 = document.getElementById("pret7");
   var pret8 = document.getElementById("pret8");
   var pret9 = document.getElementById("pret9");
   var pret10 = document.getElementById("pret10");
   var pret11 = document.getElementById("pret11");
   var pret12 = document.getElementById("pret12");
   var choix = document.form3.pret.value;
   switch(choix) {
      case '0' :
         pret1.className = 'non_visible';
         pret2.className = 'non_visible';
         pret3.className = 'non_visible';
         pret4.className = 'non_visible';
         pret5.className = 'non_visible';
         pret6.className = 'non_visible';
         pret7.className = 'non_visible';
         pret8.className = 'non_visible';
         break;
      case '1' :
         pret1.className = 'visible';
         pret2.className = 'visible';
         pret3.className = 'visible';
         pret4.className = 'visible';
         pret5.className = 'non_visible';
         pret6.className = 'non_visible';
         pret7.className = 'non_visible';
         pret8.className = 'non_visible';
         pret9.className = 'non_visible';
         pret10.className = 'non_visible';
         pret11.className = 'non_visible';
         pret12.className = 'non_visible';
         break;
      case '2' :
         pret1.className = 'visible';
         pret2.className = 'visible';
         pret3.className = 'visible';
         pret4.className = 'visible';
         pret5.className = 'visible';
         pret6.className = 'visible';
         pret7.className = 'visible';
         pret8.className = 'visible';
         pret9.className = 'non_visible';
         pret10.className = 'non_visible';
         pret11.className = 'non_visible';
         pret12.className = 'non_visible';
      case '3' :
         pret1.className = 'visible';
         pret2.className = 'visible';
         pret3.className = 'visible';
         pret4.className = 'visible';
         pret5.className = 'visible';
         pret6.className = 'visible';
         pret7.className = 'visible';
         pret8.className = 'visible';
         pret9.className = 'visible';
         pret10.className = 'visible';
         pret11.className = 'visible';
         pret12.className = 'visible';

         break;
   }
}
</script>

<body>
<TABLE>

<TR>
	<form name="form1" method="" action="">
		<TD><font face="Verdana" size="2">Titre :</font></TD>
   		<TD><select name="titre" onChange="afficherTitre()">
      		<option value="0">Hébergé</option>
      		<option value="1">Locataire</option>
      		<option value="2">Propriétaire</option>
   		</select></TD>
	</form></TD>
</TD>
<TD>
<p class="non_visible" id="titre1">
	<font face="Verdana" size="2"> Loyer mensuel charges comprises : </font><input type="text" id="titre1" name="titre1" SIZE="8" MAXLENGHT="8"/></p>
</TD>
	
<TD>
<p class="non_visible" id="titre2">
   	<font face="Verdana" size="2">Valeur du bien : </font><input type="text" id="titre2" name="titre2" SIZE="10" MAXLENGHT="10"/></p>
</TD>
</TR>
 
<TR>
<p><TD><font face="Verdana" size="2">Nom : </TD>
	<TD><INPUT type=text name="nom"></p></TD>
	<TD><p class="non_visible" id="situation1">
   	<font face="Verdana" size="2">  Nom de la 2ème personne : </font><input type="text" id="situation1" name="situation1" /></p></TD>
</TR>
 	
<TR>
<p><TD><font face="Verdana" size="2">Prénom : </TD>
	<TD><INPUT type=text name="prenom"></p>
	<TD><p class="non_visible" id="situation2">
   	<font face="Verdana" size="2">  Prénom de la 2ème personne : </font><input type="text" id="situation2" name="situation2" /></p></TD>
</TD>
</TR>

<TR>	
<p><TD><font face="Verdana" size="2">Date de naissance : </TD>
	<TD><INPUT type=date name="naissance" SIZE="8" MAXLENGHT="8" VALUE="jj/mm/aa"></p>
	<TD><p class="non_visible" id="situation3">
   	<font face="Verdana" size="2">  Date de naissance de la 2ème personne : </font><input type="date" id="situation3" name="situation3" SIZE="8" MAXLENGHT="8" VALUE="jj/mm/aa"/></p></TD>
</TD>
</TR>

<TR>
	<form name="form2" method="" action="">
		<TD><font face="Verdana" size="2">Situation Familiale :</font></TD>
   		<TD><select name="situation" onChange="afficherSituation()">
      		<option value="0">Célibataire</option>
      		<option value="1">Marié(e)</option>
      		<option value="2">En concubinage</option>
      		<option value="3">Divorcé(e)</option>
      		<option value="4">Veuf/Veuve</option>
   		</select></TD>
	</form>

<TR>
<p><TD><font face="Verdana" size="2">Nombre d'enfants à charge :</font></TD>
	<TD><SELECT name="fonction">
		<OPTION VALUE="0">0</OPTION>
		<OPTION VALUE="1">1</OPTION>
		<OPTION VALUE="2">2</OPTION>
		<OPTION VALUE="3">3</OPTION>
		<OPTION VALUE="4">4</OPTION>
		<OPTION VALUE="5">5</OPTION>
		<OPTION VALUE="6">6</OPTION>
		<OPTION VALUE="7">7</OPTION>
		<OPTION VALUE="8">8</OPTION>
	</SELECT></TD></p>
</TR>

<TR>
<p><TD><font face="Verdana" size="2">Adresse email : </TD>
	<TD><INPUT type=text name="email"></p>
</TD>
</TR>

<TR>	
<p><TD><font face="Verdana" size="2">Ville : </TD>
	<TD><INPUT type=text name="ville"></p>
</TD>
</TR>

<TR>
<p><TD><font face="Verdana" size="2">Téléphone : </TD>
	<TD><INPUT type=text name="telephone"></p>
</TD>
</TR>

</TABLE>

<p><TD><font face="Verdana" size="2">------------------------- Revenus -------------------------</TD></p>

<TABLE>

<TR>	
<p><TD><font face="Verdana" size="2">Revenus Mensuels : </TD>
	<TD><INPUT type=text name="revenus" SIZE="8" MAXLENGHT="8"></p></TD>
		<TD><p class="non_visible" id="situation4">
   	<font face="Verdana" size="2">  Revenus de la 2ème personne : </font><input type="text" id="situation4" name="situation4" SIZE="8" MAXLENGHT="8"/></p></TD>
</TD>
</TR>

<TR>
<p><TD><font face="Verdana" size="2">Allocations : </TD>
	<TD><INPUT type=text name="revenus" SIZE="8" MAXLENGHT="8"></p>
</TD>
</TR>

</TABLE>
   	
<p><TD><font face="Verdana" size="2">--------------------- Prêts ---------------------</TD></p>

<TABLE>
<TR>
	<form name="form3" method="" action="">
		<TD><font face="Verdana" size="2">Nombre de prêts en cours :</font></TD>
   		<TD><select name="pret" onChange="afficherPret()">
      		<option value="0">0</option>
      		<option value="1">1</option>
      		<option value="2">2</option>
      		<option value="2">3</option>
   		</select></TD>
	</form></TD>
</TD></TR>

<TR>
<TD>
<p class="non_visible" id="pret1">
	<font face="Verdana" size="2"> Prêt numéro 1 : </font></p></TD>
<TD>
<p class="non_visible" id="pret2">
	<font face="Verdana" size="2"> Capital restant dû : </font><input type="text" id="pret2" name="pret2" SIZE="8" MAXLENGHT="8"/></p></TD>
<TD>
<p class="non_visible" id="pret3">
	<font face="Verdana" size="2"> Mensualités : </font><input type="text" id="pret3" name="pret3" SIZE="8" MAXLENGHT="8"/></p></TD>
<TD>
<p class="non_visible" id="pret4">
<font face="Verdana" size="2">Type de prêt :</font></TD>
   		<TD><select name="typepret">
      		<option value="0">Immobilier</option>
      		<option value="1">Consommation</option>
      		<option value="2">Revolving</option>
      		<option value="2">Automobile</option>
   		</select></TD></p>
</TR>
<TR>
<TD>
<p class="non_visible" id="pret5">
	<font face="Verdana" size="2"> Prêt numéro 2 : </font></p></TD>
<TD>
<p class="non_visible" id="pret6">
	<font face="Verdana" size="2"> Capital restant dû : </font><input type="text" id="pret6" name="pret6" SIZE="8" MAXLENGHT="8"/></p></TD>
<TD>
<p class="non_visible" id="pret7">
	<font face="Verdana" size="2"> Mensualités : </font><input type="text" id="pret7" name="pret7" SIZE="8" MAXLENGHT="8"/></p></TD>
<TD>
<p class="non_visible" id="pret8">
<font face="Verdana" size="2">Type de prêt :</font></TD>
   		<TD><select name="typepret">
      		<option value="0">Immobilier</option>
      		<option value="1">Consommation</option>
      		<option value="2">Revolving</option>
      		<option value="2">Automobile</option>
   		</select></p></TD>
</TR>
<TR>
<TD>
<p class="non_visible" id="pret9">
	<font face="Verdana" size="2"> Prêt numéro 3 : </font></p></TD>
<TD>
<p class="non_visible" id="pret10">
	<font face="Verdana" size="2"> Capital restant dû : </font><input type="text" id="pret10" name="pret10" SIZE="8" MAXLENGHT="8"/></p></TD>
<TD>
<p class="non_visible" id="pret11">
	<font face="Verdana" size="2"> Mensualités : </font><input type="text" id="pret11" name="pret11" SIZE="8" MAXLENGHT="8"/></p></TD>
<TD>
<p class="non_visible" id="pret12">
<font face="Verdana" size="2">Type de prêt :</font></TD>
   		<TD><select name="typepret">
      		<option value="0">Immobilier</option>
      		<option value="1">Consommation</option>
      		<option value="2">Revolving</option>
      		<option value="2">Automobile</option>
   		</select></p></TD>
</TR>
</TABLE>

<p align="left"><INPUT type=submit onclick="document.getElementById('form2').submit();" value=Envoyer>&nbsp;&nbsp;<INPUT type="reset" value="Tout effacer"</p>

</body>
</html>
</body>
</html>

jeudi 10 mars 2011 à 21:42:10 | Re : Formulaire dynamique et html pour un submit

007Julien

152 msg

228 msg CS

Cette page donne des indications intéressantes sur les formulaires...

Est-il vraiment utile de définir autant de variables (pret1, pret2, ... pret12) pour ne les utiliser qu'une fois et empêcher ainsi l'utilisation de boucles ? Ne serait-il pas préférable de cacher tous les prêts (ou seulement certains) avec des instructions telles que :

Code Javascript :

for (var i=1;i<=nbrPret;i++){
   document.getElementById('pret+i').className='visible';}

quitte à en rétablir quelques uns avec des instructions analogues ?

Ensuite, il serait peut-être plus efficient de construire ces éléments à la volée...

Enfin, il convient de distinguer l'envoi (ou la soumission pour reprendre le submit) du formulaire de l'envoi d'un mail qui est, une fois les renseignements indispensables récupérés, un pur problème d'utilisation de la fonction mail en PHP.

Cette discussion est classée dans : var, visible, document, getelementbyid, classname

Répondre à ce message

Sujets en rapport avec ce message

script [ par thigat ] voilà j'ai fais un script, mais je n'arrive pas a mettre un lien (url) dans ce script, voici le script :/* ATP - webmaster* Script - WebNet.News */va Methode "document.getElementById" // Probleme de modification de plusieurs DIV [ par Gunsnake ] Bonjour, Voici mon problème. J'aimerais, au moyen d'un bouton actionné, modifier plusieurs DIV de ma page web. Tout ceci dans le but d'éviter les fra Problème cahce avec IE [ par goulouk ] Bonjour,je voudrais savoir comment empécher de mettre une page en cache, ou alors obliger IE à recharger la page sans la prendre dans le cache.Je vous y en ras le bol : acitvé - désactivé des zone de texte [ par coyote_fx ] Hello à tous voilà Javascript n'est pas ma spécialité du tout...je voudrais juste activer ou désactiver plusieurs zones de textes en fonction d'un cli ajax/xmlhttprequest [ par David_monchy ] salut à tous,je développe un chat, et j'ai un problème: j'utilise une liste de connectés qui affiche en 'temps reel' les membres connectés. Seulement, infobulles et tableaux [ par David_monchy ] Salut à tous,j'ai pris ce script d'infobulle sur le net: function affiche(action,contenu){ var voir; &nb incrementer [ par tonytruand ] bonjour;j'ai un souci d'incrémentation. Dans une function ci dessous, j'aimerai que le i se traduise par 0 puis 1 puis 2 etc.J'ai bien essayer le for Problème idiot : cacher/afficher un div [ par mfaraday ] Bonsoir,Je suis pas sur de poster au bon endroit (comme toujours) et je laisse aux admins la liberté de déplacer le post.Bref... passons aux choses sé Menu [ par flopad ] Bonjour tout le monde!J'ai un menu auquel je souhaite ajouter des rubriques, le problème est que lorsque j'ouvre toutes les rubriques en même temps, c Problème avec REGEX sous IE [ par death83 ] Salut a tous,je suis entrain de faire un petit script qui fonctionne bien sauf sur IE. J'ai une fonction qui permet la génération automatique d'un tex

Livres en rapport

Fireworks MX pour PC/MAC

DocBook. La référence

BusinessObjects 5.1 et WebIntelligence 2.6.

Acrobat Reader

Tous les livres pour Var, Visible, Document, Getelementbyid, Classname

Nos sponsors

Derniers Blogs

JOYEUX ANNIVERSAIRE NIX par ebartsoft

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

Forum

MULTI SLIDER UNE SEUL PAGE par karouani

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Installation et configuration de blogs Wordpress
Budget : 8 500€
Recheche Web Master pour MAJ de plateformes Musical
Budget : 500€
Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP