Envoyer un message depuis les données d'un formulaire

[emc2]

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
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
Lien du forum : http://polisetsophia.forumactif.org/

Description du problème

Bonjour,
Voilà, donc je ne m'en sors pas ! J'essaye désespérément d'obtenir l'envoi des données de ce formulaire en MP, mais je n'arrive à rien.
Je ne sais pas comment structurer mon script pour créer un message à partir des valeurs entrées dans le formulaire, et ensuite de les envoyer par MP d'un simple clic sur le bouton "envoyer"

Le formulaire de ma page HTML:

Code:

<div align="center"><img src="http://i35.servimg.com/u/f35/19/49/33/80/achat_10.png" /></div>

<br><strong><span style="font-size: 16px;">1) Entrez le nom de la ville dans laquelle vous souhaitez réaliser l'opération
<br>2) Cochez le type d'opération; (vente ou achat)
<br>3) Sélectionnez l'option que vous souhaitez moduler
<br>4) Choisissez le volume en pourcentage de l'opération
<br>5) Si besoin, ajoutez une note pour le Maître de jeu</span></strong><br><br><br>
<div align="center">
<form id="privatemessage" action="/privmsg" method="post" name="post">
<TABLE BORDER=2>
<TR>
 <TD>Votre ville ?</TD>
 <TD>
 <INPUT type=text name="ville">
 </TD>
</TR>

<TR>
 <TD>Opération</TD>
 <TD>
 Achat: <INPUT type=radio name="operation" value="Achat">
 Vente: <INPUT type=radio name="operation" value="Vente">
 </TD>
</TR>

<TR>
 <TD>Option</TD>
 <TD>
 <SELECT name="option">
  <OPTION VALUE="activité">Activité économique</OPTION>
  <OPTION VALUE="sécurité">Sécurité</OPTION>
  <OPTION VALUE="santé">Prévention santé</OPTION>
  <OPTION VALUE="éducation">Education</OPTION>
  <OPTION VALUE="autre" selected="selected">Sélectionnez une option</OPTION>
 </SELECT>
 </TD>
</TR>
 <TR>
 <TD>Pourcentage</TD>
 <TD>
 <SELECT name="pourcentage">
  <OPTION VALUE="1">1%</OPTION>
  <OPTION VALUE="2">2%</OPTION>
  <OPTION VALUE="3">3%</OPTION>
  <OPTION VALUE="4">4%</OPTION>
  <OPTION VALUE="5">5%</OPTION>
  <OPTION VALUE="6">6%</OPTION>
  <OPTION VALUE="7">7%</OPTION>
  <OPTION VALUE="8">8%</OPTION>
  <OPTION VALUE="9">9%</OPTION>
  <OPTION VALUE="10">10%</OPTION>
 </SELECT>
 </TD>
</TR>
<TR>
 <TD>Notes pour le<br>Maître de jeu</TD>
 <TD>
 <TEXTAREA rows="3" cols="35" name="commentaires"></TEXTAREA>
 </TD>
</TR>
</TABLE><br>
 <input name="username[]" type="text" style="display:none" value="Maître du jeu" /><input value="Demande

d'achat" style="display:none" maxlength="64" name="subject" type="text" class="usernameinput" />
<br /><span class="buttons"><input id="submitCart" type="submit" value="CONFIRMER" onclick="this.disabled =

false;document.getElementById('sendingBut').disabled = false;return false;" /><input type="submit"

value="ENVOYER" name="post" id="sendingBut" disabled="disabled" />
<br><strong> <span style="font-size: 16px;"> Confirmez, puis envoyer</strong></span>
</FORM>
  </div>

J'ai essayer de me faire aider de cecode en tentant de l'adapter:

Code:

