Problème avec mon formulaire

par Mahora Dim 4 Juin 2017 - 2:26

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,
Voilà, j'ai fait un formulaire qui fonctionne, mais le souci c'est que j'aurai aimé que les champs où il n'y a pas de réponse ne s'affiche pas si possible. Du genre le champs "votre avis", s'ils ne mettent rien je voudrais que cela n’apparaît pas dans le message une fois posté, mais il y en a d'autre en gros tous ceux qui ne sont pas obligatoire. Je ne sais pas si j'ai vraiment réussi à me faire comprendre, mais n'hésitez pas à demander si vous n'avez pas tout compris.
Je vous laisse mon formulaire, merci d'avance.

Code:: <!DOCTYPE html> <html> <head> <link href='https://fonts.googleapis.com/css?family=Poiret+One|Shadows+Into+Light|PT+Sans+Narrow' rel='stylesheet' type='text/css'> <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,400i,600,600i,700,700i" rel="stylesheet"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> .backsm { background: none; background-position: center; margin:auto; } .titresm { margin: auto; margin-top: 20px; margin-bottom: 30px; padding: 30px; width: 60%; text-align: center; color: #9e276d; font-family: 'Poiret One', cursive; font-size: 60px; text-shadow: 0px 0px 15px #be408a; line-height: 40px; border-top: 3px solid #9e276d; border-bottom: 3px solid #9e276d; } .cadre1sm { width: 675px; height: auto; background-color: none; background-color: none; border:1px solid #9e276d; vertical-align: middle; } .imgsm img { width: 250px; height: auto; } .imgsm { padding : 20px 20px 20px 20px; vertical-align: middle; } .presentationsm { padding-left : 20px; padding-right: 30px; font-family: 'Josefin Sans', sans-serif; font-size: 15px; color: 9e276d; text-shadow: 0px 0px 3px #be408a; vertical-align: middle; height:100%; } .presentationsm p { margin:-9px; } .titreresumesm { margin: auto; margin-top: 20px; margin-bottom: 20px; padding: 20px; width: 40%; text-align: center; color: #9e276d; font-family: 'Poiret One', cursive; font-size: 40px; text-shadow: 0px 0px 15px #be408a; border-bottom: 2px solid #9e276d; } .cadre2sm { width: 600px; height: auto; background-color: none; border:1px solid #9e276d; } .resumesm { padding: 20px 20px 20px 20px; font-family: 'Josefin Sans', sans-serif; font-size: 16px; color: 9e276d; text-shadow: 0px 0px 3px #be408a; text-align: justify; } .titreavissm { margin: auto; margin-top: 20px; margin-bottom: 20px; padding: 20px; width: 40%; text-align: center; color: #9e276d; font-family: 'Poiret One', cursive; font-size: 40px; text-shadow: 0px 0px 15px #be408a; border-bottom: 2px solid #9e276d; } .avissm { padding: 20px 20px 20px 20px; font-family: 'Josefin Sans', sans-serif; font-size: 16px; color: 9e276d; text-shadow: 0px 0px 3px #be408a; text-align: justify; } </style> <script type="text/javascript" src="http://tinyurl.com/var-fa"></script> <script type="text/javascript"> function envoiMessage(form) { //le formulaire qui remplace la page de création de sujet habituelle var txt_message = "<div class='backsm'>\n" + "<div class='titresm'>"+ form.titremangasm.value +"</div>\n" + "<center><table class='cadre1sm'>\n" + "<tr><td><div class='imgsm'><img src='"+ form.imgsm.value +"'/></div></td>\n" + "<td><div class='presentationsm'><p><b>♥ Titre original : </b>"+ form.titreorism.value +" </p>\n" + "<p><b>♥ Origine : </b>"+ form.originesm.value +" </p>\n" + "<p><b>♥ Année VF : </b>"+ form.anneevfsm.value +" </p>\n" + "<p><b>♥ Type : </b>"+ form.typesm.value +" </p>\n" + "<p><b>♥ Genres : </b>"+ form.genresm.value +" </p>\n" + "<p><b>♥ Auteur : </b>"+ form.auteursm.value +" </p>\n" + "<p><b>♥ Éditeur VO : </b>"+ form.editeurvosm.value +" </p>\n" + "<p><b>♥ Éditeur VF : </b>"+ form.editeurvfsm.value +" </p>\n" + "<p><b>♥ Prépublié dans : </b>"+ form.prepubliesm.value +" </p>\n" + "<p><b>♥ Nombre de volumes VO : </b>"+ form.nbvolvosm.value +" </p>\n" + "<p><b>♥ Nombre de volumes VF : </b>"+ form.nbvolvfsm.value +" </p>\n" + "<p><b>♥ Prix public : </b>"+ form.prixsm.value +" </p>\n" + "<p><b>♥ Âge conseillé : </b>"+ form.agesm.value +" </p>\n" + "<p><b>♥ Pour public averti : </b>"+ form.publicsm.value +" </p>\n" + "<p><b>♥ Se trouve dans le commerce en France : </b>"+ form.commercesm.value +" </p>\n" + "<p><b>♥ Existe en anime : </b>"+ form.adapanimesm.value +" </p>\n" + "</div></td></tr></table></center>\n" + "<div class='titreresumesm'>Résumé</div>\n" + "<center><div class='cadre2sm'>\n" + "<div class='resumesm'>"+ form.resumesm.value +" </div></div></center>\n" + "<div class='titreavissm'>Votre avis</div>\n" + "<center><div class='cadre2sm'>\n" + "<div class='avissm'>"+ form.avissm.value +" </div></div></center>\n" + "</div><br/>\n"; // Insère le texte construit dans le champ caché "message" du formulaire form.message.value = txt_message; } </script> </head> <body> <center> <form action="/post" method="post" name="post" enctype="multipart/form-data" onSubmit="envoiMessage(this)"> <input type="hidden" name="lt" value="0" /> <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="f" value="22" />  <label for="titre">Titre du sujet : (Mettez le titre du manga)</label> <input type="text" name="subject" id="titre" size="40"/> <br/><br/>(Pour bien remplir tous les champs, allez sur le site nautiljon par exemple vous aurez toutes les réponses. Si vous ne trouvez pas, ne mettez rien.) <br /><br /> <div class="backsm"><div class="titresm"> <label for="titremangasm"><strong>Titre du manga : </strong> </label> <input name="titremangasm" type="text" id="tritremangasm" required="required" /></div> <center><table class="cadre1sm"><tr><td><div class="imgsm"> <label for="imgsm"><strong>Lien de l'image : </strong> </label> <input name="imgsm" type="text" id="imagsm" required="required" /><br/>(Attention, il faut une<br/> image en format portrait,<br/> par exemple la couverture du tome 01)</div></td> <td><div class="presentationsm"> <label for="titreorism"><strong>♥ Titre original : </strong> </label> <input name="titreorism" type="text" id="titreorism"/> <br/> <label for="originesm"><strong>♥ Origine : (Pays et année)</strong> </label> <input name="originesm" type="text" id="originesm"/> <br/> <label for="anneevfsm"><strong>♥ Année VF : </strong> </label> <input name="anneevfsm" type="text" id="anneevfsm"/> <br/> <label for="typesm"><strong>♥ Type : (Shojo, Shonen, Josei, Seinen, etc...)</strong> </label> <input name="typesm" type="text" id="typesm"/> <br/> <label for="genresm"><strong>♥ Genres : </strong> </label> <input name="genresm" type="text" id="genresm"/> <br/> <label for="auteursm"><strong>♥ Auteur : </strong> </label> <input name="auteursm" type="text" id="auteursm"/> <br/> <label for="editeurvosm"><strong>♥ Éditeur VO : </strong> </label> <input name="editeurvosm" type="text" id="editeurvosm"/> <br/> <label for="editeurvfsm"><strong>♥ Éditeur VF : </strong> </label> <input name="editeurvfsm" type="text" id="editeurvfsm"/> <br/> <label for="prepubliesm"><strong>♥ Prépublié dans : </strong> </label> <input name="prepubliesm" type="text" id="prepubliesm"/> <br/> <label for="nbvolvosm"><strong>♥ Nombre de volumes VO : (Indiqué s'il est (En cours) ou (Terminé) merci)</strong> </label> <input name="nbvolvosm" type="text" id="nbvolvosm"/> <br/> <label for="nbvolvfsm"><strong>♥ Nombre de volumes VF : (Indiqué s'il est (En cours) ou (Terminé) merci)</strong> </label> <input name="nbvolvfsm" type="text" id="nbvolvfsm"/> <br/> <label for="prixsm"><strong>♥ Prix public : </strong> </label> <input name="prixsm" type="text" id="prixsm"/> <br/> <label for="agesm"><strong>♥ Âge conseillé : </strong> </label> <input name="agesm" type="text" id="agesm"/> <br/> <label for="publicsm"><strong>♥ Pour public averti : </strong> </label> <input name="publicsm" type="text" id="publicsm"/> <br/> <label for="commercesm"><strong>♥ Se trouve dans le commerce en France : </strong> </label> <input name="commercesm" type="text" id="commercesm"/> <br/> <label for="adapanimesm"><strong>♥ Existe en anime : </strong> </label> <input name="adapanimesm" type="text" id="adapanimesm"/> </div></td></tr></table></center> <div class="titreresumesm">Résumé</div> <center><div class="cadre2sm"><div class="resumesm"> <label for="resumesm"><strong>Résumé : </strong> </label> <textarea name="resumesm" type="text" id="resumesm" rows="3" cols="60" required="required"></textarea></div></div></center> <div class="titreavissm">Votre avis :</div> <center><div class="cadre2sm"><div class="avissm"> <label for="avissm"><strong>Votre avis : </strong> </label> <textarea name="avissm" type="text" id="avissm" rows="3" cols="60"></textarea></div></div></center> </div> <br/><p><input type="submit" name="post" value="Envoyer" /></p><br/> </form> </center> </body> </html>

