Vider les champs d'un formulaire

Dans la mesure où le code HTML donné dans les premiers messages ne correspond pas à celui montré dans les codes plus complets (enfin...) et qu'elle précise avoir plusieurs formulaires dont certains pour lesquels ça semble fonctionner correctement, on est en droit (parce que ça arrive très souvent) de se dire que ce sont les codes ultérieurs qui sont ceux à regarder.

Néanmoins, il y a quand même un détail qui nous a échappé (et vu comment le code est formaté, c'est pas très étonnant), en reformatant, tout devient un peu plus clair :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

<form> ... <select id='TYPE_MSG' name='TYPE_MSG' onchange='submit()'> <option value='LST'>LST</option> <option value='MSG'>MSG</option> </select><br><br/> La valeur que vous avez sélectionné est : <br/><br/> <br/> <center><input id='Submit' type='Submit' name='valid' value='Sauvegarder' style='widht=100px'></center><br/> </form> <form method='post' id='reset' action='menuReemission.php'> <center><input id='reset' type='Submit' name='reset' value='Reinitialiser' style='widht=100px'></center> </form>

---

Comment dire... lol ? :roll:

cqfd balises mal balancées + le mauvais bouton de mauvais type + dans le mauvais form ...
et après on s'étonne du mauvais comportement ?

Au cas où ça ne serait pas clair pour cahuet, le problème est que ce formulaire est coupé en deux ! Il y a deux balises <form>. Le bouton reset fonctionne bien comme il devrait, mais ne réinitialise les champs que de son bout de formulaire... autrement dit rien du tout ici.

:D je ne comprends absolument rien !
@Bovino: Je sèche lamentablement ... Je vois deux formulaires, la solution qu'elle a choisit mais à part ça ???
@SpaceFrog: Quelles balises mal balancées ? Quel mauvais type ? Parce que le bouton s'appelle 'reset' mais qu'il est de type 'submit' ? Le nom est parfait fonctionnellement, elle réinitialise son formulaire en le soumettant sans les contrôles. Je ne sais pas si c'est la bonne méthode mais elle fonctionne. Elle aurait mettre le bouton id='reset' type='submit' directement dans son premier formulaire et tester la valeur du bouton déclenché pour réinitialiser ou non son formulaire mais est-ce une meilleure méthode ?

Dans son code PHP, on voit que la page s'enrichit au fur et à mesure des réponses, et donc qu'elle fait des aller-retour entre le navigateur et son serveur avec sa fonction 'submit()' sur les 'onchange' des controles. Un bouton 'reset' standard ne lui apporterait rien, puisque la page revient modifiée dans son source.

Elle est obligé de repasser par son code PHP pour réinitialiser sa page.

Bon vu qu'il faut t'expliquer longtemps ...

voici un exemple plus parlant qui reprend son erreur
http://jsfiddle.net/t1Lm8ed1/2/

dans le premier form le bouton reste est bien DANS le form et à donc comme portée les champs de ce même form

pour le "second" ( et le troisième) from ben la portée du bouton reset (pour autant qu'il soit bien de type reste et pas submit ...) est limitée au form auquel il appartient ... donc portée nulle, il ne vide pas les champs du form précédent ...


Je réitère donc avec d'autant plus de sérénité :

Citation:

---

Simple !
T'arranger pour avoir un code HTML correctement structuré avec des balises propres et bien balancées, utilisées à bon escient sans doublons dans les id ...
ce n'est qu'avec un code html correctement structuré que les éléments ne se marcheront pas sur les pieds les uns des autres et se comporteront normalement.

---

Pas sur que ça serve à quelque chose que j'écrive ou alors j'écris comme pied, mais bon je retente le coup :

Elle génère sa page en à partir de son code PHP,
L'utilisateur sélectionne une valeur dans la première liste déroulante, la page repart vers le serveur (soumission),
Le code PHP enrichit la page 'La valeur que vous avez ..: LST' (par exemple) et la renvoie
L'utilisateur sélectionne une valeur dans une autre liste déroulante, la page repart ...
etc.
Un bouton 'reset' ne changerait rien aux modifications effectuées dans la page ... Seule solution, réinitialiser le formulaire coté PHP.
N'y arrivant pas avec un bouton 'reset' standard, elle a créé un formulaire sans controles, volontairement ce n'est pas une erreur, qu'elle soumet au même code PHP. Comme ce fomulaire ne contient rien, cela réinitialise sa page.

:weird:
recharger une page pour vider des champs :koi:
de plus en utilisant une soumission de formulaire ... 8O

par dépit ? :calim2:

Après chacun sa conception du développement web :aie:

Ce ne sont pas que des champs ... Elle écrit directement dans la page, change le positionnement de 'selected' sur les 'option', construit des listes en fonctions des réponses précédentes, ... autant d'actions rendant un bouton 'reset' inopérant
Bref, il faudrait qu'elle passe à AJAX pour faire ce qu'elle veut autrement. Mais là ... et vu le domaine ... c'est peut-être pas plus mal de rester sur cette solution là (amho)

Merci lysandro de ton soutient pour mon code ...
Tu a tout a fait compris ce que je faisais au niveau de mon code PHP,
Pour en revenir a Spacefrog lorsque j'ai mis dans le même form mon bouton submit et reste de type SUBMIT,

Cela ne fonctionne pas, ma page ne répond plus normalement c'est pour ça que j'ai utiliser un deuxième form qui lui effectue correctement ce que je voulais en réinitialisant mes données afin que l'utilisateur puisse rafraichie a l'aide du bouton la page pour remettre tout a 0 et donc pouvoir remplis a nouveau le formulaire

Je ne sais pas plus comment m’exprimer afin de ne plus passez pour une noob qui pour vous ne sais pas utiliser php et html.
Dans mon code certes et peux être mal structuré, car je n'ai pas de balise html .. mais en attendant il fonctionne ...

Donc cette fois ci je vais reposer une nouvelle question comme la dis lysandro, pourquoi lorsque je mets les deux boutons dans le même form, mon site ne réagis plus du tout pareil et sachant que le bouton reset ne marche pas, Alors qu'avec mon deuxième formulaire il fonctionne ? :/

Merci encore pour vos réponse, et en espérant trouver le problème ...

Citation:

---

c'est pour ça que j'ai utiliser un deuxième form qui lui effectue correctement ce que je voulais en réinitialisant mes données

---

Si je comprends bien ton code ... le second form avec le bouton submit recharge la page ... en effet ça va réinitialiser les données mais l'objectif est juste de vider les champs, je ne pense pas que ce soit la bonne méthode.
A priori tu n'as pas trop l'air de t'en soucier vu ton

Citation:

---

je n'ai pas de balise html .. mais en attendant il fonctionne ...

---

On reste encore dans le flou avec tes explications de bouton reste qui ne fonctionne pas ...
Il serait nettement plus productif de nous montrer le code HTML qui pose souci ! Affichage source, copier coller ...

En tout état de cause, au cas où ça soit la cause de ton interrogation, un bouton reset ne sert pas à vider les champs, il sert à réinitialiser le formulaire, c'est-à-dire à restaurer les valeurs par défaut de chaque champ. Donc si les champs sont déjà remplis, ce sont les valeurs initiales qui seront rétablies avec un bouton reset.

Je pense qu'il s'agit d'un souci d’appréhension de l'ergonomie par rapport au fonctionnement php HTML js ...

Le DOM ne survit pas à un rechargement de page

Il faut considérer php comme une machine à ecrire du html
une fois le html généré, il est envoyé au navigateur du client ...
Il n'y a pas de mémoire commune entre php et le navigateur ! Sauf a utiliser des variables de session qui conservent les données mais ne les partagent pas.

Le fait de soumettre un form recharge la page, le DOM est alors détruit aucune trace de l'état de la page ne subsiste coté client !

Il y a donc deux façons de procéder pour conserver des saisies:

les récupérer lors du submit coté serveur puis les réinjecter dans la page retournée après le submit

ou

ne pas recharger la page et faire les opération nécessaires sur le serveur en utilisant ajax ( la page n'étant pas rechargée le DOM est conservé et peut être modifié sur le retour d'ajax )

Comme l'a précisé Bovino précédemment le bouton reste remet les valeur initiales dans les champs, celle que le navigateur interprète au chargement de la page
et la portée de ce bouton reste se limite au form dans lequel il est inclus.
SI il y a plusieurs forms sur la page et que le but est de vider tous les champs, il faudra soit modifier le code html pour n'avoir qu'un seul formulaire, ou passer par un javascript qui videra tous les champs de la page ...

Code:

---

onchange='submit()'

---

J'avais loupé ça ! Effectivement si le formulaire est soumis à chaque saisie de champ, c'est un sacré bazar :aie:

Je propose de repartir d'un unique formulaire, de virer tous ces submit() à la sauvette et de recoder proprement les requêtes intermédiaires en passant par AJAX.

Dans ces conditions je pense partir sur du javascript qui permettra de vider tout les champs.

Car de toute manière en mettant le submit et le reset dans le même formulaire cela ne fonctionne pas.
Alors que si je le mets dans un autre formulaire il fonctionne très bien.
La ou est le problème du pourquoi ^^.

Pourquoi un sacré basard SylvainPV ?
Le onchange='submit()' permet de sauvegarder ce que l'utilisateur veut sans avoir de bouton submit a chaque fois.
Et donc plus esthétique a l'utilisateur

si tu lisais les réponses ... tu saurais le pourquoi ...

Citation:

---

Le onchange='submit()' permet de sauvegarder ce que l'utilisateur veut sans avoir de bouton submit a chaque fois.
Et donc plus esthétique a l'utilisateur

---

Ton use case est peut-être spécifique, mais ce que tu décris est loin d'être ce qu'attend un utilisateur en général.
Quand il rempli un formulaire, il s'attend surtout à remplir le formulaire en entier puis à le soumettre, pas à ce que la page se recharge à chaque champ qu'il saisi, ce qui au bout d'un moment est même assez "gonflant" (surtout s'il se trompe sur un champ).

Citation:

---

Pourquoi un sacré basard SylvainPV ?

---

Tu veux dire, en dehors de ce qu'on essaye de t'expliquer depuis hier ? :calim2:

Si en cours de saisie dans le formuliare il y a besoin d'aller récupérer des infos sur le serveur pour modifier les champs suivant, on utilise en général ajax ...

Recharger la page a chaque saisie est à la base une très mauvaise idée à proscrire !

Donc il faudrait que j'enlève tout mon onchange='submit' et les remplacer par de l'ajax ?

Oui, c'est ce qui se fait habituellement dans ce genre de cas. Et c'est réellement plus agréable pour l'utilisateur que des rechargements intempestifs de page.

n'ayant jamais pratiquer ce genre de code, comment je peux m'y prendre ?
Qu'est ce qu'il faut que je fasse avec ce code ?
Car le onchange='submit' était simple et facile a manipulé .. mais je préfère écouter vos conseils et améliorer mon code ..

Citation:

---

Envoyé par cahuet-200

Merci lysandro de ton soutient pour mon code ...

---

Euh merci, mais c'est plutôt toi que je soutiens que ton code :) il est qd mm plein de ... fonctionnalités :)

Comme l'ont souligné, au moins, Auteur, Bovino et SpaceFrog, le html généré est incorrect. Ce serait bien de le corriger.

Reset or not reset ?

Sur un formulaire on peut avoir :
- un bouton submit : input type="submit"
- un bouton reset : input type="reset"

Comme l'on expliqué Bovino et Spacefrog, le bouton reset se contente de remettre les contrôles du formulaire à leur état initial.
Cet état initial est l'état connu au chargement de la page. Par exemple :

Avec une page initiale à :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

... <form> ... <select> <option value="1" selected>un</option> <option value="2">deux</option> </select> ... <input type="reset" value="reset" /> </form> ...

---

Si l'utilisateur sélectionne 'deux', "2" sera la valeur du select.
Si maintenant il appuie sur le bouton reset, le ""navigateur"" va remettre la valeur du select à "1" qui est la valeur de l'option 'selected'.

Ce type de bouton ne fonctionnera pas dans ton formulaire, parce que : (si je reprends le même exemple)

Si l'utilisateur sélectionne 'deux', "2" sera la valeur du select.
MAIS tu soumets ton formulaire, c'est à dire que tu regénère ta page en PHP et elle revient modifiée :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

... <form> ... <select> <option value="1">un</option> <option value="2" selected>deux</option> </select> ... <input type="reset" value="reset" /> </form> ...

---

Si maintenant il appuie sur le bouton reset, le ""navigateur"" va remettre la valeur du select à "2" qui est MAINTENANT la valeur de l'option 'selected' donc ça ne fait pas ce que tu attends.

A moins de changer la logique de ton code, ce qui consisterait à déporter les traitements que tu fais en PHP vers du Javascript dans la page, comme le proposent Bovino, SpaceFrog et SylvainPV, cela ne fonctionnera jamais.


Tes questions

Citation:

---

Envoyé par cahuet-200

pourquoi lorsque je mets les deux boutons dans le même form, mon site ne réagis plus du tout pareil et sachant que le bouton reset ne marche pas

---

Si tu mets une deuxième bouton submit dans ton formulaire, que se passe-t-il lors de l'appui sur ce bouton ?

La même chose qu'avec l'autre bouton submit déjà présent dans le formulaire :
- tu soumets ta page. Avec les contrôles et leurs valeurs.

Donc, au niveau de PHP, si tu veux faire la différence entre les deux états, il faut tester ce que tu récupères comme contrôles et leurs valeurs (je parle des boutons submit).
En fonction du bouton submit utilisé, tu devrais savoir si c'est une "sauvegarde" ou une "réinitialisation".
Tant que tu ne testes pas quel bouton a été utilisé, tu ne le sais pas.

Voilà pourquoi ça ne fonctionne pas.

Pour que ça fonctionne

En HTML4 et HTML5, un seul des deux boutons sera soumis (sous réserve qu'il ait un attribut 'name' valide, qu'il ne soit pas 'disabled', etc.) : celui utilisé.

Tu pourrais donc mettre

Code:

---

1 2 3 4 5 6 7

... <form> ... <input name="submit" type="submit" value="submit" /> <input name="reset" type="submit" value="reset" /> </form> ...

---

Et tester dans ton PHP un truc du genre (mais je n'y connais rien)

Code:

---

1 2 3 4 5

$RESET = ( $_POST['RESET'] == 'reset' ); ... if ( $RESET ) ...

---

On devrait même pourvoir leur donner le même 'name' :

Code:

---

1 2 3 4 5 6 7

... <form> ... <input name="action" type="submit" value="submit" /> <input name="action" type="submit" value="reset" /> </form> ...

---

Et tester

Code:

---

1 2 3 4

$RESET = ( $_POST['ACTION'] == 'reset' ); ... if ( $RESET ) ...

---

les pros sauront te conseiller.

Citation:

---

Envoyé par cahuet-200

Alors qu'avec mon deuxième formulaire il fonctionne ?

---

Dans ta solution actuelle, comme tu as créé un deuxième formulaire, qui lui ne contient AUCUN contrôle, quand on appuie sur le bouton submit, ton formulaire est soumis sans données, ton code PHP réinitialise ta page.

Voilà pourquoi ça fonctionne.

Quelle solution adopter ?

Bin ça dépend essentiellement de toi : si tu es aussi l'aise en Javascript qu'en PHP, que tu as le temps pour une refonte assez importante, ...

Quelques reflexions :

- comme tu fais de la validation incrémentale :

+ l'utilisateur, au travers du bouton "back" de son navigateur, peut revenir facilement à l'état précédent de sa saisie, impossible en AJAX
+ il est assez facile de migrer vers du code sans Javascript du tout, le javascript dans un navigateur étant un trou de sécurité en lui même :D
= je ne sais pas si elle est nécessaire n'ayant pas analysé ton code en profondeur
- ça augmente le traffic réseau en nombre et en volume par rapport à une solution AJAX
- ça augmente la charge du serveur par rapport à une solution AJAX

- une solution AJAX :

+ meilleurs temps de réponse ("expérience utilisateur" comme on dit)
+ meilleure maintenabilité du coté PHP : plus de pages mais plus petites et plus simples
- basée sur de l'évènementiel asynchrone, pas la technique de programmation la plus simple à maitriser
- grosse refonte de code

D'accord merci a toi lysandro,

J'ai bien compris tes explications, malheureusement je ne connais pas du tout le js ou ajax ..
Au niveau de mon code html j'ai retrouver du code qui était dans un include que j'avais totalement oublier, mais l'on ma dis de supprimer le balise font, table et center.

J'ai donc essayer de le faire mais ma page par la suite ne ressemble plus a rien et je ne sais pas par quoi les remplacer ..

En essayant le code :

Code:

---

1 2 3

echo " <br/><input id='Submit' type='Submit' name='valid' value='Sauvegarder' style='widht=100px'>"; echo " <input type='Submit' name='reset' value='Reset' style='widht=100px'>"; echo " <br/></form>";

---

ou celui ci :

Code:

---

1 2 3

echo " <br/><input id='Submit' type='Submit' name='valid' value='Sauvegarder' style='widht=100px'>"; echo " <input type='reset' name='reset' value='Reset' style='widht=100px'>"; echo " <br/></form>";

---

Aucun ne fonctionne pour mon cas.. donc je pense que je vais abandonné mon idée ..

Citation:

---

Envoyé par cahuet-200

Au niveau de mon code html j'ai retrouver du code qui était dans un include que j'avais totalement oublier, mais l'on ma dis de supprimer le balise font, table et center.

J'ai donc essayer de le faire mais ma page par la suite ne ressemble plus a rien et je ne sais pas par quoi les remplacer ..

---

Je pense qu'il/ils veule/nt te faire passer par des feuilles de styles pour la présentation, donc remplacer font, table, center par des CSS. Mais il/ils va/vont te guider ou au moins t'orienter vers des tutoriaux.

Citation:

---

Envoyé par cahuet-200

En essayant le code :
...
Aucun ne fonctionne pour mon cas..

---

Le premier code ne fonctionnera que si tu le testes dans ton code PHP ... L'idée est la suivante : si tu reçois une page vide (cas du deuxième formulaire de ta page, celui avec un seul bouton submit), dans le PHP tous les champs sont vides, et tu réinitialise ta page.

Donc, si tu mets ton deuxième bouton submit dans le premier formulaire (le premier code de ton post précédent), il faut récupérer l'information pour savoir si c'est une sauvegarde ou une réinitialisation avec un truc comme $_POST['RESET'], tester si c'est bien la valeur que tu as mise : 'Reset'.

Puis, à partir de là, partout où dans ton PHP tu renseignes ta page en fonction des valeurs utilisateurs (les $POST[...]) si tu as reset, tu fais comme si ses valeurs étaient absentes ou vide. Je te donnerais bien un exemple avec ton code, mais ne connaissant pas PHP, je risque d'écrire des bétises.

Le deuxième code ne fonctionnera jamais, relire les post précédents.

D'accord très bien merci beaucoup en tout cas pour votre aide =)
Je vais essayer d'avoir un peux plus de renseignements pour faire la feuille de css ou autre.

Merci encore a toi lysandro =)

une remarque sur le code posté par lysandro qui a écrit :

Code:

---

<option value="1" selected>un</option>

---

les normes W3C demandent à ce que chaque attribut soit suivi d'une valeur. Donc il faut écrire :

Code:

---

<option value="1" selected="selected">un</option>

---

ça fait doublon mais c'est cette écriture qu'il faut privilégier.

:nono:

C'est vrai uniquement pour le xhtml qui impose de respecter la syntaxe XML et donc tout attribut doit avoir une valeur. En revanche, HTML est assez permissif pour la syntaxe et les attributs type booléen peuvent être écrits sans valeur. Quant à HTML5, il accepte aussi bien la syntaxe xhtml que HTML, donc les deux sont valides.

A noter aussi que même en xhtml, c'est la présence de l'attribut qui est importante et non sa valeur, donc

Code:

---

<option value="1" selected="toto">un</option>

---

revient exactement au même que

Code:

---

<option value="1" selected="selected">un</option>

---

Au passage, il est aussi possible en HTML de ne pas fermer certaines balises, donc

Code:

---

<option value="1" selected="toto">un

---

est tout aussi correct ainsi que

Code:

---

<input>

---

Oui les boolean attributes sont les seuls attributs qui peuvent ne pas prendre de valeur. L'extrait de la spec correspondant : https://html.spec.whatwg.org/#boolean-attributes

Par contre le coup de ne pas fermer la balise <option> ce n'est pas correct, ça ne fait pas partie de la spec. C'est peut-être toléré par la plupart des navigateurs qui ferment les balises automatiquement lors de la phase de parsing du DOM, mais la nuance entre "correct" et "toléré" est importante :) En revanche, HTML5 décrit plusieurs éléments comme n'ayant pas besoin de fermeture de balise: <input>, <img>, <br>...

Citation:

---

ça ne fait pas partie de la spec.

---

Au temps pour moi alors, j'ai peut-être mal compris le sens de

Citation:

---

Envoyé par Tag omission in text/html:

An option element's end tag may be omitted if the option element is immediately followed by another option element, or if it is immediately followed by an optgroup element, or if there is no more content in the parent element.

---

Source

;)

Tiens donc, on dirait que je ne suis plus à la page. Mea culpa. Du coup je suis assez perplexe, comment distinguer <option>contenu</option> de <option></option>contenu ?

edit : http://www.w3.org/TR/html5/syntax.ht...x-tag-omission
Encore plus perplexe... on peut omettre certaines balises ouvrantes aussi ! En fait, ils semblent qu'ils ont intégré dans la spécification toute la partie tolérance d'erreur des algos de parsing HTML. Dire qu'il n'y a pas si longtemps, je passais tous mes sites sur http://validator.w3.org/