High-Tech Santé Médecine Droit-Finances

Grippe A

Que dois-je faire ?

Rechercher : dans
Par :

[JavaScript] Formulaire Dynamique

Dernière réponse le 11 avr 2009 à 01:02:47 Aquel, le 14 jan 2008 à 11:41:50 
 Signaler ce message aux modérateurs

Bonjour à tous,

J'ai un problème avec la réalisation d'un formulaire dynamique. Mon souhait était de faire apparaitre suite au clic dans un menu déroulant, le formulaire correspondant. J'aimerais le faire en javascript pour ne pas avoir à recharger la page. Le problème est que je ne trouve pas la marche à suivre. J'imagine qu'il faux utiliser l'attribut onClick dans le menu déroulant et une fonction javascriptdans le header.

Si quelqu'un avait un lien résumant un peu une situation similaire (n'aillant pas de script à proposer), je lui en serais reconnaissant.

Merci !!!

Configuration: Windows XP
Internet Explorer 6.0

Posez votre question Répondre

1

Alain42, le 14 jan 2008 à 12:51:53

Bonjour,

Le script Javascript ne se met pas dans le header, mais entre les balises <head> </head> (mais ce n'est pas obligatoire)


dans la balise <select name="liste1" id="liste1" ..... de ta liste déroulante, tu mets onChange="ta_fonction_js();"

dans ta_fonction_js tu mets

valeur_select=document.getElementById('liste1').value; // ça va lire l'option qui a été selectionnée

et ensuite par
document.getElementById('champ1').value="la_valeur_a_ecrire"; //va ecrire dans le champ 1

qui est <imput type="text" name="champ1" id="champ1">

Mais si la_valeur_a_ecrire doit être lue dans une base de données, il faut que tu passes par AJAX.

Vas voir dans un moteur de recherche comment proceder.

   
Répondre à Alain42

8

colo, le 23 mai 2008 à 16:34:32

Bonjour, au fait je suis entrain de faire un exercice pareil, et j'aimerais que vous m donner s'il vous plait de l'aide.

J'ai realisé le foormulaire entierement avec le DOM.
le probleme que j'ai c'est au niveau de l'option.

Je dois recupere mes donnees dans ma base de données

le code est le suivant

var form = document.createElement('form');
form.id = "formu";
var select = document.createElement('select');
select.id = "liste_cat";
select.name ="liste_cat";
var opt = document.createElement('option');
opt.setAttribute('value','id1');
var val_selec = document.getElementById("liste_cat");
val_selec.appendChild(form);
form.appendChild(select);
select.appendChild(opt)

   
Répondre à colo

2

Aquel, le 14 jan 2008 à 15:31:35

Merci pour tes conseils.

Pour moi le header, ça voulait bien dire entre les balises <head> et </head>. Apparement non lol. ça commence mal pour moi :)

j'ai un peu de mal à comprendre l'utilisation d'un name et d'un id en même temps. Pour moi c'était ou l'un ou l'autre. il va maintenant falloir que je trouve comment afficher mon formulaire depuis la fonction Javascript et surtout lui dire où l'afficher sur la page.

Pour les recherches sur internet, c'est justement après avoir cherché plus d'une heure sur Google que je me suis permis de poster ici (oui je sais, je suis un piètre chercheur lol).

   
Répondre à Aquel

3

Aquel, le 14 jan 2008 à 16:37:07

Je viens de réaliser que ton exemple me montre comment remplir des champs déjà existants alors que je souhaitais créer des champs en fonction du choix dans le menu déroulant.

Exemple :

un menu déroulant avec 2 options : Vin - Bière
Lorsque je clique sur Vin, un autre menu déroulant vien se mettre à coté avec d'autre options (exemple : Rouge ou Blanc).

Je pense avoir été plus clair là.

Cependant, ton message m'a bien aidé pour d'autres choses.

Merci beaucoup !!

   
Répondre à Aquel

4

Alain42, le 14 jan 2008 à 16:55:06
  • +1

Attention, la c'est plus compliqué !

les valeurs de ta deuxième liste sont prises ou ?
dans une base de données en fonction du choix dans la première ?

Dans ce cas il te faut soit

- utiliser le php et accepter de recharger la page

- utiliser Ajax qui appelle un script php de lecture dans la bdd en fonction du choix première liste (valeur envoyée en data) et qui vient "écrire" dans un div le code de la deuxième liste.

Je ne comprend pas un précédent post a disparu ?

   
Répondre à Alain42

5

Aquel, le 14 jan 2008 à 17:51:42

Mes pages sont dévelopées en ASP JScript. Cela peut poser un problème pour utiliser de l'AJAX?
En fait mon but était plutôt de charger tous les formulaires à l'avance et les afficher ou non.