par **Walt** Lun 5 Juin 2017 - 15:13

Bonjour,

Remplacez cet extrait :

Code:: var txt_message = "<div class='backsm'>\n" + "<div class='titresm'>"+ form.titremangasm.value +"</div>\n" + "<center><table class='cadre1sm'>\n" + "<tr><td><div class='imgsm'><img src='"+ form.imgsm.value +"'/></div></td>\n" + "<td><div class='presentationsm'><p><b>♥ Titre original : </b>"+ form.titreorism.value +" </p>\n" + "<p><b>♥ Origine : </b>"+ form.originesm.value +" </p>\n" + "<p><b>♥ Année VF : </b>"+ form.anneevfsm.value +" </p>\n" + "<p><b>♥ Type : </b>"+ form.typesm.value +" </p>\n" + "<p><b>♥ Genres : </b>"+ form.genresm.value +" </p>\n" + "<p><b>♥ Auteur : </b>"+ form.auteursm.value +" </p>\n" + "<p><b>♥ Éditeur VO : </b>"+ form.editeurvosm.value +" </p>\n" + "<p><b>♥ Éditeur VF : </b>"+ form.editeurvfsm.value +" </p>\n" + "<p><b>♥ Prépublié dans : </b>"+ form.prepubliesm.value +" </p>\n" + "<p><b>♥ Nombre de volumes VO : </b>"+ form.nbvolvosm.value +" </p>\n" + "<p><b>♥ Nombre de volumes VF : </b>"+ form.nbvolvfsm.value +" </p>\n" + "<p><b>♥ Prix public : </b>"+ form.prixsm.value +" </p>\n" + "<p><b>♥ Âge conseillé : </b>"+ form.agesm.value +" </p>\n" + "<p><b>♥ Pour public averti : </b>"+ form.publicsm.value +" </p>\n" + "<p><b>♥ Se trouve dans le commerce en France : </b>"+ form.commercesm.value +" </p>\n" + "<p><b>♥ Existe en anime : </b>"+ form.adapanimesm.value +" </p>\n" + "</div></td></tr></table></center>\n" + "<div class='titreresumesm'>Résumé</div>\n" + "<center><div class='cadre2sm'>\n" + "<div class='resumesm'>"+ form.resumesm.value +" </div></div></center>\n" + "<div class='titreavissm'>Votre avis</div>\n" + "<center><div class='cadre2sm'>\n" + "<div class='avissm'>"+ form.avissm.value +" </div></div></center>\n" + "</div><br/>\n";

