Générer présentation via un formulaire

[Floramagic]

Bonjour, bonsoir !

Je sais, c'est un question pas mal demandée sur le forum... Et j'ai passé des heures à lire les sujets résolus, et à essayer - en vain.
Donc, je cherche à faire un formulaire, qui posterai un nouveau sujet avec le code rempli. Jusque là, tout va bien, j'ai réussis à avoir un code qui me poste le texte au bon endroit.
Ce qui plante tout mon code, c'est au moment où je change le contenu de la var txt_message... Je dois vraiment mal m'y prendre, si bien que quand je fais envoyé sur le formulaire, ça m’envoie sur une page d'écriture du sujet disant que je ne peux pas poster car je n'ai rien écrit dans le sujet...

Je vous montre un des codes que j'ai pris et modifié.

Code:

    <script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
    <script type="text/javascript">
    function envoiMessage(form)
    {
    // Créer un message à partir des informations fournies
    var txt_message = "<center><table style='position: relative; top: 45px; width: 450px; z-index: 0; height: 30px;  background-image:url('http://img255.imageshack.us/img255/7561/fondfiche.png'); background-size:100% auto;'><tbody><tr><td style='color: #94c2c6; text-align: center; font-variant: small-caps; text-shadow: black 0px 0px 3px; letter-spacing: 3px; font-size: 12px;'>« Citation ; Citation ; Citation ; Citation »</td></tr></tbody></table></center><center><table style=' z-index: 1;background-color: #051215; background-image: url('http://img255.imageshack.us/img255/7561/fondfiche.png'); width:556px; height:370px;'><tbody><tr>"+ "\n";
    txt_message += "<td style='border-right-color: #738589; border-right-width: 0px; border-right-style: dotted; width: 60%; height: 90%; text-align: left;'><center><br/><div style='text-shadow: 0px 0px 3px #227681; text-align: center;'><span style='font-size: x-large; font-family: 'CL EvoluFont','courier new', courier; color: #94c2c6;'>" + form.nom.value + "," + "\n";
+"," + form.age.value + ".</span></div><br/><div style='text-shadow: 2px 1px 2px #227681; width: 90%; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; padding: 4px 4px 4px 5px; text-align: center;'><span style='font-size: small;'><strong style='color: #7ea2aa; letter-spacing: 1px; font-variant: small-caps;'>Date de naissance :</strong></span>" + "\n";
+ "<span style='text-align: left;'><span style='font-size: small;'> <br /></span></span><em style='font-size:14px; font-variant:small-caps;color:#7ea2aa;padding-bottom:15px;'>" + form.born.value + "\n";
+ "</em></div><div style='text-shadow: 2px 1px 2px #227681; width: 90%; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; padding: 4px 4px 4px 5px; text-align: center;'><span style='font-size: small;'><strong style='color: #7ea2aa; letter-spacing: 1px; font-variant: small-caps;'>Alignement :</strong> </span><em style='font-size:14px; font-variant:small-caps;color:#7ea2aa;'><br/>" + form.allignement.value + "\n";
 + "</em></div><div style='text-shadow: 2px 1px 2px #227681; width: 90%; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; padding: 4px 4px 4px 5px; text-align: center;'><span style='font-size: small;'><strong style='color: #7ea2aa; letter-spacing: 1px; font-variant: small-caps;'>Classe :</strong></span><span style='text-align: left;'><span style='font-size: small;'> <br /></span></span><em style='font-size:14px; font-variant:small-caps;color:#7ea2aa;'>" + form.classe.value + "\n";
+ "</em></div><div style='text-shadow: 2px 1px 2px #227681; width: 90%; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; padding: 4px 4px 4px 5px; text-align: center;'><span style='font-size: small;'><strong style='color: #7ea2aa; letter-spacing: 1px; font-variant: small-caps;color:#7ea2aa;'>A connaissance de Lyoko ?</strong></span><span style='text-align: left;'><span style='font-size: small;'> <br /></span></span><em style='font-size:14px; font-variant:small-caps;color:#7ea2aa;'>" + form.lyoko.value + "\n";
+ "</em></div></td><td><div style='position: relative; background-color: #071d24 ; z-index: 3; width: 200px; height: 320px; margin: 5px; padding: 2px;'><div style='position: relative; border: 1px dashed #94c2c6; height: 318px; z-index: 4;'><div style='height:10px'></div><img style='position: relative; top: -10px; -moz-transform: rotate(-8deg); -moz-transition: all .5s ease; -o-transform: rotate(-8deg); -o-transition: all .5s ease; -webkit-transform: rotate(-8deg); -webkit-transition: all .5s ease;' src='" + form.avatar.value + "\n";
    txt_message += "' /></div></div></td></tr></tbody>
</table>"+ "\n";

    // Insère le texte construit dans le champ caché "message" du formulaire
    form.message.value = txt_message;
    return true;
    }
    }
    </script>
    <form action="/post" method="post" name="post" enctype="multipart/form-data" onSubmit="return(envoiMessage(this))">
    <input type="hidden" name="lt" value="0" />
    <input type="hidden" name="mode" value="newtopic" /> <!-- Un nouveau topic sera créé -->
    <input type="hidden" name="topictype" value="0" checked="checked" /> <!-- Value 0: Sujet Normal (1 = Note / 2 = annonce) -->
    <input type="hidden" name="message" value="" /> <!-- Contiendra le texte du message -->
    <input type="hidden" name="f" value="40" /> <!--  ID du forum dans lequel le message sera posté -->
    <input type="hidden" name="subject" id="titre" value="Présentation de " class="USERNAME" /> <!-- titre du sujet  -->

    <table class="newmember"><tr>
    <td><span class="USERNAME"> </span></td></tr><tr><td>
    <fieldset>
    <p>
    <label for="avatar">Lien avatar en 200*320</label><input id="avatar" name="avatar" type="text" size="70" maxlength="50" /><br><br>
    <label for="nom"> Prénom et nom :</label><input id="nom" name="nom" type="text" size="70" maxlength="50" value="" /><br>
    <label for="age"> Age:</label><input id="age" name="age" type="text" size="50" maxlength="50" value="" /><br>
    <label for="born"> Date et lieu de naissance :</label><input id="born" name="born" type="text" size="50" maxlength="50" value="" /><br>
    <label for="Allignement"> Allignement :</label><input id="Allignement" name="Allignement" type="text" size="70" maxlength="100" value="" /><br>
    <label for="Classe"> Classe</label><input id="Clasee" name="classe" type="text" size="50" maxlength="50" value="" /><br>
    <label for="lyoko"> Votre personnage connait-il l’existence de Lyoko ?</label><input id="lyoko" name="lyoko" type="text" size="70" maxlength="50" value="" /><br>
