Formulaire Ajax

Résolu
Signaler
Messages postés
116
Date d'inscription
mardi 28 novembre 2006
Statut
Membre
Dernière intervention
10 mars 2009
-
Messages postés
116
Date d'inscription
mardi 28 novembre 2006
Statut
Membre
Dernière intervention
10 mars 2009
-
Bonjour, je n'ai jamais fais de script Ajax encore, mais j'ai besoin d'un formulaire interactif un peu spéciale.
J'ai fait quelque recherche sur divers forum mais je n'ai pas trouvé d'infos sur se que je veux faire.

Voila j'ai un formulaire à faire pour une gestion immobilière, et à un endroit j'ai besoin de donner des infos sur les pièces d'un logement.
Par exemple dans une maison, j'ai 3 chambres, la 1er à du carrelage fais 14m² et à 2 fenêtres. La 2ème a du parquet fait 12m² et à 1 fenêtre.

J'aurai voulu mettre un <select> qui permet de choisir mon type de pièce, remplir le nombre de pièces de se type à coté dans un et que par rapport au chiffre rentré il me sorte un questionnaire pour chaque pièce, comme ce résultat:
<tr>
          <td colspan="13">              ----

                      <table border="0" cellpadding="0" cellspacing="0">
                    ----

                     , Choix des pièces :</td>
                   
                 

    </td>
              </tr>
     <tr>
    <td height="5"></td>
     </tr>
              <tr>
                <td colspan="13">                    ----

                      ,
                      <select name="type_piece">
                    <option selected="selected" value="0">Selectionnez</option>
                    <option value="chambre">chambre</option>
                    <option value="cuisine">cuisine</option>
                    <option value="salle à manger">salle à manger</option>
                    <option value="entrée">entrée</option>
                    <option value="salle de bain">salle de bain</option>
                    <option value="salon">salon</option>
                  </select>,
                   
                    ----

                      ,
                   
               
</td>
              </tr>
              <tr>
                <td width="200"></td>
                <td width="130" class="text" align="right">Quantité :</td>
                <td width="10"></td>
                <td align="left"></td>
              </tr>
              <tr>
                 <td height="10"></td>
              </tr>
              <tr>
                 <td class="text">chambre1</td>
              <tr>
                <td width="200"></td>
                <td width="130" class="text" align="right">Niveau :</td>
                <td width="10"></td>
                <td align="left"></td>
              </tr>
              <tr>
                <td width="200"></td>
                <td width="130" class="text" align="right">Surface :</td>
                <td width="10"></td>
                <td align="left"></td>
              </tr>
              <tr>
                <td width="200"></td>
                <td width="130" class="text" align="right">Revêtement de sol :</td>
                <td width="10"></td>
                <td align="left"></td>
              </tr>
              <tr>
                <td width="200"></td>
                <td width="130" class="text" align="right">Exposition :</td>
                <td width="10"></td>
                <td align="left"><select name="entree_exposition">
                    <option selected="selected" value="0">Selectionnez</option>
                    <option value="Nord">Nord</option>
                    <option value="Nord-Est">Nord-Est</option>
                    <option value="Est">Est</option>
                    <option value="Sud-Est">Sud-Est</option>
                    <option value="Sud">Sud</option>
                    <option value="Sud-Ouest">Sud-Ouest</option>
                    <option value="Ouest">Ouest</option>
                    <option value="Nord-Ouest">Nord-Ouest</option>
                  </select></td>
              </tr>
              <tr>
                 <td height="10"></td>
              </tr>
              <tr>
                 <td class="text">chambre2</td>
              <tr>
                <td width="200"></td>
                <td width="130" class="text" align="right">Niveau :</td>
                <td width="10"></td>
                <td align="left"></td>
              </tr>
              <tr>
                <td width="200"></td>
                <td width="130" class="text" align="right">Surface :</td>
                <td width="10"></td>
                <td align="left"></td>
              </tr>
              <tr>
                <td width="200"></td>
                <td width="130" class="text" align="right">Revêtement de sol :</td>
                <td width="10"></td>
                <td align="left"></td>
              </tr>
              <tr>
                <td width="200"></td>
                <td width="130" class="text" align="right">Exposition :</td>
                <td width="10"></td>
                <td align="left"><select name="entree_exposition">
                    <option selected="selected" value="0">Selectionnez</option>
                    <option value="Nord">Nord</option>
                    <option value="Nord-Est">Nord-Est</option>
                    <option value="Est">Est</option>
                    <option value="Sud-Est">Sud-Est</option>
                    <option value="Sud">Sud</option>
                    <option value="Sud-Ouest">Sud-Ouest</option>
                    <option value="Ouest">Ouest</option>
                    <option value="Nord-Ouest">Nord-Ouest</option>
                  </select></td>
              </tr>