Par :

Code:: var txt_message = "<div class='backsm'>\n" + "<div class='titresm'>"+ form.titremangasm.value +"</div>\n" + "<center><table class='cadre1sm'>\n" + "<tr><td><div class='imgsm'><img src='"+ form.imgsm.value +"'/></div></td>\n" + "<td><div class='presentationsm'><p><b>♥ Titre original : </b>"+ form.titreorism.value +" </p>\n" + "<p><b>♥ Origine : </b>"+ form.originesm.value +" </p>\n" + "<p><b>♥ Année VF : </b>"+ form.anneevfsm.value +" </p>\n" + "<p><b>♥ Type : </b>"+ form.typesm.value +" </p>\n" + "<p><b>♥ Genres : </b>"+ form.genresm.value +" </p>\n" + "<p><b>♥ Auteur : </b>"+ form.auteursm.value +" </p>\n" + "<p><b>♥ Éditeur VO : </b>"+ form.editeurvosm.value +" </p>\n" + "<p><b>♥ Éditeur VF : </b>"+ form.editeurvfsm.value +" </p>\n" + "<p><b>♥ Prépublié dans : </b>"+ form.prepubliesm.value +" </p>\n" + "<p><b>♥ Nombre de volumes VO : </b>"+ form.nbvolvosm.value +" </p>\n" + "<p><b>♥ Nombre de volumes VF : </b>"+ form.nbvolvfsm.value +" </p>\n" + "<p><b>♥ Prix public : </b>"+ form.prixsm.value +" </p>\n" + "<p><b>♥ Âge conseillé : </b>"+ form.agesm.value +" </p>\n" + "<p><b>♥ Pour public averti : </b>"+ form.publicsm.value +" </p>\n" + "<p><b>♥ Se trouve dans le commerce en France : </b>"+ form.commercesm.value +" </p>\n" + "<p><b>♥ Existe en anime : </b>"+ form.adapanimesm.value +" </p>\n" + "</div></td></tr></table></center>\n" + "<div class='titreresumesm'>Résumé</div>\n" + "<center><div class='cadre2sm'>\n" + "<div class='resumesm'>"+ form.resumesm.value +" </div></div></center>\n"; if( form.avissm.value != "" ) { txt_message+= "<div class='titreavissm'>Votre avis</div>\n" + "<center><div class='cadre2sm'>\n" + "<div class='avissm'>"+ form.avissm.value +" </div></div></center>\n" + "</div><br/>\n"; }

Pour faire simple, on coupe la variable txt_message en deux pour que la dernière partie (l'avis) ne soit ajoutée que si le contenu du champ "avis" est différent de vide ( != "" ).

Il vous faut procéder de la sorte pour chaque champ que vous souhaitez ne pas afficher s'il n'est pas rempli.

Cordialement,
Walt

par Mahora Lun 5 Juin 2017 - 17:35

Bonjour et merci beaucoup Smile

Problème avec mon formulaire