</p>
    </fieldset><br><center>  <input type="submit" name="post" class="button" value="Envoyer" /></center></td>
    </tr></table>
    </form>

Le code rempli que j'aimerai avoir est donc celui-ci :
[spoiler]

Code:

<center><table style="position: relative; top: 45px; width: 450px; z-index: 0; height: 30px;  background-image:url('http://img255.imageshack.us/img255/7561/fondfiche.png'); background-size:100% auto;"><tbody><tr><td style="color: #94c2c6; text-align: center; font-variant: small-caps; text-shadow: black 0px 0px 3px; letter-spacing: 3px; font-size: 12px;">« Citation ; Citation ; Citation ; Citation »</td></tr></tbody></table></center><center>
<table style=" z-index: 1;background-color: #051215; background-image: url('http://img255.imageshack.us/img255/7561/fondfiche.png'); width:556px; height:370px;"><tbody><tr><td style="border-right-color: #738589; border-right-width: 0px; border-right-style: dotted; width: 60%; height: 90%; text-align: left;"><center><br/><div style="text-shadow: 0px 0px 3px #227681; text-align: center;"><span style="font-size: x-large; font-family: 'CL EvoluFont','courier new', courier; color: #94c2c6;">NOM Prénom, âge.</span></div><br/><div style="text-shadow: 2px 1px 2px #227681; width: 90%; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; padding: 4px 4px 4px 5px; text-align: center;"><span style="font-size: small;"><strong style="color: #7ea2aa; letter-spacing: 1px; font-variant: small-caps;">Date de naissance :</strong></span><span style="text-align: left;"><span style="font-size: small;"> <br /></span></span><em style="font-size:14px; font-variant:small-caps;color:#7ea2aa;padding-bottom:15px;">Date de naissance du personnage.</em>
</div><div style="text-shadow: 2px 1px 2px #227681; width: 90%; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; padding: 4px 4px 4px 5px; text-align: center;"><span style="font-size: small;"><strong style="color: #7ea2aa; letter-spacing: 1px; font-variant: small-caps;">Alignement :</strong> </span><em style="font-size:14px; font-variant:small-caps;color:#7ea2aa;"><br/>Allignement du personnage [Reçu par MP].</em></div><div style="text-shadow: 2px 1px 2px #227681; width: 90%; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; padding: 4px 4px 4px 5px; text-align: center;"><span style="font-size: small;"><strong style="color: #7ea2aa; letter-spacing: 1px; font-variant: small-caps;">Classe :</strong></span><span style="text-align: left;"><span style="font-size: small;"> <br /></span></span><em style="font-size:14px; font-variant:small-caps;color:#7ea2aa;">Classe du personnage [Reçu par MP].</em></div><div style="text-shadow: 2px 1px 2px #227681; width: 90%; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; padding: 4px 4px 4px 5px; text-align: center;"><span style="font-size: small;"><strong style="color: #7ea2aa; letter-spacing: 1px; font-variant: small-caps;color:#7ea2aa;">A connaissance de Lyoko ?</strong></span><span style="text-align: left;"><span style="font-size: small;"> <br /></span></span><em style="font-size:14px; font-variant:small-caps;color:#7ea2aa;">Oui / Non.</em>
</div></td><td><div style="position: relative; background-color: #071d24 ; z-index: 3; width: 200px; height: 320px; margin: 5px; padding: 2px;"><div style="position: relative; border: 1px dashed #94c2c6; height: 318px; z-index: 4;"><div style="height:10px"></div><img style="position: relative; top: -10px; -moz-transform: rotate(-8deg); -moz-transition: all .5s ease; -o-transform: rotate(-8deg); -o-transition: all .5s ease; -webkit-transform: rotate(-8deg); -webkit-transition: all .5s ease;" src="http://img689.imageshack.us/img689/985/nonavatar.png" alt="" /><!-- LIEN DU DESSUS ENTRE " A CHANGER PAR LIEN D'UNE IMAGE 200x320. --></div></div></td></tr</tbody>
</table>

