[JavaScript] Formulaire Dynamique
Fermé
Aquel
Messages postés
199
Date d'inscription
lundi 28 novembre 2005
Statut
Membre
Dernière intervention
1 octobre 2009
-
14 janv. 2008 à 11:41
guguss - 11 avril 2009 à 01:02
guguss - 11 avril 2009 à 01:02
A voir également:
- [JavaScript] Formulaire Dynamique
- Tableau croisé dynamique - Guide
- Telecharger javascript - Télécharger - Langages
- Liste déroulante dynamique excel - Guide
- Formulaire de réclamation facebook - Guide
- Javascript round ✓ - Forum Javascript
8 réponses
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.
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.
Aquel
Messages postés
199
Date d'inscription
lundi 28 novembre 2005
Statut
Membre
Dernière intervention
1 octobre 2009
10
14 janv. 2008 à 15:31
14 janv. 2008 à 15:31
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).
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).
Aquel
Messages postés
199
Date d'inscription
lundi 28 novembre 2005
Statut
Membre
Dernière intervention
1 octobre 2009
10
14 janv. 2008 à 16:37
14 janv. 2008 à 16:37
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 !!
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 !!
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 ?
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 ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Aquel
Messages postés
199
Date d'inscription
lundi 28 novembre 2005
Statut
Membre
Dernière intervention
1 octobre 2009
10
14 janv. 2008 à 17:51
14 janv. 2008 à 17:51
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>
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>
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...
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...
Aquel
Messages postés
199
Date d'inscription
lundi 28 novembre 2005
Statut
Membre
Dernière intervention
1 octobre 2009
10
16 janv. 2008 à 16:47
16 janv. 2008 à 16:47
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+
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+
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
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
23 mai 2008 à 16:34
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)