Ici on aurait rentré 2 dans la quantité de pièce type chambre.

Donc déjà est-ce faisable?? Et si oui comment je peux faire ca??

48 réponses

Messages postés
116
Date d'inscription
mardi 28 novembre 2006
Statut
Membre
Dernière intervention
10 mars 2009

J'ai trouvé :)

function creat_form(num) {
 if(f=document.getElementById('resultat')){
     f.parentNode.removeChild(f);
   }
 var d=document.createElement("div");
 d.id="resultat";
 var e,f;
 for (i=0; i<num; i++)
  {
   e=document.createElement("input");
   e.type="text";
   e.name="nom"+i;
   d.appendChild(e);
   var f=document.createElement("br");
   d.appendChild(f);
   document.form1.appendChild(d);
  }
 }

Merci pour ton aide bultez, je pense pouvoir l'adapter a mon code maintenant
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
en  reprenant ton script "presque" initial

 var d=document.createElement("div");
 for (i=0; i<num; i++) {
  var e=document.createElement("input");
  e.type="text";
  e.name="nom"+i;
  e.value=i;
  d.appendChild(e);
  var f=document.createElement("h1");
  f.innerHTML="exemple";
  d.appendChild(f);
  document.form1.appendChild(d);

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
Bonjour,

>>Donc déjà est-ce faisable??
    oui
>>Et si oui comment je peux faire ca??
    ce que tu veux c'est ajouter au formualire existant
       une zone contenants plusieurs champs de saisie...

    ajax n'est même pas obligatoire....
       "il suffit" en javascript d'ajouter un div ( par exemple )
          qui contienne ces champs de saisie
          ( ajout avec innerHTML ou createElement+appendChild )

    avec ajax, on appelerait un script sur le serveur, qui
          retournerait ce div, charge au javascript de l'insérer là où il faut.

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
116
Date d'inscription
mardi 28 novembre 2006
Statut
Membre
Dernière intervention
10 mars 2009

Le truc, c'est qu'i ldoit me sortir autant de formulaire que le chiffre rentré dans le champs.


Si j'ai mis qu'il y avait 5 chambre, il doit me sortir automatiquement 5 formulaire: chmabre1, chambre2, chambre3...


C'est faisable juste avec du javascript??
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
>>C'est faisable juste avec du javascript??
    ben oui...
    si tu sais en ajouter un, tu peux en ajouter 2, et même autant que demandé
    ( à priori ... une ch'tite boucle ? )
    >> doit me sortir automatiquement 5 formulaire
    mais à priori, pas 5 formualires  :   ajout au formulaire existant.
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
116
Date d'inscription
mardi 28 novembre 2006
Statut
Membre
Dernière intervention
10 mars 2009

Ok je te remerci je vais essayer de me renseigner comment faire ca.
Un tuto sur les formulaire interactif devrait m'aider je pense.
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
pour innerHTML : document.formulaire.innetHTML+="ce qur tu veux, donc balises html...";
pour createElement+appendChild : ici par exemple
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
"il suffit" de ne pas oublier que l'utilisateur peut revenir sur son choix du nombre de pièces....
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
116
Date d'inscription
mardi 28 novembre 2006
Statut
Membre
Dernière intervention
10 mars 2009

Je n'arrive pas très bien à comprendre la fonction appendChild, pourrais-tu m'expliquer?
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
tu as un exemple d'utilisation dans UMP,
et une explication dans selfHTML ici
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
116
Date d'inscription
mardi 28 novembre 2006
Statut
Membre
Dernière intervention
10 mars 2009

Ok je pense avoir compris.
j'ai fait cette page pour un test :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML Lang="fr">
<HEAD>
<meta http-equiv="content-Language" content="fr-FR">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<TITLE>test-form</TITLE>
<Script Type="Text/JavaScript">
function creat_form(num) {
 var d=document.createElement("div");
 for (i=0, i<quantite, i++) {
  var e=document.createElement("input"); 
  e.type="text";
  e.name=nom+quantite;
  d.appendChild(e);
  }
 }
 </Script>
</HEAD>

 <form name="form1" enctype="multipart/form-data" method="POST" >
  

 </form>

</html>


Comment je peux lui dire que lorsque j'ai rempli le champ il execute le script??
J'ai essayer le onclick mais rien ne se passe...
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
le script.... faut lui dire qu'il existe...
    perso ( on peut faire autrement ) j'userais de
    élément qu'on vient de créer.onclick=function()   {   du javascript, appel fonctions ou autres ... }
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
116
Date d'inscription
mardi 28 novembre 2006
Statut
Membre
Dernière intervention
10 mars 2009

c'est à dire?? il faut bien que j'appel ma fonction avec le champ text qui informe combien de fois il faut que je crée de nouveaux champs non?
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
je ne comprend pas ce que tu ne comprends pas...
tu crées, en dynamique, un champ texte + un bouton...
    sur ce bouton, que tu viens de créer, ajoute un onclick.
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
116
Date d'inscription
mardi 28 novembre 2006
Statut
Membre
Dernière intervention
10 mars 2009

ok je viens de comprendre, je test
Messages postés
116
Date d'inscription
mardi 28 novembre 2006
Statut
Membre
Dernière intervention
10 mars 2009

Bon j'ai essayer en corrigeant mon code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML Lang="fr">
<HEAD>
<meta http-equiv="content-Language" content="fr-FR">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<TITLE>test-form</TITLE>
<Script Type="Text/JavaScript">
function creat_form(num) {
 var d=document.createElement("div");
 for (i=0; i<num; i++) {
  var e=document.createElement("input"); 
  e.type="text";
  e.name="nom"+i;
  d.appendChild(e);
  }
 }
 </Script>
</HEAD>

 <form name="form1" enctype="multipart/form-data" method="POST" >
  

  
 </form>

</html>


Normalement lorsque je vais cliquer sur le bouton qu iexiste sur la page ca va verifier le numéro rentré et m'afficher des input non??

Désolé d'être lourd mais je suis vraiment novice en javascript et j'essai de comprendre, merci de ta patience en tout cas.
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
tu ajoutes bien les éléments au div ( enfin, uniquement un input text ),
mais tu n'ajoutes pas le div au formulaire...
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
116
Date d'inscription
mardi 28 novembre 2006
Statut
Membre
Dernière intervention
10 mars 2009

Je viens de corrigé le problème et je commence à avoir des résultats :)
Est ce je peux ajouter de la même manière du texte, et comment je peux mettre un
??

De plus j'ai pensé à faire en sorte que si la personne change le chiffre pour en retiré un ou en rajouter, mais comment je peux faire sachant sachant que en ce moment, si on mets en 1er par exemple 4 que l'on clique sur le bouton puis que l'on remplace le chiffre par 6, il va me mettre 10 input en tout il me supprime pas les 4 1ers.
Messages postés
116
Date d'inscription
mardi 28 novembre 2006
Statut
Membre
Dernière intervention
10 mars 2009

Au fait voici mon code modifié:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML Lang="fr">
<HEAD>
<meta http-equiv="content-Language" content="fr-FR">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<TITLE>test-form</TITLE>
<Script Type="Text/JavaScript">
function creat_form(num) {
 var d=document.createElement("div");
 for (i=0; i<num; i++) {
  var e=document.createElement("input"); 
  e.type="text";
  e.name="nom"+i;
  d.appendChild(e);
  
  document.form1.appendChild(d);
  }
 }
 </Script>
</HEAD>

 <form name="form1" enctype="multipart/form-data" method="POST" >
  

  
 </form>

</html>
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
>>comment je peux mettre un
??
createElement ( de "BR") et appendChild ?
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]