<table style=" z-index: 1;background-color: #051215; background-image: url('http://img255.imageshack.us/img255/7561/fondfiche.png'); width:556px; height:470px;background-size:100% 100%;"><tbody><tr><td width="50%" height="50%"><span style="font-size: x-large; font-family: 'CL EvoluFont','courier new', courier; color: #94c2c6;">[center]Physique :[/center]</span><center><table style="overflow-y:auto; height:180px; line-height:10px;background-color:#33676d;width:80%;background-opacity:0.8;border-radius:20px;font-size:12px;color:black;padding:5px; text-align:justify;"><tr><td><!-- ICI PHYSIQUE DU PERSONNAGE !! --> Ici un texte qui décrit le physique de votre personnage.</td></tr></Table></center></td><td rowspan="2"><span style="font-size: x-large; font-family: 'CL EvoluFont','courier new', courier; color: #94c2c6;">[center]Histoire :[/center]</span><center><table style="overflow-y:auto; height:340px; line-height:10px;background-color:#33676d;width:90%;background-opacity:0.8;border-radius:20px;font-size:12px;color:black;padding:5px; text-align:justify;"><tr><td><!-- ICI HISTOIRE DU PERSONNAGE !! --> Ici un texte qui raconte l'histoire de votre personnage.</td></tr></Table></center></td></tr><tr><td><span style="font-size: x-large; font-family: 'CL EvoluFont','courier new', courier; color: #94c2c6;">[center]Caractère :[/center]</span><center><table style="overflow-y:auto; height:180px; line-height:10px;background-color:#33676d;width:80%;background-opacity:0.8;border-radius:20px;font-size:12px;color:black;padding:5px; text-align:justify;"><tr><td><!-- ICI CARACTERE DU PERSONNAGE !! --> Ici un texte qui décrit le caractère de votre personnage.</td></tr></Table></center></td></tr></table></center>

