Formulaire Ajax

Résolu
cs_bibo06 Messages postés 116 Date d'inscription mardi 28 novembre 2006 Statut Membre Dernière intervention 10 mars 2009 - 31 mars 2008 à 10:59
cs_bibo06 Messages postés 116 Date d'inscription mardi 28 novembre 2006 Statut Membre Dernière intervention 10 mars 2009 - 9 avril 2008 à 17:32
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

cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
1 avril 2008 à 16:34
function creat_form(num) {
 var d=document.createElement("div");
 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);
  }
 }

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
0
cs_bibo06 Messages postés 116 Date d'inscription mardi 28 novembre 2006 Statut Membre Dernière intervention 10 mars 2009
1 avril 2008 à 16:44
Vraiment géniale :-) je pensais pas que le
s'ecrivait comme ca en javascript merci beaucoup.

Pour m'affiche pas une nouvelle serie si on on change de chiffre il faudrais que je supprime se que le javascript vient de faire,
mais ca devient un peu délicat non?
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
1 avril 2008 à 16:50
>>mais ca devient un peu délicat non?
    bof... regarde deleteChild par exemple.
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
0
cs_bibo06 Messages postés 116 Date d'inscription mardi 28 novembre 2006 Statut Membre Dernière intervention 10 mars 2009
1 avril 2008 à 17:09
ok donc d'après se que je lis, removeChild() permet donc d'effacer les noeuds.

Je viens d'essayer ca :

function creat_form(num) {
 var d=document.createElement("div");
 var e,f;
 for (i=0; i<num; i++)
  {
   if(document.form1.nom+i){
     d.removeChild(e);
  d.removeChild(f);
   }
   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);
  }
 }

je doute que se j'ai mis pour if soit correct...
En tout cas ca me l'enleve pas les anciens
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
cs_bibo06 Messages postés 116 Date d'inscription mardi 28 novembre 2006 Statut Membre Dernière intervention 10 mars 2009
1 avril 2008 à 17:11
Ou alors il faut que je donne un id a la div se serai plus simple non?
0
cs_bibo06 Messages postés 116 Date d'inscription mardi 28 novembre 2006 Statut Membre Dernière intervention 10 mars 2009
1 avril 2008 à 17:14
Humm pas loin lol j'ai fais ca:

function creat_form(num) {
 if(document.getElementById('resultat')){
     d.removeChild(e);
  d.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);
  }
 }

La il m'affiche bien le nombre d'input que je demande mais si je change de chiffre il rajoute rien et n'enleve rien
0
cs_bibo06 Messages postés 116 Date d'inscription mardi 28 novembre 2006 Statut Membre Dernière intervention 10 mars 2009
1 avril 2008 à 17:57
Non je dois mal placer le removeChild, ca veux pas.
Pourtant il verifie si il existe et si oui il enleve les variable e et f quicorrespondent au champs text et br non???
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
2 avril 2008 à 09:48
houla... oui, removeChild et nons pas "deleteChild" !
et passer par un ID est une solution.   nickel si ça baigne.
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
0
cs_bibo06 Messages postés 116 Date d'inscription mardi 28 novembre 2006 Statut Membre Dernière intervention 10 mars 2009
8 avril 2008 à 12:19
Bultez j'aurai une dernière question, j'essai d'afficher du text simple juste avant un champ du genre "Type de sol:".
J'ai essayer avec "document.write" mais i lm'affiche le text et plus les champs comment ca se fait??

J'ai fait ca:

