Discussion :

[cdossert]

Bonjour,

Je suis en train d'écrire un formulaire (que je souhaite interactif, c'est à dire sans bouton SUBMIT)
Le but étant d'écrire sur la même page ce qui a été choisi.

Exemple :
Grâce à la fonction onchange, il est facile d'écrire sur la page, le contenu du select

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<select name="couleur" id="couleur" onchange="this.form.submit();">
<option value="">Choisissez une couleur</option>
<option value="bleu">bleu</option>
<option value="rouge">rouge</option>
<option value="vert">vert</option>
</select>

et donc plus loin sur la page :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

<? echo $couleur; ?>

Jusque là : pas de soucis !
Là où cela se complique, c'est qu'il me faut un champ texte
et si je fais ceci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
Numéro :
<input name="numero" type="text" id="numero" value="" onchange="this.form.submit();" />

Cela peut en effet marcher, MAIS à la seule condition que l'utilisateur clic sur la page pour que la valeur ci-dessous s'affiche :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

<? echo $numero; ?>

Et donc, ce que j'aimerai bien pouvoir faire :
Quand on écrit dans le champ texte, celà vient écrire automatiquement dans ma variable $numero

J'espère avoir été clair

Merci d'avance !

[Bovino]

Euh... en gros, tu veux qu'à chaque fois qu'on appuie sur une touche, la page se recharge ?
Niveau ergonomie, on a connu mieux !

Autre chose, dans ton premier exemple avec le <select>, on fait comment quand on s'est trompé d'option ?

[le_chomeur]

Tu veux faire communiquer du javascript côté client , avec du php côté serveur sans avoir a recharger la page ?
- si oui je t'orienterais vers de l'ajax, sinon javascript suffira mais il faut que tu explique plus clairement ton besoins

[cdossert]

J'ai dû mal formuler mon problème.... Désolé !!

Bon, je reformule mieux

Si on veut affiche le contenu d'un formulaire sur une même page, on fait ceci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<form id="form1" name="form1" method="post" action="">
<input name="numero" type="text" id="numero" value="" />
<input name="show" type="hidden" id="show" value="VOIR" /> 
<input name="Submit" type="submit" value="Valider" />
</form>

et sous le formulaire apparait :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<?php
if($show == 'VOIR') {
?>
Le numéro choisi est le <? echo $numero; ?>
<?php
}
?>

ce que je voudrais arriver à faire, c'est la même chose, mais cette fois sans le bouton submit

J'espère avoir été plus clair

Merci !!

[le_chomeur]

tu dois bien avoir une interaction entre ton formulaire et ta page php , le submit donc tu veux le faire à quel moment ?????

si c'est en live, pourquoi utiliser du php :-/ ?

tu peux sur du onkeyup, modifier en live une span contenant la saisie de l'utilisateur

[cdossert]

et bien voila !!!

onkeyup me va TRES bien !!

Je te remercie !!

[Bovino]

Si on veut affiche le contenu d'un formulaire sur une même page, on fait ceci

Certainement pas !

A partir du moment où tu fais un submit sur le formulaire (que ce soit avec un bouton ou par script), l'effet est de recharger la page en appelant l'URL indiquée dans l'attribut action de la balise <form>.
Donc techniquement, on peut en effet considérer que si l'URL appelée est la même que celle sur laquelle tu es on est sur la même page, mais pour ton navigateur et pour JavaScript, ce n'est pas le même document ni la même page.
Tu es donc obligé de faire un aller-retour vers le serveur ce qui en local peut s'avérer suffisamment rapide pour que cela ne te gène pas, mais sur un hébergement, ton formulaire sera rapidement pénible à utiliser.

[Watilin]

Bonjour,

Je suis en train d'écrire un formulaire (que je souhaite interactif, c'est à dire sans bouton SUBMIT)

La méthode submit que tu utilises a exactement le même effet qu'un bouton submit : les données sont envoyées au serveur, celui-ci envoie sa réponse, et la page est rechargée. Si j'ai bien compris, tu as retiré le bouton submit pour éviter les rechargements de page… Mais au final tu les as quand même.

Je reviens sur la remarque de Bovino à propos de l'ergonomie : certains utilisateurs apprécient que le formulaire ait un bouton submit même si celui-ci ne fait pas de requête au serveur. En cliquant sur le bouton en bas de la page, on fait une « validation finale » symbolique, et cela nous permet aussi de nous tromper sur les différents champs et d'avoir l'occasion de corriger avant qu'il soit trop tard.

Tu n'es pas forcé de retenir cette solution, mais c'est toujours bon à connaître. Il est possible d'intercepter l'évènement submit d'un formulaire (quel que soit la façon dont il est lancé, par un bouton ou par script quel que soit le bouton qui a été cliqué) avec un gestionnaire d'évènement, et d'empêcher l'envoi des données au serveur (qui est le comportement par défaut) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
document.getElementById("form1").addEventListener("submit", function( event ){
   event.preventDefault(); // empêche l'envoi
 
   // le reste du code ici : lire les valeurs des champs, mettre à jour, etc.
   ...
 
}); // compatible IE9+

Sinon, j'ai tiqué là-dessus :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<select name="couleur" ...>

...

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

<? echo $couleur; ?>

Le fait que la variable $couleur soit définie ne signifie qu'une chose : tu as la directive register_globals activée, et j'en conclus que :

1. Soit tu es toujours à PHP 4.2 qui est une très vieille version ;
2. soit la directive a été réactivée par toi ou quelqu'un d'autre, et j'espère que tu en comprends les risques.

Là où cela se complique, c'est qu'il me faut un champ texte
et si je fais ceci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
Numéro :
<input name="numero" type="text" id="numero" value="" onchange="this.form.submit();" />

Cela peut en effet marcher, MAIS à la seule condition que l'utilisateur clic sur la page

C'est ainsi que fonctionne l'évènement change : quand l'utilisateur tape du texte, le navigateur ne peut pas décider à quel moment l'utilisateur a fini de taper ; il ne peut en être sûr que lorsque l'utilisateur clique en dehors du champ. C'est à ce moment-là que le change est lancé.

Dernière remarque à propos du keyup : il n'est pas lancé si l'utilisateur change la valeur du <select> à la souris. De la même manière, certaines technologies d'accessibilité, comme le clavier virtuel par exemple, permettent de saisir du texte dans un <input> sans lancer d'évènements clavier. En couplant les keyup avec des change qui font la même chose, tu seras sûr de parer à toutes les situations.

[Bovino]

Il est possible d'intercepter l'évènement submit d'un formulaire (quel que soit la façon dont il est lancé, par un bouton ou par script)

Un submit effectué par script ne déclenche pas l'événement submit du formulaire.
http://codepen.io/bovino/pen/rjmcu

[Watilin]

Ah oui en effet. Je raye