[spoiler]

Pour le moment j'ai juste tenté de faire en formulaire la premier cadre du code.

Donc voilà je vous demande votre aide, parce que tout seule, je crois que je suis pas prête de réussir... ^^

Merci d'avance !

[Scoubifitz]

bonsoir,

le 2e code est-il aussi une adaptation d'un code qu'on pourrait épurer ?

sinon , le premier code a quelques erreurs ( points-virgules , accolade de fermeture , majuscules-minuscules différentes dans les identifiants ...)

le code fonctionnel :

Code:

<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
<script type="text/javascript">
function envoiMessage(form)
{
// Créer un message à partir des informations fournies
var txt_message = "<center><table style='position:relative;top:45px;width:450px;z-index:0; height:30px; background-image:url(http://img255.imageshack.us/img255/7561/fondfiche.png); background-size:100% auto;'>"
+ "<tr><td style='color: #94c2c6; text-align: center; font-variant: small-caps; text-shadow: black 0px 0px 3px; letter-spacing: 3px; font-size: 12px;'>"
+ "« Citation ; Citation ; Citation ; Citation »</td></tr></table></center>\n\n"
+ "<center><table style=' z-index: 1;background-color: #051215; background-image:url(http://img255.imageshack.us/img255/7561/fondfiche.png); width:556px; height:370px;'>"
+ "<tr><td style='border-right-color: #738589; border-right-width: 0px; border-right-style: dotted; width: 60%; height: 90%; text-align: left;'>"
+ "<center><br/><div style='text-shadow: 0px 0px 3px #227681; text-align: center;'>"
+ "<span style='font-size: x-large; font-family: 'CL EvoluFont','courier new', courier; color: #94c2c6;'>" + form.nom.value + "," + form.age.value
+ ".</span></div><br/><div style='text-shadow: 2px 1px 2px #227681; width: 90%; border-radius: 20px; padding: 4px 4px 4px 5px; text-align: center;'>"
+ "<span style='font-size: small;'><strong style='color: #7ea2aa; letter-spacing: 1px; font-variant: small-caps;'>Date de naissance :</strong></span>" + "\n"
+ "<span style='text-align: left;'><span style='font-size: small;'> <br /></span></span>"
+ "<em style='font-size:14px; font-variant:small-caps;color:#7ea2aa;padding-bottom:15px;'>" + form.born.value + "\n"
+ "</em></div><div style='text-shadow: 2px 1px 2px #227681; width: 90%; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; padding: 4px 4px 4px 5px; text-align: center;'><span style='font-size: small;'>"
+ "<strong style='color: #7ea2aa; letter-spacing: 1px; font-variant: small-caps;'>Alignement :</strong> </span>"
+ "<em style='font-size:14px; font-variant:small-caps;color:#7ea2aa;'><br/>" + form.Allignement.value + "\n"
+ "</em></div><div style='text-shadow: 2px 1px 2px #227681; width: 90%; border-radius: 20px; padding: 4px 4px 4px 5px; text-align: center;'>"
+ "<span style='font-size: small;'><strong style='color: #7ea2aa; letter-spacing: 1px; font-variant: small-caps;'>Classe :</strong></span>"
+ "<span style='text-align: left;'><span style='font-size: small;'> <br /></span>"
+ "</span><em style='font-size:14px; font-variant:small-caps;color:#7ea2aa;'>" + form.classe.value + "\n"
+ "</em></div><div style='text-shadow: 2px 1px 2px #227681; width: 90%; border-radius: 20px; padding: 4px 4px 4px 5px; text-align: center;'>"
+ "<span style='font-size: small;'><strong style='color: #7ea2aa; letter-spacing: 1px; font-variant: small-caps;color:#7ea2aa;'>A connaissance de Lyoko ?</strong></span><span style='text-align: left;'>"
+ "<span style='font-size: small;'> <br /></span></span><em style='font-size:14px; font-variant:small-caps;color:#7ea2aa;'>" + form.lyoko.value + "\n"
+ "</em></div></td><td><div style='position: relative; background-color: #071d24 ; z-index: 3; width: 200px; height: 320px; margin: 5px; padding: 2px;'>"
+ "<div style='position: relative; border: 1px dashed #94c2c6; height: 318px; z-index: 4;'>"
+ "<div style='height:10px'></div><img style='position: relative; top: -10px; -moz-transform: rotate(-8deg); -moz-transition: all .5s ease; -o-transform: rotate(-8deg); -o-transition: all .5s ease; -webkit-transform: rotate(-8deg); -webkit-transition: all .5s ease;' src='" + form.avatar.value + "' />"
+ "</div></div></td></tr></table>"+ "\n";

// Insère le texte construit dans le champ caché "message" du formulaire
form.message.value = txt_message;
}
</script>
<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" /> <!-- Un nouveau topic sera créé -->
<input type="hidden" name="topictype" value="0" checked="checked" /> <!-- Value 0: Sujet Normal (1 = Note / 2 = annonce) -->
<input type="hidden" name="message" value="" /> <!-- Contiendra le texte du message -->
<input type="hidden" name="f" value="40" /> <!--  ID du forum dans lequel le message sera posté -->
<input type="hidden" name="subject" id="titre" value="Présentation de " class="USERNAME" /> <!-- titre du sujet  -->