function creat_form(num) {
 if(d=document.getElementById('resultat')){
     d.parentNode.removeChild(d);
   }
 var d=document.createElement("div");
 d.id="resultat";
 var e,f,g;
 for (i=0; i<num; i++)
  {
   e=document.createElement("input");
   e.type="text";
   e.name="nom"+i;
   d.appendChild(e);
   var g=document.write("text javascript
");
   d.appendChild(g);
   var f=document.createElement("br");
   d.appendChild(f);
   document.form1.appendChild(d);
  }
 }
0
cs_bibo06 Messages postés 116 Date d'inscription mardi 28 novembre 2006 Statut Membre Dernière intervention 10 mars 2009
8 avril 2008 à 12:22
J'ai essayer pas mal de truc mais le text sort toujours seul...
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
8 avril 2008 à 12:50
>>J'ai essayer avec "document.write" mais il m'affiche le text et plus les champs comment ca se fait??
    ah ben... document.write commence par effacer la page, toute la page, y compris le javascript...
    donc... createElement+appendChild...   non ?
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
0
cs_bibo06 Messages postés 116 Date d'inscription mardi 28 novembre 2006 Statut Membre Dernière intervention 10 mars 2009
8 avril 2008 à 15:21
Ok pour le creatElement quelle est la syntaxe qu'il faut mettre entre les parenthèses??

var g=document.createElement("text javascript
");
   d.appendChild(g);

Ca m'etonne.
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
8 avril 2008 à 15:30
>>var g=document.createElement("text javascript
");
 >>d.appendChild(g);
Ca m'etonne pas... ça ne doit pas marcher : pas la bonne syntaxe !
       qu'as-tu fais pour les autres createElement ?
       document.createElement("input");    par exemple
                et non pas document.createElement("");  ou je ne sais quoi...
    createElement de H1
    ajout du texte avec innerHTML
    appendChild
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
0
cs_bibo06 Messages postés 116 Date d'inscription mardi 28 novembre 2006 Statut Membre Dernière intervention 10 mars 2009
8 avril 2008 à 16:00
Je viens d'essayer ca:
g=document.creatELement("H1");
   g.document.innerHTML="text javascript";
   d.appendChild(g);

Se n'est pas juste vu que rien ne s'affiche mais je suis pas loin non?
Je pense que mon problème est dans

g.document.innerHTML="text javascript";

Pourtant j'ai crée les balise H1 et dans le h1 je fais mon innerHTML non?
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
8 avril 2008 à 16:32
g.document.innerHTML="text javascript";
    document n'est pas correct ici...   ça devrait d'ailleurs te sortir une erreur ?
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
0
cs_bibo06 Messages postés 116 Date d'inscription mardi 28 novembre 2006 Statut Membre Dernière intervention 10 mars 2009
8 avril 2008 à 16:57
Ok j'ai comment ca fonctionne  merci encore bultez
0
cs_bibo06 Messages postés 116 Date d'inscription mardi 28 novembre 2006 Statut Membre Dernière intervention 10 mars 2009
9 avril 2008 à 11:05
 euu juste un ti renseignement Bultez, je n'ai pas fais attention hier j'ai reussi à placer du texte juste avant un champ mais les ne se repetaient plus.
J'ai fais ca:

function creat_form(num) {
 if(d=document.getElementById('resultat')){
     d.parentNode.removeChild(d);
   }
 var d=document.createElement("div");
 d.id="resultat";
 var e,f;
 for (i=0; i<num; i++)
  {
   d.innerHTML="exemple";
   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);
  }
 }

le innerHTML je l'ai mis avec la div, mon souci est ici j'en suis sur, vu qu'une div est crée, il ne crée qu'un champ.
Mais comment écrire à chaque fois devant un champ??
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
9 avril 2008 à 11:25
>>d.innerHTML= "exemple";
    tu écrases le contenu.   ===> d.innerHTML += "exemple";

tu abandonnes le createElement+appendChild ?
    curieux de mélanger les 2.. non ?

fais tout avec innerHTML ou tout avec createElement+appendChild,   tu ne crois pas ?
    car innerHTML ="
..."; ça baigne aussi
       la seule restriction c'est : si on ajoute de nombreuses fois, à de l'existant,
       les performances peuvent se dégrader. pas avec createElement+appendChild

enfin... je dis ça.... je dis rien.
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
0
cs_bibo06 Messages postés 116 Date d'inscription mardi 28 novembre 2006 Statut Membre Dernière intervention 10 mars 2009
9 avril 2008 à 11:29
Oui effectivement je vais essayer avec tout en innerHTML.
Enfin je vais voir laquelle des solution est plus simple  merci pour l'info.
C'est cool d'avoir quelqu'un qui fournit de l'aide, j'ai un autre site à faire en php et la j'ai beau essayer 5-6 forum je n'ai pas trouvé quelqu'un pour solutionné mon problème je suis desespéré...
0
cs_bibo06 Messages postés 116 Date d'inscription mardi 28 novembre 2006 Statut Membre Dernière intervention 10 mars 2009
9 avril 2008 à 11:39
j'ai essayer juste avec le innerHTML ca me parait plus simple mais...erreur firefow me dit "creat_form non definie

j'ai fait ca:
function creat_form(num) {
 if(d=document.getElementById('resultat')){
     d.parentNode.removeChild(d);
   }
 var d=document.createElement("div");
 d.id="resultat";
 var e,f;
 for (i=0; i<num; i++)
  {
   d.innerHTML +="exemple
";
  }
 }
0
Rejoignez-nous