Problème d'affichage avec mon générateur de fiche de présentation

par Physalis Dim 1 Avr 2018 - 21:50

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 01/04/2018
Lien du forum : http://togetsukyo.forumactif.com/

Description du problème

Bonjour, avec un autre modérateur, nous avons tenté de faire un générateur de fiche de présentation car on sait que beaucoup ont parfois du mal avec le code HTML et les remplissages de fiche.
Le soucis, c'est qu'après remplissage du formulaire, le forum nous affiche que le contenu du message envoyé est vide alors que notre JS ne présente normalement aucun soucis. On ne sait pas quoi faire. On pourrait abandonner l'idée de faire un générateur mais après un si long travail, ce serait dommage...
Quelqu'un pourrait-il nous aider ?

Voici le code du générateur :

Code:: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Fiche de présentation</title> <link rel="stylesheet" href="formulaire.css" /> <style>input[type="number"] {width:50px;}</style> <script type="text/javascript"> // </script> </head> <body style="overflow: auto;"> <form action="/posting.forum" method="post" name="FicheForm" enctype="multipart/form-data" target="_blank" onSubmit="return postPresa(this)"> <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" id="titre" value="" /> <input type="hidden" name="f" value="5" /> <div style="width: 555px; height: auto; border: solid black 1px; margin: 0 auto; padding: 10px; background:url(http://image.noelshack.com/fichiers/2018/13/7/1522588527-fond-mess.jpg)"> <center style="font-size: 3em">Fiche de présentation</center><br/><br/> <fieldset> <legend style="font-size: 1.5em">Informations sur le personnage</legend> <center> <label for="prenom_perso">Prénom</label> : <input type="text" name="prenom_perso" id="prenom_perso" size="10" autofocus required /> &nbsp &nbsp &nbsp <label for="nom_perso">Nom</label> : <input type="text" name="nom_perso" id="nom_perso" size="10" required /> &nbsp &nbsp &nbsp <label for="age_perso">Âge</label> : <input type="number" name="age_perso" id="age_perso" size="4" required /> </center><br/><br/> <center> <label for="metier">Métier</label> : <input type="text" name="metier" id="metier" size="10" required /> &nbsp &nbsp &nbsp &nbsp <label for="race">Race</label> : <select name="race" id="race"><option>Humain</option><option>Yōkaï</option></select> &nbsp &nbsp &nbsp &nbsp <label for="sexe">Sexe</label> : <select name="sexe" id="sexe"><option>Homme</option><option>Femme</option></select> </center><br/><br/> <center> <label for="origine">Origine</label> : <input type="text" name="origine" id="origine" size="10" required /> &nbsp &nbsp &nbsp &nbsp <label for="adresse">Lieu de résidence</label> : <select name="adresse" id="adresse"> <option>Kyōto</option><option>Nin</option><option>Yō</option><option>Dō</option></select> </center><br/><br/> <center> <label for="groupe">Votre opinion sur les évenements</label> : <select name="groupe" id="groupe"> <option>Ningen no Shihai ni Yūri (pro domination humaine)</option><option>Yōkai no Shihai ni Yūri (pro domination Yōkai)</option><option>Dōsei ni Yūri (pro cohabitation)</option><option>Kōhei (Neutre)</option> </select> </center> </fieldset><br/><br/><br/> <fieldset> <legend style="font-size: 1.5em">La présentation</legend> <center> <label for="physique">Le physique :</label><br/> <textarea name="physique" id="physique" style="width: 90%; height: 400px; resize: none;">Une description physique d'au moins 10 lignes. Précisez la taille, la corpulence, la façon de marcher, de bouger, la voix et si yōkai précisez sa forme originale.</textarea> </center><br/><br/> <center> <label for="caractere">Le caractère :</label><br/> <textarea name="caractere" id="caractere" style="width: 90%; height: 400px; resize: none;">Une description du caractère d'au moins 15 lignes. Parlez-nous de ses défauts, de ses qualités, de ses traits dominants, de ses peurs... Précisez l'opinion du personnage sur ce projet de cohabitation Oni/humain.</textarea> </center><br/><br/> <center> <label for="histoire">L'histoire :</label><br/> <label for="hist_titre">Son titre</label> : <input type="text" name="hist_titre" id="hist_titre" size="50" /><br/> <textarea name="histoire" id="histoire" style="width: 90%; height: 400px; resize: none;">L'histoire de votre personnage peut faire 10 lignes du moment que vous mettez les grands détails de sa vie dont la raison pour laquelle votre personnage s'est retrouvé dans cette école. Les Oni peuvent raconter leur vie à l'école primaire et au collège. Veillez vous reporter à ce [url=http://himawari-no-yakusoku.forumactif.com/t9-les-Oni-que-sont-ils#10]sujet[/url] si vous ne l'avez pas encore fait.</textarea> </center><br/><br/> </fieldset><br/><br/><br/> <fieldset> <legend style="font-size: 1.5em">Le joueur (oui, toi)</legend> <center> <label for="pseudo">Ton pseudo</label> : <input type="text" name="pseudo" id="pseudo" size="10" required /> &nbsp &nbsp &nbsp <label for="age_user">Ton âge</label> : <input type="number" name="age_perso" id="age_perso" size="40px!important" required="" style="width: 40px!important;"> </center><br/><br/> <center> Provenance de l'avatar : </br> <label for="avatar_pers">Personnage</label> : <input type="text" name="avatar_pers" id="avatar_pers" size="20" /> &nbsp &nbsp &nbsp &nbsp <label for="avatar_manga">Source</label> : <input type="text" name="avatar_manga" id="avatar_manga" size="10" /> </center><br/><br/> <center> <label for="intrigue">Souhaites-tu rejoindre l'une des intrigues disponibles ? Laquelle ?</label> <input type="text" name="intrigue" id="intrigue" size="50" /> </center><br/><br/> <center> <label for="type_rp">Ton type de RP favori</label> : <input type="text" name="type_rp" id="type_rp" size="50" placeholder="Drame, romance, action, thriller..." /> </center><br/><br/> <center> <label for="arrivee">Comment es-tu arrivé-e ici ?</label> <input type="text" name="arrivee" id="arrivee" size="60" /> </center><br/><br/> <center> <label for="avis">Ton avis sur le forum :</label><br/> <textarea name="avis" id="avis" style="width: 80%; height: 60px; resize: none"></textarea> </center><br/><br/> <center> <label for="commentaire">Un commentaire ? Une suggestion ?</label> <textarea name="commentaire" id="commentaire" style="width: 80%; height: 60px; resize: none"></textarea> </center> </fieldset><br/><br/><br/> <fieldset> <legend style="font-size: 1.5em">Le design de la fiche</legend> Précision : il faut mettre les liens des images.<br/><br/> <center> <label for="icon_global">Une petite image en haut de ta fiche (75x75)</label> : <input type="text" name="icon_global" id="icon_global" size="60" required /> </center><br/><br/> <center> <label for="icon_physique_1">Trois images avec le physique (100x100) :</label><br/> <input type="text" name="icon_physique_1" id="icon_physique_1" size="60" value="http://image.noelshack.com/fichiers/2017/29/7/1500845356-100x100.png" /><br/><br/> <input type="text" name="icon_physique_2" id="icon_physique_2" size="60" value="http://image.noelshack.com/fichiers/2017/29/7/1500845356-100x100.png" /><br/><br/> <input type="text" name="icon_physique_3" id="icon_physique_3" size="60" value="http://image.noelshack.com/fichiers/2017/29/7/1500845356-100x100.png" /><br/><br/> </center><br/><br/> <center> <label for="citation">Une citation pour le caractère</label> : <input type="text" name="citation" id="citation" maxlength="70" size="70" required /> </center><br/><br/> <center> <label for="icon_histoire">Une image pour l'histoire (100x100)</label> : <input type="text" name="icon_histoire" id="icon_histoire" size="60" value="http://image.noelshack.com/fichiers/2017/29/7/1500845356-100x100.png" /> </center><br/><br/> <center> <label for="icon_signature">Une signature pour couronner le tout (545x175)</label> : <input type="text" name="icon_signature" id="icon_signature" size="60" value="http://image.noelshack.com/fichiers/2017/29/7/1500845491-545x175.png" /> </center> </fieldset><br/><br/><br/> <center><input type="submit" name="post" value="Envoyer" /></center> </div> </form> </body> </html>

