Créer un formulaire pour un nouveau sujet

[Cali93110]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Safari
Personnes concernées par le problème : Moi uniquement
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour à tous,

J'ai voulu m'aider de ce topic pour créer un formulaire afin de permettre aux membres de présenter leur personnages (c'est un forum RPG) sans qu'ils n'aient à se prendre la tête avec les codes HTML de fiche de présentation.

Cependant, chez moi, il ne se passe rien. Lorsque je vais dans le forum "Présentation" et lorsque je clique sur "Nouveau" pour créer un topic, il me propose la page habituelle avec le titre du message et l'emplacement du corps, avec les smiley à gauche. La page du formulaire ne s'affiche pas.

Par ailleurs, je voudrais permettre aux membres qui valident le formulaire rempli de pouvoir de nouveau y accéder lorsqu'ils cliqueront sur "Editer", dans leur message, pour terminer leur fiche de présentation par exemple.

A savoir : je n'ai pas attribué les mêmes droits que dans le topic où je me suis basé, simplement parce qu'il est nécessaire que tout les membres puissent accéder librement aux fiches de présentations.

Pour le moment, mon formulaire se résume à ceci :

Code:

<script type="text/javascript" language="javascript">
function CompleteMessage()
{
document.getElementById('message').value = 'nom = ' + document.getElementById('nom').value + '\n' + 'âge = ' + document.getElementById('âge').value + '\n' + 'clan = ' + document.getElementById('clan').value + '\n';
}
</script>
<form enctype="multipart/form-data" name="post" method="post" action="/post" style="border: dotted 1px red" onsubmit="CompleteMessage()">
Hébergement<br />
<input type="text" id="nom" value="" /><br />
Nombre de personnes<br />
<input type="text" id="âge" value="" /><br />
Menu<br />
<input type="text" id="clan" value="" /><br />
<br />
<input type="submit" value="Envoyer" name="post" /><br />
<input type="hidden" value="Inscription à l'évènement" name="subject" />
<textarea name="message" id="message" style="display:none"></textarea>
<input type="hidden" value="newtopic" name="mode" />
<input type="hidden" value="8" name="f" />
</form>

Merci d'avance à qui pourra m'aider !

[Scoubifitz]

Bonjour,

Avez vous testé avec les identifiants sans caractères spéciaux ? (âge)

[Cali93110]

Bonsoir,

Oui tout à fait, et ça n'a rien changé malheureusement.

[TheDirector]

Bonsoir,
Quel est le lien de votre forum "présentation" et le lien de votre page html contenant le formulaire ?

Cordialement

[Cali93110]

Bonsoir,

Effectivement ce ne sont pas les mêmes.
Page HTML : http://lionking-origins.forumactif.org/h1-formulaire-de-presentation
Forum concerné : http://lionking-origins.forumactif.org/f8-presentations

Mais je ne trouve pas où modifier l'url de la page HTML. Sauriez vous comment faire ?

[TheDirector]

Bonsoir,
mettez ce javascript sur toutes les pages :

Code:

$(function() {
    $('a[href="/post?f=8&mode=newtopic"]').attr('href','http://lionking-origins.forumactif.org/h1-formulaire-de-presentation');
});

Dis moi si ca marche

Cordialement

[Cali93110]

Bonjour,

Effectivement ça fonctionne très bien désormais. Par contre j'aimerai juste comprendre ce que vous avez fait à travers ce petit bout de code. Une petite explication est-elle possible ? Merci !

EDITE : Ah oui j'oubliais ! J'ai codé le résultat final de la mise en page de la fiche. Comment faire en sorte que les infos renseignées se présentent au bon endroit, et où dois-je mettre le code html de ma fiche pour qu'il soit chargé lors de l'envoi du formulaire ?

[TheDirector]

Pour les explications javascript, je ne m'y connais pas du tout, mais je peux essayer de te dire 2 trucs ^^

Code:

a[href="/post?f=8&mode=newtopic"]

Ici, f=8 cible la page nouveau sujet (car newtopic) de ton forum de présentation qui est bien f8-presentations.

Code:

'href','http://lionking-origins.forumactif.org/h1-formulaire-de-presentation'

Ce morceau permet dire dire par quoi est remplacée la page nouveau sujet (ici, c'est bien http://lionking-origins.forumactif.org/h1-formulaire-de-presentation )

Voilà, en faite on crée une redirection ^^

Pour ton autre problème, quel est ton code final ?

Cordialement

[Cali93110]

D'accord je comprends mieux ! Merci pour ces explications.

Alors pour le code de la fiche, le voici :



Au passage, j'ai deux petits soucis dans cette fiche : impossible de changer la hauteur des cellule "PRÉNOM, ÂGE, SEXE, CLAN, RANG, CARACTÈRE et HISTOIRE", si tu trouve pourquoi, je suis preneuse de la réponse, et enfin, je cherche à remonter le contenu de "CARACTÈRE" et "HISTOIRE" afin que le texte ne soit pas centré verticalement...
Si jamais tu ne sais pas, ne perdons pas de temps là dessus je trouverai toujours un moyen.

Le principal c'est que je puisse finir de mettre en place ce système de formulaire.

Je te donne la page HTML que j'ai finie :




Merci beaucoup pour ton aide en tout cas ! C'est adorable.

[Scoubifitz]

bonsoir,

le plus simple est de mettre cette fiche juste avec une photo et les 2 tableaux , et de faire le reste par CSS ...

La fiche :

Code:

<div class="fiche"><img src="IMAGE 550px DE LARGE" />
[table class="contentfiche"][tr][td class="titre tiers"]PRENOM[/td]
[td class="titre tiers"]ÂGE[/td]
[td class="titre tiers"]SEXE[/td]
[/tr]
[tr][td]Prénom ici.[/td]
[td]Âge ici.[/td]
[td]Sexe ici.[/td]
[/tr]
[tr][td class="titre"]CLAN[/td]
[td class="titre"]RANG[/td]
[/tr]
[tr][td]Clan ici.[/td]
[td]Rang ici.[/td]
[/tr]
[/table]
[table class="contentfiche"][tr][td class="titre demi"]CARACTÈRE[/td]
[td class="titre demi"]HISTOIRE[/td]
[/tr]
[tr][td height="300"][justify]Caractère ici. Caractère ici. Caractère ici. Caractère ici. Caractère ici. Caractère ici. Caractère ici. Caractère ici. Caractère ici. Caractère ici. Caractère ici. Caractère ici.  [/justify]
[/td]
[td height="300"][justify]Histoire ici. Histoire ici. Histoire ici. Histoire ici. Histoire ici. Histoire ici. Histoire ici. Histoire ici. Histoire ici. Histoire ici. [/justify]
[/td]
[/tr]
[/table]
</div>

et remplacez cette partie de votre CSS :

Code:

.content{
margin:0;
width:100%
}
.fiche{
background-color:#dcdbdb!important;
color:#9a9a9a;
margin-left:auto;
margin-right:auto;
min-height:600px;
width:550px
}
.fiche img{
margin-top:0
}
.contentfiche{
padding:10px 10px 0;
text-align:justify
}

par :

Code:

.fiche{
background-color:#dcdbdb;
color:#9a9a9a;
margin:auto;
width:550px;
}
.fiche img{
width:550px;
max-height:300px;
}
.contentfiche{
margin:auto;
width:500px;
border-spacing:10px;
}
.contentfiche td{
text-align:center;
vertical-align:top;
padding:10px;
}
.contentfiche .titre{
border-bottom: solid 1px #c6c5c5;
background-color: #d4d4d4;
}
.contentfiche .tiers{width:33%;}
.contentfiche .demi{width:50%;}

La page HTML qui va pour le formulaire :

Code:

<script type="text/javascript">
function CompleteMessage(form)
{
txtmessage="<div class='fiche'><img src='" + form.image.value + "' />\n"
+ "[table class='contentfiche'][tr][td class='titre tiers']PRENOM[/td]\n"
+ "[td class='titre tiers']ÂGE[/td]\n"
+ "[td class='titre tiers']SEXE[/td]\n"
+ "[/tr]\n[tr][td]" + form.nom.value + "[/td]\n"
+ "[td]" + form.age.value + "[/td]\n"
+ "[td]" + form.sexe.value + "[/td]\n"
+ "[/tr]\n[tr][td class='titre']CLAN[/td]\n"
+ "[td class='titre']RANG[/td]\n"
+ "[/tr]\n[tr][td]" + form.clan.value + "[/td]\n"
+ "[td]" + form.rang.value + "[/td]\n"
+ "[/tr]\n[/table]\n"
+ "[table class='contentfiche'][tr][td class='titre demi']CARACTÈRE[/td]\n"
+ "[td class='titre demi']HISTOIRE[/td]\n"
+ "[/tr]\n[tr][td height='300'][justify]" + form.caractere.value + "[/justify]\n"
+ "[/td]\n[td height='300'][justify]" + form.histoire.value + "[/justify]\n"
+ "[/td]\n[/tr]\n[/table]\n</div>";

form.message.value = txtmessage;
}
</script>
<form enctype="multipart/form-data" name="post" method="post" action="/post" style="padding: 5px 50px 5px 50px;" onsubmit="CompleteMessage(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="8" />
<input type="hidden" name="subject" value="Inscription à l'évènement" />
<table width="200" border="0" cellpadding="5" align="center">
<tr>
<td>Prénom<br />
<input type="text" id="nom" value="" /></td>
<td>Âge<br />
<input type="text" id="age" value="" /></td>
<td>Sexe<br />
<input type="text" id="sexe" value="" /></td>
</tr>
<tr>
<td>Clan<br />
<input type="text" id="clan" value="" /></td>
<td>Rang<br />
<input type="text" id="rang" value="" /></td>
</tr>
<tr>
<td colspan="2">Image du personnage*<br />
<input type="text" id="image" value="" /></td>
</tr>
</table>

<br />
<table width="620" border="0" cellpadding="5" align="center">
<tr>
<td width="310">Caractère - 10 lignes min.<br />
<textarea id="caractere" value="" style="width: 300px; height: 250px;" ></textarea></td>
<td width="310">Histoire - 15 lignes min.<br />
<textarea id="histoire" value="" style="width: 300px; height: 250px;"></textarea></td>
</tr>
</table><br />
<center><input type="submit" value="Envoyer" name="post" /></center><br />
* Largeur demandée : 550px<br /></form>

[Cali93110]

Bonjour,

Tout d'abord, merci pour ta réponse ! Ça avance à grand pas, et je suis contente de comprendre un minimum ce que je fais. J'ai juste deux questions :

- Dans le formulaire de la page html, pour l'input de l'image, j'ai remplacé le type "text" par "file" pour que le membre puisse uploader directement l'image à partir de son ordinateur. Lorsque j'ai fais le test, l'image ne s'affiche cependant pas.

- Lorsque je valide le formulaire une fois celui-ci rempli, il me retourne cela :
https://i.servimg.com/u/f59/12/03/49/16/captur10.png
Comment puis-je lui indiquer que le titre du sujet doit être le nom du personnage ?

Merci beaucoup pour ton aide, et du temps que tu prends à m'expliquer et m'aider ! J'apprécie beaucoup. Bonne journée.

[Scoubifitz]

1. Le type "file" permet d'uploader une image d'un ordi , à condition que cette image soit transmise à un serveur pour le stockage ... ce n'est pas possible directement par le formulaire , puisque vous ne possédez pas de serveur ...
   
   Il faut héberger ses images et obtenir le lien direct d'hébergement . Donc , un type "text" est plus adapté ...
   
   
2. Il n'y a pas de titre de sujet , parce que vous l'avez supprimé du code que j'ai fourni ...
   Remettez :

   Code:

   <input type="hidden" name="subject" id="titre" value="" />

   à sa place en laissant la value vide .
   puis rajoutez :

   Code:

   form.titre.value = "Présentation de " + form.nom.value;

   à la fin du script , juste au-dessus de "form.message.value = txtmessage;"
   
   

[Cali93110]

D'accord je comprends mieux, j'ai donc changé le type en text.
Autant pour moi, je pensais que c'était un bout du code du topic duquel je me suis aidée, c'est modifié.
Je m'attendais à ce que tout fonctionne parfaitement mais maintenant, lorsque je valide, j'ai ceci qui apparait : "Une erreur navigateur est survenue [Erreur #230], veuillez contacter le support technique."

Ca apparaît de la même façon que ma capture d'écran précédente.

[Scoubifitz]

pour l'erreur 230 : https://forum.forumactif.com/t351648-formulaire-erreur-230#2995510

[Cali93110]

C'est parfait pour moi, ça fonctionne nickel ! Merci infiniment pour votre aide, je vous souhaite une bonne continuation.