</style>              <script type="text/javascript">
    function envoiMessage(form)
    {
    var txt_message = "";
    txt_message += "Bonjour,";
    txt_message += "<b>Première donnée</b> " + valeur 1ere + ' - '
    + "<b>Seconde donnée</b> " + valeur 2eme + ' - '
    + "<b>Troisième donnée</b> " + valeur 3eme + ' - '
    + "<b>Quatrième donnée</b> " + valeur 4eme + ' - '
    + "<b>Commentaire :</b> " + valeur texte commentaire + ' - ';
    form.message.value = txt_message;
    form.subject.value = "Demande de " + form.forum_nature.value + ' pour ' + form.forum_user.value + '.';
    }
    </script>

Mais à tout triturer depuis une semaine, je crois que j'ai pas mal abîmé tout le reste. Si quelqu'un pouvait m'aider, cela soulagerait ma migraine.
Merci par avance

[emc2]

[no_way]

Bonsoir

J'ai créé il y a peu un script en mesure de simplifier ce que vous souhaitez faire et bien que je compte le compléter et en faire un tuto prochainement vous accepterez sans doute d'être son premier cobaye ?

Il ne nécessiterait qu'une ligne javascript de votre part.

[emc2]

oui bien sûr ! Je veux bien donner mon corps à la science !
Que dois-je faire ?

[no_way]

Mouah ah ah ah ah ....
Hum, pardon...

Je vous donne déjà un formulaire de test, vous ne devez pas utiliser le haut et bas de votre forum, modifiez no_way par votre pseudo:

Code:

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Formulaire de test</title>
<script type="text/javascript" src="http://fa.codexo.org/faForm.js"></script>
<style type="text/css">
.max_Width,
.struct_fa_form label,
.struct_fa_form input[type="submit"],
.struct_fa_form textarea,
.struct_fa_form select{
display:inline-block;
box-sizing:border-box;
width:100%;
}
.struct_fa_form{
max-width:600px;
min-width:450px;
width:70%;
margin:auto;
border:1px solid #000;
}
.struct_fa_form td{
padding:0;
vertical-align:top;
}
.struct_fa_form td:not([colspan]):first-child{
text-align:right;
background:#e4f5ff;
}