<table class="newmember"><tr>
<td><span class="USERNAME"> </span></td></tr><tr><td>
<fieldset>
<p>
<label for="avatar">Lien avatar en 200*320</label><input id="avatar" name="avatar" type="text" size="70" maxlength="50" /><br><br>
<label for="nom"> Prénom et nom :</label><input id="nom" name="nom" type="text" size="70" maxlength="50" value="" /><br>
<label for="age"> Age:</label><input id="age" name="age" type="text" size="50" maxlength="50" value="" /><br>
<label for="born"> Date et lieu de naissance :</label><input id="born" name="born" type="text" size="50" maxlength="50" value="" /><br>
<label for="Allignement"> Allignement :</label><input id="Allignement" name="Allignement" type="text" size="70" maxlength="100" value="" /><br>
<label for="classe"> Classe</label><input id="classe" name="classe" type="text" size="50" maxlength="50" value="" /><br>
<label for="lyoko"> Votre personnage connait-il l’existence de Lyoko ?</label><input id="lyoko" name="lyoko" type="text" size="70" maxlength="50" value="" /><br>
</p>
</fieldset><br><center>  <input type="submit" name="post" class="button" value="Envoyer" /></center></td>
</tr></table>
</form>

[Floramagic]

Bonjour !

Déjà, un immense immense merci ! Pour la rapidité de la réponse, et pour le temps consacré à mon problème...!
Je viens d'essayer le code, il marche parfaitement ! J'ai même pu le continuer sans qu'il y ait de problème ! ^^ Donc merci, maintenant je saurai -enfin- faire des formulaires !

Je place le sujet en résolu ! -Waw déjà ! -

Merci encore !