Re: [LA-discussions] formulaire virtuel en JS

[KewlCat <kewlcat@xxxxxxx>]

Daniel Cartron wrote:
> Bon alors j'explique tout : comme quasiment toutes les pages de mon site vont
> avoir la mm gueule à part un nombre d'articles différent, j'ai envie de faire
> une seule page qui s'appelle toute seule et se modifie en fonction des options
> de menu cliquées, à savoir catégorie et sous-catégorie d'articles.

Un peu comme les systèmes de frameset/frames qu'on avait en HTML3 ? Les 
menu et habillage ne bougent pas, et le contenu est rechargé depuis le 
serveur en fonction des actions sur les menus...
OK

> Ces options sont enregistrées dans deux variables categ et souscateg,
> lesquelles sont modifiées par un evénement onclick en JS et ensuite il y a un
> script php qui va récupérer les bons fichiers php correspondant aux articles
> et qui finit de construire la page. Pour l'instant ma méthode est encore pas
> mal bourrin car j'avais jamais encore essayé de passer des variables de JS à
> php et inversement.

L'utilisation d'un formulaire n'est vraiment nécessaire que lorsque l'on 
fait des requêtes POST. Pour du GET tu peux passer ces paramètres dans 
l'URL et ainsi éviter de construire un formulaire, ou de lui coller 
plein de champs cachés. Tu obtiendras le même résultat. Mais j'ai un 
doute sur une telle utilisation d'un formulaire. cf. plus bas

> Et c'est pour passer les variables à php que j'ai besoin
> de cet envoi de formulaire, d'après ce que j'ai compris de mes lectures sur le
> web. Donc la méthode m'est un peu égal, il faut juste que le script JS appelé
> par onclick mette les bonnes valeurs dans les input (ça on peut le faire avec
> document.getElementById) et envoie le formulaire, qui bien évidemment doit
> être caché, et là je ne pige pas bien la syntaxe de la méthode submit()...

A partir du moment où tu disposes d'une référence à ton formulaire via 
document.getElementById("idDeTonForm") ou via 
document.createElement("form"), tu peux appeler la méthode submit() de 
cet élément.
Exemple :
var monForm = document.getElementById("idDeTonForm");
// .. remplissage des champs ..
monForm.submit();

> Voilà toute l'histoire... Maintenant je suis sûr que plein de gens vont me
> dire qu'il faut pas faire comme ça pour tout un tas de bonnes raisons mais
> tant pis c'est comme ça que j'ai envie de faire :-)

Y'a sûrement tout un tas de "bonnes" raisons de te dissuader de passer 
par cette solution, mais le gros souci que je vois, c'est que si tu 
soumets un formulaire dans ta page, le navigateur va recharger 
l'intégralité du contenu dans l'onglet courant. Donc si ce qui est 
retourné par la cible de ton formulaire (l'URL que tu mets dans 
l'attribut "action") n'est que du contenu partiel, tu vas perdre ton 
menu et ton habillage...

A priori, ce que tu cherches à faire s'apparente plus à de la 
récupération de ton contenu distant (fourni par ton script PHP) en JS 
pour l'injecter à la place du contenu actuel. Ca se fait en AJAX et ça 
ne nécessite pas de recharger la page. Pas besoin de formulaire non plus.
Après, y'a plein de manières différentes de faire des appels AJAX en 
utilisant soit du JS pur soit des frameworks JS pour masquer la 
complexité du truc, et là il est trop tard pour que je me lance dans des 
explications sur les objets XMLHttpRequest. Du moins, pas tant que je ne 
suis pas certain qu'on est d'accord sur le fonctionnement que tu veux 
obtenir de ton site :-p

En attendant, rien ne t'empêche de voir comment on crée / remplit / 
soumet un formulaire en JavaScript. C'est toujours bon de savoir 
manipuler des objets en JavaScript ;-)

 =^.^=

--
Liste de discussions de LinuxArverne
http://wiki.linuxarverne.org/listes_de_diffusion