Merci beaucoup d'avoir pris le temps de lire cette requête.
En espérant recevoir une réponse.

par Scoubifitz Dim 1 Avr 2018 - 23:10

Bonjour,

Au début , je pensais que c'était le retour à la ligne au début du message :

est :

Code:: FicheForm.message.value = "<link rel='stylesheet' href='http://himawari.esy.es/onglet2.css' type='text/css'>"

devrait :

Code:: FicheForm.message.value = "<link rel='stylesheet' href='http://himawari.esy.es/onglet2.css' type='text/css'>"

puis j'ai aperçu un "+" manquant en fin de message ...

est :

Code:: + FicheForm.intrigue.value + "</br></br>" "[i]Quel est ton type de RP favori ?[/i] : "...

devrait :

Code:: + FicheForm.intrigue.value + "</br></br>" + "[i]Quel est ton type de RP favori ?[/i] : "...

par Physalis Dim 1 Avr 2018 - 23:18

Merci beaucoup pour votre réponse, Scoubifitz.
J'ai corrigé les erreurs mais ça m'affiche toujours le même problème, malheureusement...

par Scoubifitz Dim 1 Avr 2018 - 23:30

une autre boulette ...age_user / age_perso

Code:: .../... + FicheForm.age_user.value .../... <label for="age_user">Ton âge</label> : <input type="number" name="age_perso" id="age_perso" size="40px!important" required="" style="width: 40px!important;">