Je viens en partit de résoudre mon problème grâce à l'attribut 'Hidden' ou 'Visible'.
Le problème est qu'il y a encore 1 ou 2 seconde avant que tous les champs ne se cachent.
Je te donnes ma fonction Javascript qui n'est pas très pro. C'est de la grosse bicole :)

function affiche_menu()
{
valeur_select = document.getElementById('choix_recherche').value;
if (valeur_select == "etablissement")
{
document.recherche_avancee.activite.style.visibility = 'visible';
document.recherche_avancee.localisation.style.visibility = 'visible';
document.recherche_avancee.administratif.style.visibility = 'hidden';
document.recherche_avancee.technique.style.visibility = 'hidden';
document.recherche_avancee.actionnaire.style.visibility = 'hidden';
}
if (valeur_select == "general")
{
document.recherche_avancee.activite.style.visibility = 'hidden';
document.recherche_avancee.localisation.style.visibility = 'hidden';
document.recherche_avancee.administratif.style.visibility = 'hidden';
document.recherche_avancee.technique.style.visibility = 'hidden';
document.recherche_avancee.actionnaire.style.visibility = 'hidden';
}
if (valeur_select == "societe")
{
document.recherche_avancee.activite.style.visibility = 'hidden';
document.recherche_avancee.localisation.style.visibility = 'hidden';
document.recherche_avancee.administratif.style.visibility = 'visible';
document.recherche_avancee.technique.style.visibility = 'visible';
document.recherche_avancee.actionnaire.style.visibility = 'visible';
}
if (valeur_select == "personne")
{
document.recherche_avancee.activite.style.visibility = 'hidden';
document.recherche_avancee.localisation.style.visibility = 'hidden';
document.recherche_avancee.administratif.style.visibility = 'hidden';
document.recherche_avancee.technique.style.visibility = 'hidden';
document.recherche_avancee.actionnaire.style.visibility = 'hidden';
}
}

Ensuite je mets une autre fonction pour tout cacher lorsque je charge ma page. C'est là que je trouve ça un peu long avant de disparaitre :

function cacher_champs()
{
document.recherche_avancee.activite.style.visibility = 'hidden';
document.recherche_avancee.localisation.style.visibility = 'hidden';
document.recherche_avancee.administratif.style.visibility = 'hidden';
document.recherche_avancee.technique.style.visibility = 'hidden';
document.recherche_avancee.actionnaire.style.visibility = 'hidden';
}

<body onload="cacher_champs();">
<!---MON FORMULAIRE--->
</body>

   
Répondre à Aquel

6

Alain42, le 15 jan 2008 à 12:53:42

Bonjour,

tel que tu fais, tes formulaires ne sont pas liés entre eux, c' est à dire que le contenu de ta deuxième liste n'est pas liée au choix dans la première.

Par ex liste1= departements

liste2= villes dans ce départ

donc comme tu fais c'est bon.

mais si elles sont liées tu peux passer par Ajax, même avec ASP

En fait Ajax est une fonctionnalité de javascript.

au choix liste1 par onChange= tu appelles la fonction Ajax/javascript qui appelle le script php ou asp en lui passant des données (le choix liste1)

ce script recherche dans la BDD les valeurs a afficher dans liste 2 en fonction choix liste1, génére la partie HTML liste 2 et renvoie tout ça

A la réception dans le navigateur, le script javascript "écrit " la liste 2 dans la page (par innerHTML)

etc...

   
Répondre à Alain42

7

Aquel, le 16 jan 2008 à 16:47:14

Bonjour et encore merci pour l'attention que tu portes au sujet !

Il est clair que comme tu dits, l'utilisation d'AJAX n'est pas nécessaire dans ce cas.
Cependant, tu me mets sur la bonne piste pour la suite car je vais devoir faire une liste avec les départements (91,92,93,...) qui découle sur une autre liste détaillée (91000,91200,91300,.....).

Je fouille ça et mettrais le script sur ce post (si j'y arrive lol parcequ'AJAX n'a pas l'air d'être une partie de plaisir).

A+

   
Répondre à Aquel

9

 guguss, le 11 avr 2009 à 01:02:47

Bonjour,
Nom formulaire et champs variable...

Je voudrais savoir comment faire pour récupérer la valeur d'un champs don't le nom du formulaire est une variable
Normalement: document.formulaire.champs.value;
Ce que je veux : document.VARIABLE.VARIABLE.value;
Une exemple:
function erreur(champs,formulaire){

if (document..formulaire.champs.value == "") alert("champs vide");

}
ça marche pas comme ça...
Merci pour votre aide

   
Répondre à guguss
Posez votre question Répondre
Ils ont besoin de votre aide