FORMULAIRE: Mise en forme des champs remplis

[zackes]

Bonjour,

J'ai créer un formulaire "Nouveau sujet" et j'ai trois questions.

1/ Comment ne pas afficher les titres des champs à part les remplacer par un espace entre les "" (FORMUL.A, FORMUL.B ETC...)
2/ Comment mettre et gras les champs remplis
exemple:

Code:

" <strong>FORMUL.A</strong> " + form.champ1.value

-J'informe le champ par mon pseudo ce qui fait, une fois validé
FORMUL.A zackes
Je souhaiterais que cela n'affiche uniquement "zackes" et en gras une fois que le formulaire est envoyé
La seul solution de supprimer "FORMUL.A" pour l'instant, a était de faire

Code:

"  " + form.champ1.value


3/ Le dernier champ sert à détailler le sujet par de longues phrases,
y a t-il un code qui permettrait de pouvoir faire apparaître les bouton de mise en forme du texte écris (couleurs, gras, souligner, joindre une photo etc? ou la personne devra éditer sont poste envoyé pour le mettre dans la forme souhaité?

Ci dessous mon formulaire.
Je vous remercie.

Code:

<style>
    #coc {
    text-align: center;
    }
    </style> <script type="text/javascript" src="http://tinyurl.com/var-fa"></script><script type="text/javascript">
    function envoiMessage(form)
    {
    var txt_message =
    
    " <strong>FORMUL.A</strong> " + form.champ1.value + "\n"
    + " <strong>FORMUL.B :</strong> " + form.champ2.value + "\n"
    + " <strong>FORMUL.C :</strong> " + form.champ3.value + "\n"
    + " <strong>FORMUL.D :</strong> " + form.champ4.value + "\n\n"
    + " <strong>DETAIL :</strong> " + form.champ5.value ;
         
    form.message.value = txt_message;
    }
    </script>        
    <form action="/post" method="post" name="post" enctype="multipart/form-data" onsubmit="envoiMessage(this)" id="coc">
            <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="26" />
            <input type="hidden" name="subject" id="titre" value="" />
                                                                     
 <p> style="text-align: center;">
            <label><img src="https:adressedemonimage.jpg" /><br /></label>
 </p>

 <p>
            <label for="titre">Titre du sujet :</label><input type="text" name="subject" id="titre" value="" size="45" maxlength="60" required="required"  />
                                                                                                                                                                              
 <p>
            <label>FORMUL.A : </label><br /><select id="champ1" name="champ1"><option>01</option><option>02</option><option>03</option><option>04</option></select>
 </p>
                              
 <p>
            <label>FORMUL.B :  </label><br /><input type="text" required="required" name="champ2" id="champ2" size="30" />
 </p>
                                    
 <p>
            <label>FORMUL.C :  </label><br /><input type="text" required="required" size="30" id="champ3" name="champ3" />
 </p>

 <p>
            <label>FORMUL.D :  </label><br /><input type="text" required="required" size="30" id="champ4" name="champ4" />
 </p>
                                          
 <p>
            <label>DETAIL  </label><br /><textarea cols="50" required="required" rows="3" name="champ5" id="champ5"></textarea>
   <p>

            <input type="submit" value="Envoyez" name="post" />                            
 </p>
                        
</form>

[zackes]

Up!

[zackes]

Bonjour,

J'ai avancé dans mon problème de ne pas afficher les labels en y mettant uniquement les champs remplis et en gras par

Code:

" <strong>" + form.champ1.value + "\n"
    + " " + form.champ2.value + "\n"
    + " " + form.champ3.value + "\n"
    + " " + form.champ4.value + "</strong>\n\n"
    + " DETAIL : " + form.champ5.value ;

Il me manque plus que de pouvoir disposer les boutons de mise forme du texte (textarea) et voir aussi permettre d'ajouter une photo pour le champs5 "DETAIL"

Merci.

[zackes]

up!

[zackes]

Au cas ou vous n'auriez pas compris, je souhaiterais avoir le même format que réponse rapide avec mise en forme du texte dans le textarea si c'est possible  