par Physalis Dim 1 Avr 2018 - 23:33

Merci de répondre une nouvelle fois, c'est vraiment gentil !
Mais encore une fois, le problème persiste. Le forum m'affiche qu'il faut entrer un message avant de poster

par Scoubifitz Dim 1 Avr 2018 - 23:54

En supprimant les deux return ? ... comme il n'y a pas de condition if ...

Code:: return true; .../... onSubmit="return postPresa(this)"

par Physalis Dim 1 Avr 2018 - 23:56

Cela ne semble pas fonctionner non plus... Mais merci encore de répondre présent à ma requête

par Scoubifitz Lun 2 Avr 2018 - 0:31

Code:: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Fiche de présentation</title> <link rel="stylesheet" href="formulaire.css" /> <style>input[type="number"] {width:50px;}</style> <script type="text/javascript"> function postPresa(FicheForm) { FicheForm.titre.value = "Présentation de " + FicheForm.nom_perso.value + " " + FicheForm.prenom_perso.value; FicheForm.message.value ="<link rel='stylesheet' href='http://himawari.esy.es/onglet2.css' type='text/css'/>" + "<div class='ficheprez'><div class='hautprez'><img src='" + FicheForm.icon_global.value + "'/><h1>" + FicheForm.nom_perso.value + " " + FicheForm.prenom_perso.value + "</h1>" + "<div><span>" + FicheForm.sexe.value + "</span><span>" + FicheForm.race.value + "</span><span>" + FicheForm.groupe.value + "</span><span style='overflow-x: auto;'>" + FicheForm.metier.value + "</span><span style='left:105px;'>" + FicheForm.origine.value + "</span><span style='left:105px;'>" + FicheForm.adresse.value + "</span></div></div>" + "<input checked='' name='ficheprez' id='physique' type='radio' /><input name='ficheprez' id='caractere' type='radio' /><input name='ficheprez' id='histoire' type='radio' /><input name='ficheprez' id='ecran' type='radio' /><div class='boutons'><label for='physique' class='lab phys'>Physique</label><label for='caractere' class='lab car' style='background: #5e5e5e;'>Caractère</label><label for='histoire' class='lab hist'>Histoire</label><label for='ecran' class='lab ecr' style='background: #5e5e5e;'>moi</label> </div>" + "<div class='interne'><div class='contenu phys'><img src='" + FicheForm.icon_physique_1.value + "' class='tourne'/><img src='" + FicheForm.icon_physique_2.value + "' class='tourne'/><img src='" + FicheForm.icon_physique_3.value + "' class='tourne'/><div class='phytext'>" + FicheForm.physique.value + "</div></div>" + "<div class='contenu car'><div class='citation'><span style='color:black; font-size:23px;'>“</span>" + FicheForm.citation.value + "<span style='color:black; font-size:23px;'>”</span></div>" + "<div class='catext'>" + FicheForm.caractere.value + "</div></div><div class='contenu hist'><span class='himage'>" + FicheForm.hist_titre.value + "</span><div class='circleimg' style='background: url(" + FicheForm.icon_histoire.value + ");'><img src='http://www.onlygfx.com/wp-content/uploads/2017/03/scribble-circle-7-300x289.png' style='border-radius: 250px;transform: rotate(0deg);width: 116px;height: 116px;margin-left: -13px;margin-top: -11px;box-shadow: 0px 0px 0px black;'/></div><div class='hitext'>" + FicheForm.histoire.value + "</div></div>" + "<div class='contenu ecr'><div class='me'>" + FicheForm.pseudo.value + "</div><div class='metext'>" + "[i]Feat de l'avatar[/i] : " + FicheForm.avatar_pers.value + " — " + FicheForm.avatar_manga.value + "<br/><br/>" + "[i]Ton âge[/i] : " + FicheForm.age_user.value + "<br/><br/>" + "[i]Souhaites-tu rejoindre l'une des intrigues disponibles ?[/i] : " + FicheForm.intrigue.value + "<br/><br/>" + "[i]Quel est ton type de RP favori ?[/i] : " + FicheForm.type_rp.value + "<br/><br/>" + "[i]Comment es-tu arrivé-e ici ?[/i] : " + FicheForm.arrivee.value + "<br/><br/>" + "[i]Que penses-tu du forum ?[/i] : " + FicheForm.avis.value + "<br/><br/>" + "[i]Un commentaire ? Une suggestion ?[/i] : " + FicheForm.commentaire.value + "</div><img class='meimg' src='" + FicheForm.icon_signature.value + "'/></div></div></div>"; } </script> </head> <body style="overflow: auto;"> <form action="/posting.forum" method="post" name="FicheForm" enctype="multipart/form-data" target="_blank" onSubmit="postPresa(this)"> <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" id="titre" value="" /> <input type="hidden" name="f" value="5" /> <div style="width: 555px; height: auto; border: solid black 1px; margin: 0 auto; padding: 10px; background:url(http://image.noelshack.com/fichiers/2018/13/7/1522588527-fond-mess.jpg)"> <center style="font-size: 3em">Fiche de présentation</center><br/><br/> <fieldset> <legend style="font-size: 1.5em">Informations sur le personnage</legend> <center> <label for="prenom_perso">Prénom</label> : <input type="text" name="prenom_perso" id="prenom_perso" size="10" autofocus required />       <label for="nom_perso">Nom</label> : <input type="text" name="nom_perso" id="nom_perso" size="10" required />       <label for="age_perso">Âge</label> : <input type="number" name="age_perso" id="age_perso" size="4" required /> </center><br/><br/> <center> <label for="metier">Métier</label> : <input type="text" name="metier" id="metier" size="10" required />         <label for="race">Race</label> : <select name="race" id="race"><option>Humain</option><option>Yōkaï</option></select>         <label for="sexe">Sexe</label> : <select name="sexe" id="sexe"><option>Homme</option><option>Femme</option></select> </center><br/><br/> <center> <label for="origine">Origine</label> : <input type="text" name="origine" id="origine" size="10" required />         <label for="adresse">Lieu de résidence</label> : <select name="adresse" id="adresse"> <option>Kyōto</option><option>Nin</option><option>Yō</option><option>Dō</option></select> </center><br/><br/> <center> <label for="groupe">Votre opinion sur les évenements</label> : <select name="groupe" id="groupe"> <option>Ningen no Shihai ni Yūri (pro domination humaine)</option><option>Yōkai no Shihai ni Yūri (pro domination Yōkai)</option><option>Dōsei ni Yūri (pro cohabitation)</option><option>Kōhei (Neutre)</option> </select> </center> </fieldset><br/><br/><br/> <fieldset> <legend style="font-size: 1.5em">La présentation</legend> <center> <label for="physique">Le physique :</label><br/> <textarea name="physique" id="physique" style="width: 90%; height: 400px; resize: none;">Une description physique d'au moins 10 lignes. Précisez la taille, la corpulence, la façon de marcher, de bouger, la voix et si yōkai précisez sa forme originale.</textarea> </center><br/><br/> <center> <label for="caractere">Le caractère :</label><br/> <textarea name="caractere" id="caractere" style="width: 90%; height: 400px; resize: none;">Une description du caractère d'au moins 15 lignes. Parlez-nous de ses défauts, de ses qualités, de ses traits dominants, de ses peurs... Précisez l'opinion du personnage sur ce projet de cohabitation Oni/humain.</textarea> </center><br/><br/> <center> <label for="histoire">L'histoire :</label><br/> <label for="hist_titre">Son titre</label> : <input type="text" name="hist_titre" id="hist_titre" size="50" /><br/> <textarea name="histoire" id="histoire" style="width: 90%; height: 400px; resize: none;">L'histoire de votre personnage peut faire 10 lignes du moment que vous mettez les grands détails de sa vie dont la raison pour laquelle votre personnage s'est retrouvé dans cette école. Les Oni peuvent raconter leur vie à l'école primaire et au collège. Veillez vous reporter à ce [url=http://himawari-no-yakusoku.forumactif.com/t9-les-Oni-que-sont-ils#10]sujet[/url] si vous ne l'avez pas encore fait.</textarea> </center><br/><br/> </fieldset><br/><br/><br/> <fieldset> <legend style="font-size: 1.5em">Le joueur (oui, toi)</legend> <center> <label for="pseudo">Ton pseudo</label> : <input type="text" name="pseudo" id="pseudo" size="10" required />       <label for="age_user">Ton âge</label> : <input type="number" name="age_user" id="age_user" size="40px!important" required="" style="width: 40px!important;"/> </center><br/><br/> <center> Provenance de l'avatar : <br/> <label for="avatar_pers">Personnage</label> : <input type="text" name="avatar_pers" id="avatar_pers" size="20" />         <label for="avatar_manga">Source</label> : <input type="text" name="avatar_manga" id="avatar_manga" size="10" /> </center><br/><br/> <center> <label for="intrigue">Souhaites-tu rejoindre l'une des intrigues disponibles ? Laquelle ?</label> <input type="text" name="intrigue" id="intrigue" size="50" /> </center><br/><br/> <center> <label for="type_rp">Ton type de RP favori</label> : <input type="text" name="type_rp" id="type_rp" size="50" placeholder="Drame, romance, action, thriller..." /> </center><br/><br/> <center> <label for="arrivee">Comment es-tu arrivé-e ici ?</label> <input type="text" name="arrivee" id="arrivee" size="60" /> </center><br/><br/> <center> <label for="avis">Ton avis sur le forum :</label><br/> <textarea name="avis" id="avis" style="width: 80%; height: 60px; resize: none"></textarea> </center><br/><br/> <center> <label for="commentaire">Un commentaire ? Une suggestion ?</label> <textarea name="commentaire" id="commentaire" style="width: 80%; height: 60px; resize: none"></textarea> </center> </fieldset><br/><br/><br/> <fieldset> <legend style="font-size: 1.5em">Le design de la fiche</legend> Précision : il faut mettre les liens des images.<br/><br/> <center> <label for="icon_global">Une petite image en haut de ta fiche (75x75)</label> : <input type="text" name="icon_global" id="icon_global" size="60" required /> </center><br/><br/> <center> <label for="icon_physique_1">Trois images avec le physique (100x100) :</label><br/> <input type="text" name="icon_physique_1" id="icon_physique_1" size="60" value="http://image.noelshack.com/fichiers/2017/29/7/1500845356-100x100.png" /><br/><br/> <input type="text" name="icon_physique_2" id="icon_physique_2" size="60" value="http://image.noelshack.com/fichiers/2017/29/7/1500845356-100x100.png" /><br/><br/> <input type="text" name="icon_physique_3" id="icon_physique_3" size="60" value="http://image.noelshack.com/fichiers/2017/29/7/1500845356-100x100.png" /><br/><br/> </center><br/><br/> <center> <label for="citation">Une citation pour le caractère</label> : <input type="text" name="citation" id="citation" maxlength="70" size="70" required /> </center><br/><br/> <center> <label for="icon_histoire">Une image pour l'histoire (100x100)</label> : <input type="text" name="icon_histoire" id="icon_histoire" size="60" value="http://image.noelshack.com/fichiers/2017/29/7/1500845356-100x100.png" /> </center><br/><br/> <center> <label for="icon_signature">Une signature pour couronner le tout (545x175)</label> : <input type="text" name="icon_signature" id="icon_signature" size="60" value="http://image.noelshack.com/fichiers/2017/29/7/1500845491-545x175.png" /> </center> </fieldset><br/><br/><br/> <center><input type="submit" name="post" value="Envoyer" /></center> </div> </form> </body> </html>

par Physalis Lun 2 Avr 2018 - 0:32

Oh merci ! Ça fonctionne, c'est génial ! Merci beaucoup !

Problème d'affichage avec mon générateur de fiche de présentation