Revenir au formulaire lors édition

par MlleAlys Ven 16 Avr 2021 - 2:37

Rappel du premier message :

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur

Description du problème

Bonjour ! ^0^

J'ai créé un formulaire qui poste un message sur un forum, et j'aimerais que lors de l'édition de ce message, l'utilisateur puisse revenir au formulaire pour le faire.
Est-ce possible ? Et si oui, comment ?

(codes modifiés, voir la maj plus bas dans le sujet) :

La page html avec le formulaire qui me sert de test :

Code:: <!DOCTYPE html> <html lang="fr" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> </style> <script type="text/javascript"> function envoiMessage(form) { // titre du sujet form.subject.value = "subject"; // Message est une chaîne de caractères vide : var text_message = ""; // Remplir message à partir des informations fournies text_message = text_message + "<div id='formresult'>\n<div class='titre'>" + form.titre.value + "</div><div class='contenu'>" + form.contenu.value + "</div>\n</div>"; // Insère le texte construit dans le champ caché "message" du formulaire form.message.value = text_message; } </script> </head> <body> <form action="/posting.forum" method="post" name="post" enctype="multipart/form-data" onSubmit="return(envoiMessage(this));" target="_parent"> <input type="hidden" name="lt" value="0" /> <input type="hidden" name="mode" value="reply" />  <input type="hidden" name="topictype" value="0" checked="checked" />  <input type="hidden" name="message" value="" />  <input type="hidden" name="subject" value="" /> <input type="hidden" name="username" value="" /> <input type="hidden" name="t" value="42" />  <input name="titre" type="text" value="titre" style=""/> <br/> <textarea name="contenu" style="">Contenu</textarea> <div style="background:#cccccc; padding:5px; margin-top:3px; text-align:center;"> <input type="reset" value="Annuler" style="background: white;" /> <input type="submit" value="Envoyer" name="post" style="background: white;" /> </div> </form> </body> </html>

Le message généré sur mon forum test :

Code:: <div id='formresult'> <div class='titre'>titre</div><div class='contenu'>Contenu</div> </div>

(je suis pas sûre que ça soit intéressant, mais c'est généré ici : https://mllealys2.forumactif.org/t42- )

Merci d'avance à ceux qui pourront m'éclairer ! =D

par Self Ven 30 Avr 2021 - 7:43

Hello ! Désolé du double post, je suis sur mobile et l'éditeur m'a encore supprimé mes quotes de la touche 7

‍�. J'ai peur d'éditer et de perdre encore une partie du message comme avant hier. Juste une précision que j'ai oublié c'est que pour le bouton répondre il faut également agir au niveau de cette ligne :

Code:: $('a[href$="reply"], a[href$="newtopic"]').attr('href', target);

Et supprimer cette partie :

Code:: a[href$="reply"],

par MlleAlys Sam 1 Mai 2021 - 22:13

Un petit message pour dire merci beaucoup Self, merci merci ! Je détaille tout ça dès que j'ai le temps et je reviens par ici pour dire si je m'en suis sortie ! Very Happy

(et va pour le ligne par ligne, peu optimisé mais je dois avouer aussi simple pour moi ! Laughing

)

par Self Lun 3 Mai 2021 - 8:00

C'est un plaisir d'aider une ancienne collègue What a Face

formulaire - Revenir au formulaire lors édition - Page 2 985204619

. Et c'était intéressant à faire, ça fait un moment que je n'ai pas bossé sur des formulaires sur FA. N'hésite pas si tu as des questions je suis le sujet de près, comme j'ai peu de temps je ne m'engage sur aucun autre problème pour le moment

.

par **Chacha** Sam 8 Mai 2021 - 9:33

formulaire - Revenir au formulaire lors édition - Page 2 UmaslZ4

Bonjour,

Attention, cela fait 7 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message.

Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

par **Chacha** Dim 9 Mai 2021 - 9:25

Bonjour,

Le sujet est tagué formulaire - Revenir au formulaire lors édition - Page 2 JOtgjRE

Cordialement.

par MlleAlys Dim 9 Mai 2021 - 13:13

Coucou Self !
Alooors.... Bon, j'étais confiante, j'ai essayé de faire les modifs, et évidemment, ça ne fonctionnait plus !
Donc j'ai essayé de reprendre les modifs une par une, et... je bloque dès la première en fait ! Laughing

A savoir : poster comme dans mon formulaire de base un message en deux parties : "contenu1" et "contenu2".

Dans le formulaire j'ai modifié cette partie :

Code:: <div id="content">  <label for="contenu1">contenu 1:</label> <textarea name="contenu1" placeholder="Ecrivez votre message"></textarea> <label for="contenu2">contenu 2:</label> <textarea name="contenu2" placeholder="Ecrivez votre message"></textarea> </div>

Jusque là tout va bien...

Puis j'ai essayé de faire ce que tu avais indiqué ici :

Self a écrit:Alors Effectivement pour mes tests j'ai fait simple.
Le contenu envoyé est généré par une variable :
Code:
let content = $('#content').html();
Donc si je suis ton exemple et que l'on suis la sémantique ES2015 on peut écrire la variable comme ceci :
Code:
let contenu1 = $('input[name"contenu1"]').attr('value'), contenu2 = $('input[name"contenu2"]').attr('value'); let content = '<div id='formresult'> <div class='contenu1'>${contenu1}</div><div class='contenu2'>${contenu2}</div> </div>'
Dans ces quotes le HTML peut être écris sur plusieurs lignes et les variables écrites comme cela ${contenu1} sans avoir à faire de concaténation.

Ce qui a donné ça :

Code:: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Poster un nouveau message</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ let definePostingMethod = function(){ /*Les paramètres que l'on veut récupérer*/ let params = ['mode', 'topic', 'subject', 'message']; /*Si le mode est reply*/let reply = function(){ /*On récupère le topic cible*/$('input[name="f"]').after('<input type="hidden" name="t" value="'+sessionStorage.getItem('topic')+'"/>').remove(); }, /*Si le mode est editpost*/edit = function(){ /*On récupère le titre*/$('input[name="title"]').attr('value', sessionStorage.getItem('subject')); /*Ici on gère le contenu*/$('#content').html(sessionStorage.getItem('message')); /*On récupère le message cible*/$('input[name="f"]').after('<input type="hidden" name="p" value="'+sessionStorage.getItem('topic')+'"/>').remove(); /*On récupère le titre du message cible*/$('input[name="subject"]').attr('value', sessionStorage.getItem('subject')); }; for(let i = 0; i < params.length; i++){ /*valideur />*/ /*On configure chaque paramètre*/if(sessionStorage.getItem(params[i]) != null) $('input[name="'+params[i]+'"]').attr('value', sessionStorage.getItem(params[i])); } /*Si le mode est défini*/ if(sessionStorage.getItem('mode') != null){ switch(sessionStorage.getItem('mode')){ /*Et si il est reply*/case 'reply': /*On lance la fonction reply*/reply(); break; /*Et si il est editpost*/case 'editpost': /*On lance la fonction edit*/edit(); break; } } }; definePostingMethod(); /*A la soumission du formulaire*/ $('form[action="/post"]').on('submit', function(){ //initial /*let content = $('#content').html();*/ //test 1 let contenu1 = $('input[name"contenu1"]').attr('value'), contenu2 = $('input[name"contenu2"]').attr('value'); let content = '<div id='formresult'> <div class='contenu1'>${contenu1}</div><div class='contenu2'>${contenu2}</div> </div>'; $('input[name="subject"]').attr('value', $('#title').attr('value')); /*Si on est pas en mode édition*/ if(sessionStorage.getItem('mode') != 'editpost'){ /*On ajoute une div .byForm autour du contenu*/$('input[name="message"]').attr('value', '<div class="byForm">'+content+'</div>'); }else{ $('input[name="message"]').attr('value', content); } }); }); </script> </head> <body> <form action="/post" method="post" name="post" enctype="multipart/form-data">  <label for="title">titre du message :</label> <input id="title" name="title" type="text" placeholder="Titre du message" value=""/><br/> <div id="content">  <label for="contenu1">contenu 1:</label> <textarea name="contenu1" placeholder="Ecrivez votre message"></textarea> <label for="contenu2">contenu 2:</label> <textarea name="contenu2" placeholder="Ecrivez votre message"></textarea> </div> <div class="submitbuttons">  <input type="submit" value="Envoyer" name="post"/> </div> <div id="options">  <input type="hidden" name="mode" value="newtopic"/> <input type="hidden" name="topictype" value="0" checked="checked"/> <input type="hidden" name="message" value=""/> <input type="hidden" name="subject" value=""/> <input type="hidden" name="f" value="7"/> </div> </form> </body> </html>

Et là... ça n'a pas fonctionné, en me renvoyant à une page d'erreur du style "veuillez entrer un titre avant de poster".

Du coup en regardant le code que tu avais proposé, je sais pas si c'était nécessaire ou pas, mais j'ai modifié légèrement comme ça :

Code:: // test 1 let contenu1 = $('input[name="contenu1"]').attr('value'), contenu2 = $('input[name="contenu2"]').attr('value'); let content = '<div id="formresult"><div class="contenu1">${contenu1}</div><div class="contenu2">${contenu2}</div></div>';

Et là ça a fonctionné et ça a bien posté le message ! Mais.... sans prendre en compte les variables contenu1 et contenu2, ça m'a écrit texto dans le message :

Code:: <div class="byForm"><div id="formresult"><div class="contenu1">${contenu1}</div><div class="contenu2">${contenu2}</div></div></div>

formulaire - Revenir au formulaire lors édition - Page 2 Sans_t19

Bon, là, j'avoue que j'étais un peu frustrée, parce que cette partie là fonctionnait bien dans mon tout premier formulaire, et ça m'agace de ne pas comprendre ! Laughing

Du coup j'ai essayé de reprendre la forme de ce que j'avais dans le premier formulaire, ce qui a donné quelque chose comme ça :

Code:: //test 2 var content = ""; content = content + "<div id='formresult'>\n<div class='contenu1'>" + form.contenu1.value + "</div><div class='contenu2'>" + form.contenu2.value + "</div>\n</div>";

Evidemment, ça n'a pas fonctionné, avec le message "veuillez entre un titre" ou quelque chose comme ça;

Puis j'ai essayé ça :

Code:: //test 3 let content = $('input[name="contenu1"]').attr('value');

Ce qui a bien posté le message ! Mais a posté ça :

Code:: <div class="byForm">undefined</div>

Puis j'ai même essayé ça ! (parce que après tout, pourquoi pas ? Comme je suis un peu paumée et que je ne comprends pas tout, on ne sait jamais ! Razz

)

Code:: //test 4 let content = form.contenu1.value

Bon, et évidemment, ça n'a pas fonctionné du tout ("veuillez entrer un titre" blablabla)

Et là.... J'ai un peu abandonné je l'avoue, je n'avais plus d'idées ! scratch

Je reviens donc vers toi dans l'espoir d'une lumière, pour comprendre d'où vient le problème et de façon à obtenir un formulaire qui (avant même de pouvoir être édité xD) poste bien le contenu1 et le contenu2 dans le message.... Angel

Et j'avais également une autre question : Le formulaire (lorsqu'il fonctionne) poste un sujet automatiquement verrouillé, quel champ faut-il modifier pour contrôler ça ?

Merci tout plein à toi pour le temps que tu y passes et ta patience ! I love you

Mon formulaire actuel (j'ai laissé les 4 tests dedans Razz

):

Code:: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Poster un nouveau message</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ let definePostingMethod = function(){ /*Les paramètres que l'on veut récupérer*/ let params = ['mode', 'topic', 'subject', 'message']; /*Si le mode est reply*/let reply = function(){ /*On récupère le topic cible*/$('input[name="f"]').after('<input type="hidden" name="t" value="'+sessionStorage.getItem('topic')+'"/>').remove(); }, /*Si le mode est editpost*/edit = function(){ /*On récupère le titre*/$('input[name="title"]').attr('value', sessionStorage.getItem('subject')); /*Ici on gère le contenu*/$('#content').html(sessionStorage.getItem('message')); /*On récupère le message cible*/$('input[name="f"]').after('<input type="hidden" name="p" value="'+sessionStorage.getItem('topic')+'"/>').remove(); /*On récupère le titre du message cible*/$('input[name="subject"]').attr('value', sessionStorage.getItem('subject')); }; for(let i = 0; i < params.length; i++){ /*valideur />*/ /*On configure chaque paramètre*/if(sessionStorage.getItem(params[i]) != null) $('input[name="'+params[i]+'"]').attr('value', sessionStorage.getItem(params[i])); } /*Si le mode est défini*/ if(sessionStorage.getItem('mode') != null){ switch(sessionStorage.getItem('mode')){ /*Et si il est reply*/case 'reply': /*On lance la fonction reply*/reply(); break; /*Et si il est editpost*/case 'editpost': /*On lance la fonction edit*/edit(); break; } } }; definePostingMethod(); /*A la soumission du formulaire*/ $('form[action="/post"]').on('submit', function(){ //initial /*let content = $('#content').html();*/ //test 1 let contenu1 = $('input[name="contenu1"]').attr('value'), contenu2 = $('input[name="contenu2"]').attr('value'); let content = '<div id="formresult"><div class="contenu1">${contenu1}</div><div class="contenu2">${contenu2}</div></div>'; //test 2 /*var content = ""; content = content + "<div id='formresult'>\n<div class='contenu1'>" + form.contenu1.value + "</div><div class='contenu2'>" + form.contenu2.value + "</div>\n</div>";*/ //test 3 /*let content = $('input[name="contenu1"]').attr('value');*/ //test 4 /*let content = form.contenu1.value;*/ $('input[name="subject"]').attr('value', $('#title').attr('value')); /*Si on est pas en mode édition*/ if(sessionStorage.getItem('mode') != 'editpost'){ /*On ajoute une div .byForm autour du contenu*/$('input[name="message"]').attr('value', '<div class="byForm">'+content+'</div>'); }else{ $('input[name="message"]').attr('value', content); } }); }); </script> </head> <body> <form action="/post" method="post" name="post" enctype="multipart/form-data">  <label for="title">titre du message :</label> <input id="title" name="title" type="text" placeholder="Titre du message" value=""/><br/> <div id="content">  <label for="contenu1">contenu 1:</label> <textarea name="contenu1" placeholder="Ecrivez votre message"></textarea> <label for="contenu2">contenu 2:</label> <textarea name="contenu2" placeholder="Ecrivez votre message"></textarea> </div> <div class="submitbuttons">  <input type="submit" value="Envoyer" name="post"/> </div> <div id="options">  <input type="hidden" name="mode" value="newtopic"/> <input type="hidden" name="topictype" value="0" checked="checked"/> <input type="hidden" name="message" value=""/> <input type="hidden" name="subject" value=""/> <input type="hidden" name="f" value="7"/> </div> </form> </body> </html>

par MlleAlys Mar 11 Mai 2021 - 22:36

par Self Ven 14 Mai 2021 - 15:42

Hello MlleAlys. J'ai bien vu que ton sujet était réouvert. Je m'en occupe dès que je peux, je suis sur téléphone actuellement. Je vais chercher l'input de verrouillage des messages pour régler ce soucis que je ne rencontrais pas personnellement. Ce que je peux te dire, c'est que pour que les variables ${variable} soient prises en compte les quotes extérieurs doivent être ceux de la touche 7 du clavier que l'éditeur FA n'échappe pas apparemment et qui ne peut donc se trouver ni dans mes messages, ni dans les tiens, je veux dire par là qu'il ne faut pas faire de copier coller et bien changer les quotes dans les codes.
J'essaie de revenir vers toi au plus vite.

par Neptunia Ven 14 Mai 2021 - 17:08

Re,

Self a écrit:Ce que je peux te dire, c'est que pour que les variables ${variable} soient prises en compte les quotes extérieurs doivent être ceux de la touche 7 du clavier

La touche 7 ? C'est bien ça ?
Bah je dois avoir un clavier spécial alors !

par Self Ven 14 Mai 2021 - 17:32

Je sais que certains clavier n'ont pas les touches < et > j'ai été embêté avec ça, mais pour la touche 7 moi personnellement j'ai bien un quote dessus (ne regardez pas l'état du clavier

)

formulaire - Revenir au formulaire lors édition - Page 2 Img_2010

par Neptunia Ven 14 Mai 2021 - 18:34

Je me demandais si c'était pas une erreur. J'ai bien la même chose (enfin presque)

Tellement minuscule qu'au premier regard je croyais que c'était une "poussière"
Et à l'essai ça fonctionne comme les trémas (aïe) et les accents circonflèxes où il faut entrer une lettre après appui de la touche en question, ce qui me paraissait bizarre pour des guillemets.

Bah à part ça, c'est un clavier de travailleur, beaucoup de temps passé à taper dessus et à le salir, et le nettoyer reviendrait à ne plus pouvoir travailler pendant trop longtemps. J'ai fini par trouver une parade provisoire : Une fois je nettoie le clavier numérique, ensuite le bloc directionnel, et la dernière fois la partie alphanumérique. Comme ça ya toujours une partie pas trop sale mdr.
Et là j'envisage une solution plus définitive, faire une rotation entre deux claviers ayant une même disposition : plus besoin de repérer où sont les touches, suffirait de regarder le clavier actif pour remonter celui en cours de nettoyage.

J'ai remplacé ma souris filaire par une sans fil il y a 48 heures (des années que je cherche la souris de mes rêves sans la trouver), je vais suivre le même chemin pour les claviers.

par Self Sam 15 Mai 2021 - 9:16

C'est à dire que c'est un clavier d'ordinateur portable aujourd'hui, je ne suis plus sur pc fixe avec clavier mécanique ce qui était beaucoup mieux à nettoyer, je referme juste l'aparté et reviens à ces fameux quotes qui dans le Javascript aujourd'hui nous permettent juste de gagner en lisibilité sur le code.
`<span>mon premier</span>
<span>contenu</span>`
Écrire 2 span comme ci dessus dans un code Javascript ne nous permettra pas de faire un retour à la ligne entre les deux par exemple, le HTML fonctionne juste comme d'habitude, il faut donc penser au <br> et autres spécificités.

EDIT : Je viens de faire mes tests et c'est une erreur toute conne, comme je pars du principe que l'on met souvent des inputs dans les formulaire je t'ai donné un exemple avec input[name"..."] alors que tu utilises des textarea, c'est donc textarea[name="..."], ce qui donne pour cette partie du code :
let contenu1 = $('textarea[name="contenu1"]').attr('value'), contenu2 = $('textarea[name="contenu2"]').attr('value');
let content = `<div class="c1">${contenu1}</div>
<div class="c2">${contenu2}</div>`;
Je me demande juste maintenant si tu réussirais à gérer le retour des valeurs du formulaire pour l'édition ou si je dois t'aiguiller dès maintenant Smile

?

Dernière petite chose peux tu me dire si le verrouillage se fais toujours ? Il n'y a pas d'input qui gère cela, j'avais fait à l'époque une astuce avec des variables de session pour pouvoir verrouiller un message en le postant car ce n'est pas possible de base.

par MlleAlys Sam 15 Mai 2021 - 22:01

textarea et non input.... raaaaah je me sens bête, j'aurais pu, j'aurais dû la trouver celle là !! Merci beaucoup ! Je teste tout ça demain, avec la partie édition et verrouillage également !
(je n'ai pas tout suivi des histoires de `` mais j'ai repéré la touche, je verrai bien !)

Vous êtes des amours ! I love you

par Self Dim 16 Mai 2021 - 10:33

Il faut le comprendre aussi What a Face

. Une variable ${variable} ne s'affichera pas entre quotes normales et un retour à la ligne devra être échappé avec un backslash alors qu'avec ces quotes la les variables de ce type sont comprises et nous n'avons pas besoin de backslash, après il faut juste comprendre qu'avec ces quotes le html s'ecrit normalement, deux balises dites inline s'afficheront en ligne, deux balises block s'afficheront avec un retour à la ligne automatiquement. Il n'y a rien de complexe il ne faut juste pas s'en servir n'importe comment Mr. Green

.
Bon courage !

par MlleAlys Jeu 20 Mai 2021 - 17:11

(Hello, rapide passage pour dire pardon, je n'ai pas eu le temps de m'y pencher cette semaine, et je ne serai pas là ce weekend, le sujet est toujours en attente)

par Self Mer 23 Juin 2021 - 17:20

Bonjour MlleAlys, plus d'un mois depuis ton dernier message sur ce sujet. je viens aux nouvelles What a Face

. As tu toujours besoin de ses codes ? Dois-je les garder ? Je n'ai pas pour habitude de garder des codes d'entraide aussi longtemps car ça devient vite le bordel Mr. Green

.

Bonne journée Wink

.

par MlleAlys Sam 26 Juin 2021 - 12:16

Hello !! Oui pardon, la fin de l'année scolaire a été un peu plus chaotique te fatigante que prévu, j'avoue que je n'ai pas eu le temps et que j'ai oublié ensuite Crying or Very sad

Je suis désolée, du coup je pense que je vais demander à verrouiller ce sujet, je verrai si j'ai l'occasion de m'y replonger dans le futur plus ou moins proche, mais comme là je ne sais pas dire, ça ne me parait effectivement pas correct de laisser le sujet en attention si longtemps sans savoir. Embarassed

Merci encore en tout cas, je garde bien les codes de mon côté, merci merci ! I love you

par **Chacha** Sam 26 Juin 2021 - 12:37

MlleAlys a écrit:Je suis désolée, du coup je pense que je vais demander à verrouiller ce sujet, je verrai si j'ai l'occasion de m'y replonger dans le futur plus ou moins proche, mais comme là je ne sais pas dire, ça ne me parait effectivement pas correct de laisser le sujet en attention si longtemps sans savoir.

Bonjour @MlleAlys,

J'archive donc le sujet, en cas de besoin, envoyez-moi un petit MP pour demander la réouverture du sujet Smile

Cordialement.

Revenir au formulaire lors édition