[zackes]

UP!

Je cherche également comment insérer une valeurs d'un champ (même de deux) dans la description du sujet mais je ne trouve pas la bon code.
J'ai ajouté un input mais pas de label parce qu'il ne doit pas apparaitre dans le formulaire

Code:

<input type="hidden" name="description" id="champ1??" value="??" />

-Est-ce qu'il faut pas remplacer le "type" et supprimer "value"?
-Comment faire apparaitre la valeur du champ1 (et voir aussi la valeur du champ2) dans la description du sujet? car si je met un mot ou même l'id dans value le mot ou le nom de id est bien recopier mais pas ce qui a était remplis dans le formulaire.

Merci

[zackes]

Bonjour,
J'ai réglé ma question supplémentaire dans mon dernier message en modifiant

Code:

<input type="hidden" name="description" id="champ1??" value="??" />

par

Code:

<input type="hidden" value="" name="description" />

et à ajouté

Code:

form.description.value = form.champ1.value + " " + form.champ2.value;

Juste apres la ligne 16, ce qui donne

Code:

"  <strong>" + form.champ1.value + "\n"
    + " " + form.champ2.value + "\n"
    + " " + form.champ3.value + "\n"
    + " " + form.champ4.value + "</strong>\n\n"
    + " " + form.champ5.value ;
      
    form.message.value = txt_message;    
    
form.description.value = form.champ1.value + " " + form.champ2.value;
}
    
     </script>        
<form id="coc" onsubmit="envoiMessage(this)" enctype="multipart/form-data" name="post" method="post" action="/post">
<input type="hidden" value="0" name="lt" />
<input type="hidden" value="newtopic" name="mode" />  
<input type="hidden" checked="checked" value="0" name="topictype" />  
<input type="hidden" value="" name="message" />  
<input type="hidden" value="17" name="f" />  
<input type="hidden" value="" id="titre" name="subject" />
<input type="hidden" value="" name="description" />

Reste à savoir si il existe un code permettant de disposer la mise en forme ou affecter le même cadre que "réponse rapide" avec les boutons dans le textarea

[zackes]

Bonsoir,

J'ai donc trouver code me permettant d'avoir tout les boutons (sauf le bouton smilley) dans le testarea que j'ai disposer à la suite de la totalité, donc juste après "envoyez"  

Le seul problème est que le message disparaît lors de la validation du formulaire (les autres champs apparaissent et ce valide bien)

Seriez-vous se qui cloche svp? car sans ce script pour avoir les boutons, le message s'affiche et se valide bien.

Merci

   

Code:

<style>
        #coc {
        text-align: center;
        }
        </style>
<script type="text/javascript" src="http://tinyurl.com/var-fa"></script><script type="text/javascript">
        function envoiMessage(form)
        {
        var txt_message =
        
            "  <strong>" + form.champ1.value + "\n"
        + " " + form.champ2.value + "\n"
        + " " + form.champ3.value + "</strong>\n\n"
        + " " + form.message.value ;
         form.message.value = txt_message;    
         form.description.value = form.champ1.value + " " + form.champ2.value + " " + form.champ3.value;
    }    </script>
       
    <form id="coc" onsubmit="envoiMessage(this)" enctype="multipart/form-data" name="post" method="post" action="/post">
    <input type="hidden" value="0" name="lt" />
    <input type="hidden" value="newtopic" name="mode" />  
    <input type="hidden" checked="checked" value="0" name="topictype" />  
    <input type="hidden" value="" name="message" />  
    <input type="hidden" value="17" name="f" />  
    <input type="hidden" value="" id="titre" name="subject" />
    <input type="hidden" value="" name="description" />
                                                                          
     <p> style="text-align: center;">
                <label><img src="https:adressedemonimage.jpg" /><br /></label>
     </p>
     <p>
                <label for="titre">Titre du sujet :</label><input type="text" name="subject" id="titre" value="" size="45" maxlength="60" required="required"  />
        
     <p>
                <label>FORMUL.A : </label><br /><select id="champ1" name="champ1"><option>01</option><option>02</option><option>03</option><option>04</option></select>
     </p>
                                  
     <p>
                <label>FORMUL.B :  </label><br /><input type="text" required="required" name="champ2" id="champ2" size="30" />
     </p>
                                        
     <p>
                <label>FORMUL.C :  </label><br /><input type="text" required="required" size="30" id="champ3" name="champ3" />
     </p>
    
     <p>
                <label>FORMUL.D :  </label><br /><input type="text" required="required" size="30" id="champ4" name="champ4" />
     </p>
                                              
     <p>
                <label>DETAIL  </label><br /><textarea cols="50" required="required" rows="3" name="message" id="text_editor_textarea"></textarea>
       <p>
                <input type="submit" value="Envoyez" name="post" />                            
     </p>                            
    </form>

