Sujet Précédent Sujet Suivant

Formulaire dynamique et html pour un submit

spaceboy89 Messages postés 1 Date d'inscription mercredi 2 mars 2005 Statut Membre Dernière intervention 10 mars 2011 - 10 mars 2011 à 09:00
007Julien Messages postés 276 Date d'inscription mercredi 22 septembre 2010 Statut Membre Dernière intervention 8 janvier 2014 - 10 mars 2011 à 21:42

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.

<!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>


<html>
<head>
Demande en ligne


</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>


<form name=\"form1\" method=\"\" action=\"\">
Titre :,
<select name="titre" onChange="afficherTitre()">
<option value="0">Hébergé</option>
<option value="1">Locataire</option>
<option value="2">Propriétaire</option>
</select>,
</form></TD>
</TD>
 Loyer mensuel charges comprises : ,

Valeur du bien : ,

----

Nom :,
,
  Nom de la 2ème personne : ,

----

Prénom :,
,
  Prénom de la 2ème personne : 

</TD>
</TD>

----

Date de naissance :,
,
  Date de naissance de la 2ème personne : 

</TD>
</TD>

----

<form name=\"form2\" method=\"\" action=\"\">
Situation Familiale :,
<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>,
</form>

----

Nombre d'enfants à charge :,
<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>,

----

Adresse email :,
,

----

Ville :,
,

----

Téléphone :,



<TD>------------------------- Revenus -------------------------</TD>



Revenus Mensuels :,
,
  Revenus de la 2ème personne : ,
</TD>

----

Allocations :,


   	
<TD>--------------------- Prêts ---------------------</TD>



<form name=\"form3\" method=\"\" action=\"\">
Nombre de prêts en cours :,
<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>,
</form></TD>
</TD>

----

 Prêt numéro 1 : ,
 Capital restant dû : ,
 Mensualités : ,
Type de prêt :,
<select name="typepret">
<option value="0">Immobilier</option>
<option value="1">Consommation</option>
<option value="2">Revolving</option>
<option value="2">Automobile</option>
</select>,

----

 Prêt numéro 2 : ,
 Capital restant dû : ,
 Mensualités : ,
Type de prêt :,
<select name="typepret">
<option value="0">Immobilier</option>
<option value="1">Consommation</option>
<option value="2">Revolving</option>
<option value="2">Automobile</option>
</select>,

----

 Prêt numéro 3 : ,
 Capital restant dû : ,
 Mensualités : ,
Type de prêt :,
<select name="typepret">
<option value="0">Immobilier</option>
<option value="1">Consommation</option>
<option value="2">Revolving</option>
<option value="2">Automobile</option>
</select>


  
</html>

</html>

A voir également:

Formulaire dynamique javascript
Récupérer données json (javascript) - Conseils pratiques -Javascript
Javascript poo - Conseils pratiques -Javascript
Base de données javascript - Conseils pratiques -Javascript
Créer un formulaire de réservation en ligne - Forum PHP
Template site web dynamique php - Conseils pratiques -PHP

1 réponse

Réponse 1 / 1

007Julien Messages postés 276 Date d'inscription mercredi 22 septembre 2010 Statut Membre Dernière intervention 8 janvier 2014 4
10 mars 2011 à 21:42

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 :

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.

Discussions similaires

Partie entiére d'un nombre

integrer une variable javascript dans un lien hypertext

Remplir un formulaire PDF à partir di'un fichier excel

Formulaire de connexion et d'inscription

est-ce que "goto" existe en javascript ?

Votre réponse

Discussions similaires