/*ProgressionBar*/
.struct_fa_form .progressionBar{
position:relative;
height:1rem;
line-height:1rem;
border:1px solid #333;
border-radius:0.1rem;
color:#eee;
font-weight:bold;
text-align:center;
text-shadow: 0px 0px 5px #000;
}
.struct_fa_form .progressionBar .progressionBar_bar,
.struct_fa_form .progressionBar .progressionBar_txt{
position:absolute;
top:0px;
width:100%;
z-index:2;
}
.struct_fa_form .progressionBar .progressionBar_bar{
z-index:1;
background:linear-gradient(0deg, #54C944 0%, #9BFFB5 50%, #54C944 100%);
width:100%;
height:100%;
border-radius:0.1rem;
}
/*Pending*/
.struct_fa_form .progressionBar.pending .progressionBar_bar{
width:100%
}
.struct_fa_form .progressionBar.pending .progressionBar_txt::before{
content:'En attente'
}
/*Progress*/
@keyframes progressNotComputableAnimBar{
from{
width:0%}
to{
width:100%}
}
.struct_fa_form .progressionBar.progressNotComputable.progress .progressionBar_bar{
background:repeating-linear-gradient(-60deg, #54C944 1rem,transparent 5rem,transparent);
animation:progressNotComputableAnimBar 2s linear infinite;
}
.struct_fa_form .progressionBar.progressNotComputable.progress .progressionBar_txt::before{
content:'En cours ...'
}
.struct_fa_form .progressionBar.progressComputable.progress .progressionBar_txt[data-text]::before{
content:attr(data-text)'%';
/*width est géré par le script*/
}
/*Load*/
.struct_fa_form .progressionBar.progressNotComputable.load .progressionBar_txt::before,
.struct_fa_form .progressionBar.progressComputable.load .progressionBar_txt::before{
content:'100%'
}
/*Abort*/
.struct_fa_form .progressionBar.abort .progressionBar_bar{
background:linear-gradient(0deg, #C9C744 0%, #FFE29B 50%, #C9C744 100%)
}
.struct_fa_form .progressionBar.abort .progressionBar_txt::before{
content:'Interrompu'
}
/*Error et Timeout*/
.struct_fa_form .progressionBar.error .progressionBar_bar,
.struct_fa_form .progressionBar.timeout .progressionBar_bar{
background:linear-gradient(0deg, #C96544 0%, #FF9B9B 50%, #C96544 100%);
}
.struct_fa_form .progressionBar.error .progressionBar_txt::before,
.struct_fa_form .progressionBar.timeout .progressionBar_txt::before{
content:'Erreur'
}
</style>
</head>
<body>
<form data-mode="mp" data-subject="contact de %_{PSEUDO} [%_{GENRE}]" data-arg="no_way" id="testForm" action="#">
<table class="struct_fa_form">
<tr><td>Votre pseudo:</td><td><input class="max_Width" type="text" name="pseudo" required autofocus></td></tr>
<tr><td>Votre genre:</td><td><label><input  type="radio" name="genre" value="homme" selected> Homme</label><br />
<label><input  type="radio" name="genre" value="femme"> Femme</label><br />
<label><input  type="radio" name="genre" value="non-humain"> Non-humain</label><br /></td></tr>
<tr><td>Votre/vos passion(s):<br /><em>Maintenez la touche Ctrl<br />pour sélectionner plus d'une option</em></td><td>
<select name="passions" multiple>
<option value="musique">Musique</option>
<option value="informatique">Informatique</option>
<option value="course automobile">Course automobile</option>
<option value="randonnées">Randonnées</option>
</select></td></tr>
<tr><td>Votre présentation:</td><td><textarea class="max_Width" name="presentation"></textarea></td></tr>
<tr><td>Votre/vos couleur(s) préferée(s):</td><td>
<label><input  type="checkbox" name="couleurs[]" value="rouge"> Rouge</label><br />
<label><input  type="checkbox" name="couleurs[]" value="vert"> Vert</label><br />
<label><input  type="checkbox" name="couleurs[]" value="bleu"> Bleu</label><br />
<label><input  type="checkbox" name="couleurs[]" value="jaune"> Jaune</label><br />
<label><input  type="checkbox" name="couleurs[]" value="violet"> Violet</label><br />
<label><input  type="checkbox" name="couleurs[]" value="cyan"> Cyan</label><br /></td></tr>
<tr><td colspan="2"><input  type="submit" value="envoyer"></td></tr>
<tr><td colspan="2"><div class="progressionBar"><div class="progressionBar_txt"></div><div class="progressionBar_bar"></div></div></td></tr>
</table>
<textarea class="message">
Bonjour, voici le résumé du formulaire de test:
[table][tr][td]Votre pseudo:[/td][td]%_{PSEUDO}[/td][/tr]
[tr][td]Votre genre:[/td][td]%_{GENRE}[/td][/tr]
[tr][td]Votre/vos passion(s):[/td][td]%_{PASSIONS}[/td][/tr]
[tr][td]Votre présentation:[/td][td]%_{PRESENTATION}[/td][/tr]
[tr][td]Votre/vos couleur(s) préferée(s):[/td][td]%_{COULEURS[]}[/td][/tr]
[/table]
</textarea>
</form>
<script type="text/javascript">
var a=new faForm("testForm");
</script>
</body>
</html>

Pour faire votre propre formulaire, copiez le formulaire de test et modifiez le formulaire en respectant ce qui suit.

La balise form doit être la suivante:

Code:

<form data-mode="mp" data-subject="LE_TITRE_VOULU" data-arg="LE_DESTINATAIRE" id="testForm" action="#">

et l'envoi doit se faire au submit, il faut donc un:

Code:

<input type="submit" value="envoyer">

dans le formulaire.
Puis créez les champs de votre formulaire normalement en assignant pour chaque champ un attribut name (ce que vous faites déjà), ajoutez dans le formulaire un textarea avec pour classe message, c'est dans celui-ci que vous écrivez le message qui doit être envoyé.
Pour y injecter la valeur d'un champ il suffit de respecter la syntaxe suivante:
%_{NAME_DU_CHAMP_EN_MAJUSCULE}

Le script formatera le message de lui même et enverra le MP.

Je vous laisse déjà essayer avec le formulaire de test

[emc2]

Merci votre formulaire de test fonctionne parfaitement bien, mais lorsque je l'adapte à mon propre formulaire, plus rien ne va. Je me retrouve systématiquement avec le message d'erreur: "Vous devez entrer un message avant de poster". Preuve que je n'arrive pas à structurer un formatage correct pour le message à envoyer.
Je pense qu'il me sera plus facile de corriger mon script afin qu'il puisse envoyer un MP les données remplies par le membre plutôt que reprendre votre script d'en modifier les champs et l'apparence.

[no_way]

Puis-je avoir le contenu de votre formulaire et le message qu'il doit envoyer ?

[emc2]

Le formulaire est fourni dans le premier code en haut de ce fil.
Le second code n'est là que expliquer sur quoi j'ai tenté de m'inspirer pour structurer le message à renvoyer en MP.

Merci de votre aide.

[emc2]

Je viens de reprendre votre formulaire, une faille apparaît dedans. Il s'agit du speudo. Un champ demande de le remplir et le titre du message envoyé apparaît sous la forme: "Contact de XXXXX [homme]"
Ce qui implique que le membre peut renseigner ce qu'il souhaite dans le champ, même si ce n'est pas son speudo. Idem pour le sexe qui n'est pas opportun de faire apparaître dans le titre (je l'ai personnellement modifié pour le type d'opération voulu par le joueur).

Cette ligne de code:

Code:

<form data-mode="mp" data-subject="contact de %_{PSEUDO} [%_{operation}]" data-arg="Maître du jeu" id="testForm" action="#">

peut-elle être remplacée par quelque chose comme ça ?

Code:

<input name="username[]" type="text" style="display:none" value="Maître du jeu" />

Maître du jeu étant le destinataire du MP. Le but serait d'avoir en Titre de MP: "Contact de XXXXXXX [vente]" sans que le membre qui envoie son MP ait besoin de renseigner son speudo, ni d'avoir la possibilité de mettre un faux speudo ?

[no_way]

L'argument data-subject peut être formaté/ou pas, il s'agit d'un formulaire de test ni plus ni moins, il n'est pas forcément identique à celui que vous désirez faire, ce n'est pas une faille, je vous ferai votre formulaire pour demain

[emc2]

Ok, on peut demander un autre champ à la place du speudo. J'ai compris.
Merci pour mon formulaire.

[emc2]

Je viens d'adapter votre formulaire à mes besoins:

Code:

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Formulaire de test</title>
<script type="text/javascript" src="http://fa.codexo.org/faForm.js"></script>
<style type="text/css">
.max_Width,
.struct_fa_form label,
.struct_fa_form input[type="submit"],
.struct_fa_form textarea,
.struct_fa_form select{
display:inline-block;
box-sizing:border-box;
width:100%;
}
.struct_fa_form{
max-width:400px;
min-width:250px;
width:70%;
margin:auto;
border:6px solid #e0ccaf; border-radius: 8px;
}
.struct_fa_form td{
padding:0;
vertical-align:center;
font-size: 16px;
}
.struct_fa_form td:not([colspan]):first-child{
text-align:center;
background:#e0ccaf;
}
 
 
/*ProgressionBar*/
.struct_fa_form .progressionBar{
position:relative;
height:1rem;
line-height:1rem;
border:3px solid #e0ccaf;
border-radius: 8px;
color:#ececec;
font-weight:bold;
text-align:center;
text-shadow: 0px 0px 5px #000;
}
.struct_fa_form .progressionBar .progressionBar_bar,
.struct_fa_form .progressionBar .progressionBar_txt{
position:absolute;
top:0px;
width:100%;
z-index:2;
}
.struct_fa_form .progressionBar .progressionBar_bar{
z-index:1;
background:linear-gradient(0deg, #e0ccaf 0%, #bda584 50%, #e0ccaf 100%);
width:100%;
height:100%;
border-radius: 8px;
}
/*Pending*/
.struct_fa_form .progressionBar.pending .progressionBar_bar{
width:100%
}
.struct_fa_form .progressionBar.pending .progressionBar_txt::before{
content:'En attente'
}
/*Progress*/
@keyframes progressNotComputableAnimBar{
from{
width:0%}
to{
width:100%}
}
.struct_fa_form .progressionBar.progressNotComputable.progress .progressionBar_bar{
background:repeating-linear-gradient(-60deg, #54C944 1rem,transparent 5rem,transparent);
animation:progressNotComputableAnimBar 2s linear infinite;
}
.struct_fa_form .progressionBar.progressNotComputable.progress .progressionBar_txt::before{
content:'En cours ...'
}
.struct_fa_form .progressionBar.progressComputable.progress .progressionBar_txt[data-text]::before{
content:attr(data-text)'%';
/*width est géré par le script*/
}
/*Load*/
.struct_fa_form .progressionBar.progressNotComputable.load .progressionBar_txt::before,
.struct_fa_form .progressionBar.progressComputable.load .progressionBar_txt::before{
content:'100%'
}
/*Abort*/
.struct_fa_form .progressionBar.abort .progressionBar_bar{
background:linear-gradient(0deg, #C9C744 0%, #FFE29B 50%, #C9C744 100%)
}
.struct_fa_form .progressionBar.abort .progressionBar_txt::before{
content:'Interrompu'
}
/*Error et Timeout*/
.struct_fa_form .progressionBar.error .progressionBar_bar,
.struct_fa_form .progressionBar.timeout .progressionBar_bar{
background:linear-gradient(0deg, #C96544 0%, #FF9B9B 50%, #C96544 100%);
}
.struct_fa_form .progressionBar.error .progressionBar_txt::before,
.struct_fa_form .progressionBar.timeout .progressionBar_txt::before{
content:'Erreur'
}
</style>
</head>
<body>
<form data-mode="mp" data-subject="contact de %_{PSEUDO} [%_{operation}]" data-arg="Maître du jeu" id="testForm" action="#">
<table class="struct_fa_form">
<tr><td>Nom de la ville:</td><td><input class="max_Width" type="text" name="pseudo" required autofocus></td></tr>
<tr><td>Opération</td><td><label><input  type="radio" name="operation" value="achat" selected> Achat</label><br />
<label><input  type="radio" name="operation" value="vente"> Vente</label><br />
<label><input  type="radio" name="operation" value="echange"> Echange</label><br /></td></tr>
<tr><td>Sélectionner l'option choisie</td><td>
<select name="passions" multiple>
<option value="Activité">Activité économique</option>
<option value="Sécurité">Sécurité</option>
<option value="Santé">Santé</option>
<option value="Education">Education</option>
<option value="Social">Social</option>
</select></td></tr>
<tr><td>Informations sur<br>l'échange</td><td><textarea class="max_Width" name="presentation"></textarea></td></tr>
<tr><td>Volume du<br>mouvement:</td><td>
<label><input  type="radio" name="pourcent" value="1%" selected>  1%</label><br />
<label><input  type="radio" name="pourcent" value="2%" selected>  2%</label><br />
<label><input  type="radio" name="pourcent" value="3%" selected>  3%</label><br />
<label><input  type="radio" name="pourcent" value="4%" selected>  4%</label><br />
<label><input  type="radio" name="pourcent" value="5%" selected>  5%</label><br />
<label><input  type="radio" name="pourcent" value="6%" selected>  6%</label><br />
<label><input  type="radio" name="pourcent" value="7%" selected>  7%</label><br />
<label><input  type="radio" name="pourcent" value="8%" selected>  8%</label><br />
<label><input  type="radio" name="pourcent" value="9%" selected>  9%</label><br />
<label><input  type="radio" name="pourcent" value="10%" selected> 10%</label><br /></td></tr>
<tr><td colspan="2"><input  type="submit" value="envoyer"></td></tr>
<tr><td colspan="2"><div class="progressionBar"><div class="progressionBar_txt"></div><div class="progressionBar_bar"></div></div></td></tr>
</table>
<textarea class="message">
Demande d'opération
[table][tr][td]Votre pseudo:[/td][td]%_{PSEUDO}[/td][/tr]
[tr][td]Type d'opération[/td][td]%_{operation}[/td][/tr]
[tr][td]Votre/vos passion(s):[/td][td]%_{PASSIONS}[/td][/tr]
[tr][td]Votre présentation:[/td][td]%_{PRESENTATION}[/td][/tr]
[tr][td]Pourcentage du mouvement:[/td][td]%_{pourcent}[/td][/tr]
[/table]
</textarea>
</form>
<script type="text/javascript">
var a=new faForm("testForm");
</script>
</body>
</html>

Il "colle" à ce que je souhaitais faire à la base.
Merci pour votre aide.
Cela dit, si je pouvais avoir la solution pour mon premier formulaire, je suis toujours preneur.

[no_way]

Je pense avoir terminé, je vous laisse créer une nouvelle page en mettant le haut et le bas de votre forum, mettez le contenu suivant:

Code:

<form data-mode="mp" data-subject="%_{PSEUDO} [%_{OPERATION}]" data-arg="Maître du jeu" id="testForm" action="#">
<table class="struct_fa_form">
<tr><td>Votre ville:</td><td><input class="max_Width" type="text" name="ville" required autofocus></td></tr>
<tr><td>Opération:</td><td><label><input  type="radio" name="operation" value="Achat" checked="checked"> Achat</label><br />
<label><input  type="radio" name="operation" value="Vente"> Vente</label></td></tr>
<tr><td>Option:</td><td>
<select name="option">
<option value="activité">Activité économique</option>
<option value="sécurité">Sécurité</option>
<option value="santé">Prévention santé</option>
<option value="éducation">Education</option>
<option value="autre" selected="selected">Sélectionnez une option</option>
</select></td></tr>
<tr><td>Pourcentage:</td><td>
<select name="pourcentage">
<option value="1">1%</option>
<option value="2">2%</option>
<option value="3">3%</option>
<option value="4">4%</option>
<option value="5">5%</option>
<option value="6">6%</option>
<option value="7">7%</option>
<option value="8">8%</option>
<option value="9">9%</option>
<option value="10">10%</option>
</select></td></tr>
<tr><td>Notes pour le maître du jeu:</td><td><textarea class="max_Width" name="notes"></textarea></td></tr>
<tr><td colspan="2"><input type="hidden" name="pseudo"><input  type="submit" value="envoyer"></td></tr>
</table>
<textarea class="message">
[table]
[tr][td]Membre:[/td][td]%_{PSEUDO}[/td][/tr]
[tr][td]Opération:[/td][td]%_{OPERATION}[/td][/tr]
[tr][td]Option:[/td][td]%_{OPTION}[/td][/tr]
[tr][td]Pourcentage:[/td][td]%_{POURCENTAGE}[/td][/tr]
[tr][td]Notes:[/td][td]%_{NOTES}[/td][/tr]
[/table]
</textarea>
</form>
<script type="text/javascript">
$.getScript('http://fa.codexo.org/faForm.js',function(){
document.querySelector('#testForm [name="pseudo"]').value=_userdata["username"];
var a=new faForm("testForm");
});
</script>

[emc2]

Merci, ça fonctionne parfaitement.
Je résous par la balise.