<link rel="stylesheet" href="https://illiweb.com/rs3/41/frm/SCEditor/src/themes/fa.default.min.css" type="text/css" media="all" />      
  <style type="text/css">
            .sceditor-button-flash div      { background-position: 0 -628px; }
            .sceditor-button-servimg div    { background-position: 0 -644px; }
            .sceditor-button-dailymotion div{ background-position: 0 -660px; }
            .sceditor-button-faspoiler div  { background-position: 0 -676px; }
            .sceditor-button-fahide div     { background-position: 0 -692px; }
            .sceditor-button-fascroll div   { background-position: 0 -708px; }
            .sceditor-button-faupdown div   { background-position: 0 -724px; }
            .sceditor-button-farand div     { background-position: 0 -756px; }
            .sceditor-button-faroll div     { background-position: 0 -772px; }
            .sceditor-button-more div       { background-position: 0 -788px; }
            .sceditor-button-emoticon div   { background-position: 0 -804px; }
            .sceditor-button-headers div    { background-position: 0 -820px; }
        </style>        
  <script src="https://illiweb.com/rs3/41/frm/jquery/cookie/jquery.cookie.js" type="text/javascript"></script>        
  <script src="https://illiweb.com/rs3/41/frm/SCEditor/src/jquery.sceditor.js" type="text/javascript"></script>        
  <script src="https://illiweb.com/rs3/41/frm/SCEditor/src/plugins/bbcode.js" type="text/javascript"></script>        
  <script src="https://illiweb.com/rs3/41/frm/SCEditor/src/sceditor-commands.js" type="text/javascript"></script>        
  <script src="https://illiweb.com/rs3/41/frm/SCEditor/src/sceditor-commands-bbcode.js" type="text/javascript">
  </script><script src="https://illiweb.com/rs3/41/frm/SCEditor/src/sceditor-custom-bbcode.js" type="text/javascript"></script>            
  <script charset="UTF-8" type="text/javascript">
                (function ($) {
                    'use strict';

                    $.sceditor.locale["fr"] = {
                        "Bold"                       : "Gras",
                        "Italic"                     : "Ital.",
                        "Underline"                  : "Soulig.",
                        "Strikethrough"              : "Barré",

                        "Align left"                 : "Aligné à gauche",
                        "Center"                     : "Centré",
                        "Align right"                : "Aligné à droite",
                        "Justify"                    : "Justifié",

                        "Bullet list"                : "-Liste",
                        "Numbered list"              : "Liste ordonnée",
                        "Insert a horizontal rule"   : "Insérer une ligne",

                        "Insert a Quote"             : "'Citer'",
                        "Code"                       : "Code",
                        "Spoiler"                    : "Spoiler",
                        "Hidden"                     : "Caché",
                        "Insert a table"             : "Insérer un tableau",

                        "Host an image"              : "Héberger une image",
                        "Insert an image"            : "Insérer une image",
                        "Insert an email"             : "Insérer un e-mail",
                        "Insert a link"              : "Insérer un lien",
                        "Unlink"                     : "Supprimer un lien",
                        "Insert a YouTube video"     : "Insérer une vidéo Youtube",
                        "Insert a Dailymotion Video" : "Insérer une Vidéo Dailymotion",
                        "Flash"                      : "Flash",

                        "Format Headers"             : "Format des titres",
                        "Font Size"                  : "Taille Police",
                        "Font Color"                 : "Couleur",
                        "Font Name"                  : "Police",
                        "Remove Formatting"          : "Supprimer le formatage du texte",

                        "Subscript"                  : "Indice",
                        "Superscript"                : "Exposant",

                        "Horizontal scrolling"       : "Défilement horizontal",
                        "Vertical scrolling"         : "Défilement vertical",
                        "Random"                     : "Aléatoire",
                        "Dices roll"                 : "Lancer de dés",

                        "Insert an emoticon"         : "Smileys",
                        "Insert current date"        : "Date actuelle",
                        "Insert current time"        : "Heure actuelle",
                        "Paste Text"                 : "Insérer du texte sans formatage",
                        "Switch Editor Mode"         : "Basculer le mode d'édition",

                        "color_dark_red"    : "Rouge foncé",
                        "color_red"         : "Rouge",
                        "color_orange"      : "Orange",
                        "color_brown"       : "Marron",
                        "color_yellow"      : "Jaune",
                        "color_green"       : "Vert",
                        "color_olive"       : "Olive",
                        "color_cyan"        : "Cyan",
                        "color_blue"        : "Bleu",
                        "color_dark_blue"   : "Bleu foncé",
                        "color_indigo"      : "Indigo",
                        "color_violet"      : "Violet",
                        "color_grey"        : "Gris",
                        "color_white"       : "Blanc",
                        "color_black"       : "Noir",

                        "More"                       : "Plus/Moins de boutons",
                        "Insert"                                    : "Insérer",
                        "URL:"                                      : "URL",
                        "Invalid YouTube video"                     : "Vidéo invalide",
                        "Author (optional)"                         : "Auteur (Optionnel)",
                        "Title (optional)"                          : "Titre (Optionnel)",
                        "Cols:"                                     : "Colonnes",
                        "Rows:"                                     : "Lignes",
                        "Width (optional):"                         : "Largeur (optionnelle)",
                        "Height (optional):"                        : "Hauteur (optionnelle)",
                        "Description (optional):"                   : "Description (Optionnelle)",
                        "Paste your text inside the following box:" : "Collez votre texte à l'intérieur de ce bloc",
                        "Border"                                    : "Bordure (px)",

                        "dateFormat": "day.month.year"
                    };
                })(jQuery);
</script>        
  <script type="text/javascript">
            var servImgAccount = '';
            var servImgId = '';
            var servImgF = '';
            var servImgMode = 'fae';
            var plugins = '';
            var palette = 1;
            var illiweb = 'https://illiweb.com/';
            var locale = 'fr';
            var height = '350';
            var plugin = 'bbcode';
            var toolbar = 'bold,italic,underline,strike|left,center,right,justify|bulletlist,orderedlist,horizontalrule|quote,code,faspoiler,fahide,table|servimg,image,link,youtube,dailymotion,flash|headers,size,color,font,removeformat|more|subscript,superscript|fascroll,faupdown,farand|date,time,pastetext,source';
            var cssFile = 'https://illiweb.com/rs3/41/frm/SCEditor/minified/jquery.sceditor.default.min.css';
            var isRtl = 0;
            var dice = new Array();
            var bSourceMode = false;
            var emoticonsEnabled = 1;
            var smileys =  {":welcom:": "https://2img.net/u/3715/70/66/12/smiles/395291413.gif",":smiley11:": "https://2img.net/u/3715/70/66/12/smiles/3631604560.gif",":D": "https://2img.net/i/fa//i/smiles/icon_biggrin.png",":)": "https://2img.net/i/fa//i/smiles/icon_smile.gif",";)": "https://2img.net/i/fa//i/smiles/icon_wink.gif",":cry:": "https://2img.net/i/fa//i/smiles/icon_cry.gif",":(": "https://2img.net/i/fa//i/smiles/icon_sad.gif",":o": "https://2img.net/i/fa//i/smiles/icon_surprised.gif",":shock:": "https://2img.net/i/fa//i/smiles/icon_eek.gif",":|": "https://2img.net/i/fa//i/smiles/icon_neutral.gif",":smiley5:": "https://2img.net/u/3715/70/66/12/smiles/738265957.gif",":lol:": "https://2img.net/i/fa//i/smiles/icon_lol.gif",":smiley30:": "https://2img.net/u/3715/70/66/12/smiles/2692191184.gif",":smiley27:": "https://2img.net/u/3715/70/66/12/smiles/203019512.gif",":reflechi:": "https://2img.net/u/3715/70/66/12/smiles/1227603964.gif",":smiley14:": "https://2img.net/u/3715/70/66/12/smiles/3849352156.gif",":smiley28:": "https://2img.net/u/3715/70/66/12/smiles/1129063127.gif",":smiley25:": "https://2img.net/u/3715/70/66/12/smiles/3483653445.gif",":smiley15:": "https://2img.net/u/3715/70/66/12/smiles/572056779.gif",":lol!:": "https://2img.net/i/fa//i/smiles/lol.gif",":912368:": "https://2img.net/u/3715/70/66/12/smiles/4105964380.gif",":ouiii:": "https://2img.net/u/3715/70/66/12/smiles/1483053370.gif",":smiley16:": "https://2img.net/u/3715/70/66/12/smiles/1826964080.gif",":smiley18:": "https://2img.net/u/3715/70/66/12/smiles/603366044.gif",":smiley19:": "https://2img.net/u/3715/70/66/12/smiles/2519837621.gif",":smiley20:": "https://2img.net/u/3715/70/66/12/smiles/2321067895.gif",":scratch:": "https://2img.net/i/fa//i/smiles/icon_scratch.png",":smiley21:": "https://2img.net/u/3715/70/66/12/smiles/2489392408.gif",":x": "https://2img.net/i/fa//i/smiles/icon_mad.gif",":roll:": "https://2img.net/i/fa//i/smiles/icon_rolleyes.gif",":no:": "https://2img.net/i/fa//i/smiles/kopfschuettel.gif",":suspect:": "https://2img.net/i/fa//i/smiles/suspect.gif",":smiley29:": "https://2img.net/u/3715/70/66/12/smiles/3695321689.png",":batte:": "https://2img.net/u/3715/70/66/12/smiles/3021664327.gif",":police:": "https://2img.net/u/3715/70/66/12/smiles/2351992079.gif",":smiley24:": "https://2img.net/u/3715/70/66/12/smiles/1215499965.gif",":cheers:": "https://2img.net/i/fa//i/smiles/icon_cheers.png",":P": "https://2img.net/i/fa//i/smiles/icon_razz.gif",":SIFFLE:": "https://2img.net/u/3715/70/66/12/smiles/1767706618.gif",":oops:": "https://2img.net/i/fa//i/smiles/icon_redface.gif",":affraid:": "https://2img.net/i/fa//i/smiles/affraid.gif",":smiley1:": "https://2img.net/u/3715/70/66/12/smiles/2793116791.gif",":smiley3:": "https://2img.net/u/3715/70/66/12/smiles/1797103096.gif",":poucehaut:": "https://2img.net/u/3715/70/66/12/smiles/2244193228.gif",":xiexie:": "https://2img.net/u/3715/70/66/12/smiles/46254937.gif",":smiley12:": "https://2img.net/u/3715/70/66/12/smiles/2778461555.gif",":smiley9:": "https://2img.net/u/3715/70/66/12/smiles/911290450.gif",":smiley22:": "https://2img.net/u/3715/70/66/12/smiles/4007841570.gif",":smiley2:": "https://2img.net/u/3715/70/66/12/smiles/1173428215.gif",":avo:": "https://2img.net/u/3715/70/66/12/smiles/60814440.gif",":smiley6:": "https://2img.net/u/3715/70/66/12/smiles/231046675.gif",":smiley8:": "https://2img.net/u/3715/70/66/12/smiles/970992973.gif",":prie:": "https://2img.net/u/3715/70/66/12/smiles/1736337296.gif",":smiley10:": "https://2img.net/u/3715/70/66/12/smiles/2448745675.gif",":smiley7:": "https://2img.net/u/3715/70/66/12/smiles/3783310023.gif",":evil:": "https://2img.net/i/fa//i/smiles/icon_evil.gif",":twisted:": "https://2img.net/i/fa//i/smiles/icon_twisted.gif",":smiley4:": "https://2img.net/u/3715/70/66/12/smiles/4127287663.gif",":smiley23:": "https://2img.net/u/3715/70/66/12/smiles/2192927501.gif",":smiley26:": "https://2img.net/u/3715/70/66/12/smiles/3939200210.gif",":guillemet:": "https://2img.net/u/3715/70/66/12/smiles/1449282171.gif",":sleep:": "https://2img.net/i/fa//i/smiles/sleep.gif",":smiley13:": "https://2img.net/u/3715/70/66/12/smiles/2801107601.gif","8)": "https://2img.net/i/fa//i/smiles/icon_cool.gif",":santa:": "https://2img.net/i/fa//i/smiles/icon_santa.png",":?:": "https://2img.net/i/fa//i/smiles/icon_question.gif",":!:": "https://2img.net/i/fa//i/smiles/icon_exclaim.gif",":idea:": "https://2img.net/i/fa//i/smiles/icon_idea.png",":arrow:": "https://2img.net/i/fa//i/smiles/icon_arrow.gif",":motard1:": "https://2img.net/u/3715/70/66/12/smiles/1259392357.gif",":motard2:": "https://2img.net/u/3715/70/66/12/smiles/2978054052.gif",":motard3:": "https://2img.net/u/3715/70/66/12/smiles/1755258347.gif",":motard4:": "https://2img.net/u/3715/70/66/12/smiles/2302048014.gif",":motard5:": "https://2img.net/u/3715/70/66/12/smiles/1574088102.gif",":face:": "https://2img.net/i/fa//i/smiles/fresse.png",":cyclops:": "https://2img.net/i/fa//i/smiles/icon_cyclops.gif",":pirat:": "https://2img.net/i/fa//i/smiles/icon_pirat.png",":tongue:": "https://2img.net/i/fa//i/smiles/icon_tongue.png",":silent:": "https://2img.net/i/fa//i/smiles/icon_silent.png",":pale:": "https://2img.net/i/fa//i/smiles/icon_pale.gif",":rabbit:": "https://2img.net/i/fa//i/smiles/icon_rabbit.png",":bounce:": "https://2img.net/i/fa//i/smiles/icon_bounce.gif",":joker:": "https://2img.net/i/fa//i/smiles/icon_jokercolor.png"};
            var iframeSrc = '/smilies.forum?mode=smilies_frame&t=1540573545';
            var illiwebDomain = 'https://illiweb.com/';
            var servimgDomain = 'servimg.com';
            var INTRANET = 0;
        </script>
<script src="https://illiweb.com/rs3/41/frm/SCEditor/src/instance-sceditor.js" type="text/javascript"></script>
    

[zackes]

Bonjour,

J'ai supprimé le champ4 et renommé "champ5" par "message" l'id du testarea "champ5" par "text_editor_textarea"

Code:

+ " " + form.message.value ;

Code:

<p>
            <label>DETAIL  </label><br /><textarea cols="50" required="required" rows="3" name="message" id="text_editor_textarea"></textarea>
      <p>

J' n'ai toujours pas le bouton icon, je me retrouve avec le plug Tynipiv au lieu de servimg pour envoyer les images et les champs ne copie pas dans le textarea mais c'est pas bien grave vue qu'ils s'affiches bien dans la desrcipition via le code

Code:

form.description.value = form.champ1.value + " " + form.champ2.value + " " + form.champ3.value;

Le met tout de même le sujet comme résolu.