Problème avec un script de formulaire

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème avec un script de formulaire

Message par leenide le Ven 28 Jan 2011 - 11:49

Bonjour,

Je fais partie d'une guilde et je suis en train de réaliser un formulaire pour faciliter les postule et surtout que la plus part des questions basiques qu'on pose soit renseignées.

Jusque là ça va, je me suis aidée des indications fournies par senhime dans son tuto, pour le html je gère mais par contre en javascript je suis une bille.

Mon premier problème est que je n'arrive pas à retranscrire les valeurs des checkboxs, je vous met mon code :

Spoiler:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
</head>
<body>
<style type="text/css">
p{
   color: #9C9A9A;
   font-weight: bold;
}

i{   
   color: #9C9A9A;
   font-weight: bold;
   font-size:11px;
}

fieldset{
   margin-bottom: 15px; /* Une marge pour séparer les fieldset */
   background-color: #212121;
}

legend{ /* On met un peu plus en valeur les titres des fieldset */
   font-family: Arial, Arial Black, Georgia, Times New Roman, Times, serif;
   color: #E6AF09;
   size: 22px;
   font-weight: bold;
}

label{
   margin-left: 5px;
   color: #9C9A9A;
   font-weight: bold;
}

input{
   margin-left: 15px;
   color: #9C9A9A;
   font-weight: bold;
}


input, textarea{
   margin-left: 10px;
    font-family: Arial, Times, serif;
   color: #9C9A9A;
   background-color: #212121;
}

input:focus, textarea:focus{
   background-color: #000000;
}
</style>
<script type="text/javascript">
function envoiMessage(form)
{
// Message est une chaîne de caractères vide :
   var txt_message = "";
// Ajouter dans le message l'introduction :
   txt_message = "Bonjour,\n je vient ici pour postuler chez vous, voici ma candidature : \n";
// Créer un message à partir des informations fournies
   txt_message = txt_message + '\n'
             + "<strong>Mon Avatar : </strong>" + '\n'
             + "<strong>* Pseudo : </strong>" + form.pseudo.value + '\n'
                + "<strong>* Classe : </strong>" + form.classe.value + '\n'
                + "<strong>* Ma 1ère Spé : </strong>" + form.spe1.value + '\n'
                + "<strong>* Ma 2ème Spé : </strong>" + form.spe2.value + '\n' + '\n'
                + "<strong>* Parlez nous de vos spécialisations : Qu'elle est celle que vous maitrisez le mieux, celle que vous aimez joué, si votre classe possède une troisième spé, la jouez-vous ? </strong>" + '\n' + form.spe3.value + '\n' + '\n'
             + "<strong>* Décrivez nous votre cycle dps : </strong>" + '\n' + form.dps.value + '\n' + '\n'
             + "<strong>* Quels sont vos Ressentis sur les modifications apportées à votre classe/spé part Cataclysme ? </strong>" + '\n' + form.exp1.value + '\n' + '\n'
             + "<strong>* Votre équipement : </strong>" + form.item.value + '\n' + '\n'
             + "<strong>* Vos métiers principaux : \n </strong>";
                  for(var i = 0; i < form.metier1.length; i++)
                  {if(form.metier1[i].checked == true) { txt_message = txt_message + '*' + form.metier1[i].value + '\n'; } }
   txt_message = txt_message + '\n'
             + "<strong>* Vos métiers secondaires : \n </strong>";
             for(var i = 0; i < form.metier2.length; i++)
                  {if(form.metier2[i].checked == true) { txt_message = txt_message + '*' + form.metier2[i].value + '\n'; } }

// Ajoute la formule de politesse à la fin du message :
   txt_message = txt_message + "Cordialement, " + form.pseudo.value;
// Insère le texte construit dans le champ caché "message" du formulaire
   form.message.value = txt_message;
// Titre automatique
   form.subject.value = "[ " + form.classe.value + " - " + form.spe1.value + " ] " + form.pseudo.value;
    }

</script>
<form method="post" action="http://replay.guildealliance.com/posting.forum" name="post"  enctype="multipart/form-data" onSubmit="envoiMessage(this)"target="_parent">

<!-- champs invisibles -->
<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"/> <!-- 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="6"/> <!--  ID du forum dans lequel le message sera posté-->

<fieldset>
<legend>Votre Avatar</legend>
<p><input type="hidden" name="subject" id="titre" value="" /></p>
</br>
<p><label for="pseudo">* Votre Pseudo : </label><input type="text" name="pseudo" id="pseudo" size="30" /></p>
</br>
<p><label for="classe">* Classe : </label><select name="classe" id="classe">
   <option value="choix" selected="selected">Choisissez votre Classe</option>
   <option value="chaman">Chaman</option>
   <option value="chasseur">Chasseur</option>
   <option value="chevalier de la mort">Chevalier de la Mort</option>
   <option value="démoniste">Démoniste</option>
   <option value="druide">Druide</option>
   <option value="guerrier">Guerrier</option>
   <option value="mage">Mage</option>
   <option value="paladin">Paladin</option>
   <option value="prêtre">Prêtre</option>
   <option value="voleur">Voleur</option></select></p>
</br>
<p><label for="spe1">* 1ère Spécialisation : </label><input type="text" name="spe1" id="spe1" size="30" /></p>
<p><label for="spe2">* 2ème Spécialisation : </label><input type="text" name="spe2" id="spe2" size="30" /></p>
</br>
<p><label for="spe3">* Parlez nous de vos spécialisations : Qu'elle est celle que vous maitrisez le mieux, celle que vous aimez jouer, si votre classe possède une troisième spé, la jouez-vous ?</label></p>
<p><textarea name="spe3" id="spe3" rows="7" cols="120"></textarea></p>
</br>
<p><label for="dps">* Décrivez nous votre cycle dps :</label></p>
<p><textarea name="dps" id="dps" rows="7" cols="120"></textarea></p>
</br>
<p><label for="exp1">* Quels sont vos Ressentis sur les modifications apportées à votre classe/spé part Cataclysme ? </label></p>
<p><i>(on ne vous demande pas un roman mais de nous expliquer ce que vous avez compris et ce que vous en pensez)</i></p>
<p><textarea name="exp1" id="exp1" rows="7" cols="120"></textarea></p>
</br>
<p><label for="item">* Votre équipement : </label><input type="text" name="item" id="item" size="30" /></p>
</br>
<p><b> * Vos métiers principaux : </b></p>
<p><i>  Cochez la case correspondant aux métiers que vous avez monté.</i></p>
<p><input type="checkbox" name="metier1" id="alchimie"/><label for="alchimie">Alchimie</label></p>
<p><input type="checkbox" name="metier1" id="calligraphie"/><label for="calligraphie">Calligraphie</label></p>
<p><input type="checkbox" name="metier1" id="couture"/><label for="couture">Couture</label></p>
<p><input type="checkbox" name="metier1" id="depecage"/><label for="depecage">Dépecage</label></p>
<p><input type="checkbox" name="metier1" id="enchantement"/><label for="enchantement">Enchantement</label></p>
<p><input type="checkbox" name="metier1" id="forge"/><label for="forge">Forge</label></p>
<p><input type="checkbox" name="metier1" id="herboristerie"/><label for="herboristerie">Herboristerie</label></p>
<p><input type="checkbox" name="metier1" id="ingenieurie"/><label for="ingenieurie">Ingénieurie</label></p>
<p><input type="checkbox" name="metier1" id="joaillerie"/><label for="joaillerie">Joaillerie</label></p>
<p><input type="checkbox" name="metier1" id="minage"/><label for="minage">Minage</label></p>
<p><input type="checkbox" name="metier1" id="tdc"/><label for="tdc">Travail du cuir</label></p>
</br>
<p><b> * Vos métiers secondaires : </b></p>
<p><i>  Cochez la case correspondant aux métiers que vous avez monté.</i></p>
<p><input type="checkbox" name="metier2" id="archeologie"/><label for="archeologie">Archéologie</label></p>
<p><input type="checkbox" name="metier2" id="cuisine"/><label for="cuisine">Cuisine</label></p>
<p><input type="checkbox" name="metier2" id="peche"/><label for="peche">Pêche</label></p>
<p><input type="checkbox" name="metier2" id="secourisme"/><label for="secourisme">Secourisme</label></p>
</br>
<p><center><input type="submit" name="post" value="Envoyer"/></center></p>
</form>
</body>

et le résultat du test :

Spoiler:

Comme vous pouvez voir, les cases cochées sont bien détectée, mais il ne m'affiche pas les valeurs.

Ensuite mon second problème, je veux laisser la partie recrutement libre d'accès aux visiteurs (pas besoin de s'inscrire), donc ils postent avec un pseudo temporaire qu'ils entrent manuellement habituellement, je voudrais que tout comme le titre, le nom de l'invité soit mis en automatique en allant chercher la valeur du pseudo, j'ai beau chercher dans le code source, je n'arrive pas à trouver l'attribut qui représente le nom de l'invité.

Je laisse ici le lien de la page d'inscription en question, vous pouvez faire des test, je modérerais une fois mon problème solutionné.

Merci


Dernière édition par leenide le Ven 4 Fév 2011 - 10:22, édité 3 fois

leenide
Nouveau membre

Féminin
Messages : 6
Inscrit(e) le : 28/01/2011

http://replay.guildealliance.com/forum
leenide a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un script de formulaire

Message par leenide le Sam 29 Jan 2011 - 10:01

un petit up, toujours pas trouvé les solutions Sad

leenide
Nouveau membre

Féminin
Messages : 6
Inscrit(e) le : 28/01/2011

http://replay.guildealliance.com/forum
leenide a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un script de formulaire

Message par leenide le Dim 30 Jan 2011 - 15:47

Up,

J'ai trouvé pour la mise du nom de l'invité automatique

j'ai utilisé les codes suivant :

* en HTML :

Spoiler:
<input type="hidden" name="username" id="username" value="" />

* en javascript :
Spoiler:
// Nom d'utilisateur automatique
form.username.value = form.pseudo.value;

Donc dans mon html je vais caché la ligne "username" qui appelle lke nom de l'invité et avec le javascript j'automatise en allant chercher la valeur du champs "pseudo" que mes invité rempliront obligatoirement, je me suis aidé de la fonction titre automatique :p

donc il ne me reste plus qu'une question, si quelqu'un pouvait m'aider avec les checkbox ça je galère Very Happy

leenide
Nouveau membre

Féminin
Messages : 6
Inscrit(e) le : 28/01/2011

http://replay.guildealliance.com/forum
leenide a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un script de formulaire

Message par leenide le Lun 31 Jan 2011 - 10:50

up pour mes checkbox s'il vous plaît,

même juste un lien vers un tuto bien expliqué parceque pour le moment je trouve toujours pas ou ce n'est pas applicable sachant que je cherche juste à ce qu'il me mette la valeur d'une/des checkbox quand elles sont cochés.

leenide
Nouveau membre

Féminin
Messages : 6
Inscrit(e) le : 28/01/2011

http://replay.guildealliance.com/forum
leenide a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un script de formulaire

Message par leenide le Mar 1 Fév 2011 - 11:41

Bonjour, je clôture ce sujet, je me suis auto-corrigée, la réponse pour les checkboxx était débile puisque j'avais commis une erreur en oubliant de donner les value dans mon code html.

Je met en spoil le code corrigé si ça peut aider, ce n'est qu'une petite partie du formulaire mais l'essentiel y est manque juste l'application des "radio"

On y retrouve donc la mise automatique du titre et du nom de l'invité si vous laissez vos invité s'en servir, et la recherche des valeurs des zones de texte et des checkbox.

Spoiler:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
</head>
<body>
<style type="text/css">
p{
   color: #9C9A9A;
   font-weight: bold;
}

i{   
   color: #9C9A9A;
   font-weight: bold;
   font-size:11px;
}

fieldset{
   margin-bottom: 15px; /* Une marge pour séparer les fieldset */
   background-color: #212121;
}

legend{ /* On met un peu plus en valeur les titres des fieldset */
   font-family: Arial, Arial Black, Georgia, Times New Roman, Times, serif;
   color: #E6AF09;
   size: 22px;
   font-weight: bold;
}

label{
   margin-left: 5px;
   color: #9C9A9A;
   font-weight: bold;
}

input{
   margin-left: 15px;
   color: #9C9A9A;
   font-weight: bold;
}


input, textarea{
   margin-left: 10px;
    font-family: Arial, Times, serif;
   color: #9C9A9A;
   background-color: #212121;
}

input:focus, textarea:focus{
   background-color: #000000;
}
</style>
<script type="text/javascript">
function envoiMessage(form)
{
// Message est une chaîne de caractères vide :
   var txt_message = "";
// Ajouter dans le message l'introduction :
   txt_message = "Bonjour,\n je viens ici pour postuler chez vous, voici ma candidature : \n";
// Créer un message à partir des informations fournies
   txt_message = txt_message + '\n'
             + "<strong>Mon Avatar : </strong>" + '\n'
             + "<strong>* Pseudo : </strong>" + form.pseudo.value + '\n'
                + "<strong>* Classe : </strong>" + form.classe.value + '\n'
                + "<strong>* Ma 1ère Spé : </strong>" + form.spe1.value + '\n'
                + "<strong>* Ma 2ème Spé : </strong>" + form.spe2.value + '\n' + '\n'
                + "<strong>* Parlez nous de vos spécialisations : Qu'elle est celle que vous maitrisez le mieux, celle que vous aimez joué, si votre classe possède une troisième spé, la jouez-vous ? </strong>" + '\n' + form.spe3.value + '\n' + '\n'
             + "<strong>* Décrivez nous votre cycle dps : </strong>" + '\n' + form.dps.value + '\n' + '\n'
             + "<strong>* Quels sont vos Ressentis sur les modifications apportées à votre classe/spé part Cataclysme ? </strong>" + '\n' + form.exp1.value + '\n' + '\n'
             + "<strong>* Votre équipement : </strong>" + form.item.value + '\n' + '\n'
             + "<strong>* Vos métiers principaux : \n </strong>";
                  for(var i = 0; i < form.metier1.length; i++)
                  {if(form.metier1[i].checked == true) { txt_message = txt_message + '*' + form.metier1[i].value + '\n'; } }
   txt_message = txt_message + '\n'
             + "<strong>* Vos métiers secondaires : \n </strong>";
             for(var i = 0; i < form.metier2.length; i++)
                  {if(form.metier2[i].checked == true) { txt_message = txt_message + '*' + form.metier2[i].value + '\n'; } }

// Ajoute la formule de politesse à la fin du message :
   txt_message = txt_message + "Cordialement, " + form.pseudo.value;
// Insère le texte construit dans le champ caché "message" du formulaire
   form.message.value = txt_message;
// Titre automatique
   form.subject.value = "[ " + form.classe.value + " - " + form.spe1.value + " ] " + form.pseudo.value;
// Nom d'utilisateur automatique
        form.username.value = form.pseudo.value;
    }

</script>
<form method="post" action="http://replay.guildealliance.com/posting.forum" name="post"  enctype="multipart/form-data" onSubmit="envoiMessage(this)"target="_parent">

<!-- champs invisibles -->
<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"/> <!-- 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="6"/> <!--  ID du forum dans lequel le message sera posté-->

<fieldset>
<legend>Votre Avatar</legend>
<p><input type="hidden" name="subject" id="titre" value="" /></p>
<p><input type="hidden" name="username" id="username" value="" /></p>
</br>
<p><label for="pseudo">* Votre Pseudo : </label><input type="text" name="pseudo" id="pseudo" size="30" /></p>
</br>
<p><label for="classe">* Classe : </label><select name="classe" id="classe">
   <option value="choix" selected="selected">Choisissez votre Classe</option>
   <option value="chaman">Chaman</option>
   <option value="chasseur">Chasseur</option>
   <option value="chevalier de la mort">Chevalier de la Mort</option>
   <option value="démoniste">Démoniste</option>
   <option value="druide">Druide</option>
   <option value="guerrier">Guerrier</option>
   <option value="mage">Mage</option>
   <option value="paladin">Paladin</option>
   <option value="prêtre">Prêtre</option>
   <option value="voleur">Voleur</option></select></p>
</br>
<p><label for="spe1">* 1ère Spécialisation : </label><input type="text" name="spe1" id="spe1" size="30" /></p>
<p><label for="spe2">* 2ème Spécialisation : </label><input type="text" name="spe2" id="spe2" size="30" /></p>
</br>
<p><label for="spe3">* Parlez nous de vos spécialisations : Qu'elle est celle que vous maitrisez le mieux, celle que vous aimez jouer, si votre classe possède une troisième spé, la jouez-vous ?</label></p>
<p><textarea name="spe3" id="spe3" rows="7" cols="120"></textarea></p>
</br>
<p><label for="dps">* Décrivez nous votre cycle dps :</label></p>
<p><textarea name="dps" id="dps" rows="7" cols="120"></textarea></p>
</br>
<p><label for="exp1">* Quels sont vos Ressentis sur les modifications apportées à votre classe/spé part Cataclysme ? </label></p>
<p><i>(on ne vous demande pas un roman mais de nous expliquer ce que vous avez compris et ce que vous en pensez)</i></p>
<p><textarea name="exp1" id="exp1" rows="7" cols="120"></textarea></p>
</br>
<p><label for="item">* Votre équipement : </label><input type="text" name="item" id="item" size="30" /></p>
</br>
<p><b> * Vos métiers principaux : </b></p>
<p><i>  Cochez la case correspondant aux métiers que vous avez monté.</i></p>
<p><input type="checkbox" name="metier1" id="alchimie" value="alchimie"/><label for="alchimie">Alchimie</label></p>
<p><input type="checkbox" name="metier1" id="calligraphie" value="calligraphie"/><label for="calligraphie">Calligraphie</label></p>
<p><input type="checkbox" name="metier1" id="couture" value="couture" /><label for="couture">Couture</label></p>
<p><input type="checkbox" name="metier1" id="depecage" value="couture" /><label for="depecage">Dépecage</label></p>
<p><input type="checkbox" name="metier1" id="enchantement" value="enchantement" /><label for="enchantement">Enchantement</label></p>
<p><input type="checkbox" name="metier1" id="forge" value="forge" /><label for="forge">Forge</label></p>
<p><input type="checkbox" name="metier1" id="herboristerie" value="herboristerie" /><label for="herboristerie">Herboristerie</label></p>
<p><input type="checkbox" name="metier1" id="ingenieurie" value="ingenieurie" /><label for="ingenieurie">Ingénieurie</label></p>
<p><input type="checkbox" name="metier1" id="joaillerie" value="joaillerie" /><label for="joaillerie">Joaillerie</label></p>
<p><input type="checkbox" name="metier1" id="minage" value="minage" /><label for="minage">Minage</label></p>
<p><input type="checkbox" name="metier1" id="tdc" value="tdc" /><label for="tdc">Travail du cuir</label></p>
</br>
<p><b> * Vos métiers secondaires : </b></p>
<p><i>  Cochez la case correspondant aux métiers que vous avez monté.</i></p>
<p><input type="checkbox" name="metier2" id="archeologie" value="archeologie" /><label for="archeologie">Archéologie</label></p>
<p><input type="checkbox" name="metier2" id="cuisine" value="cuisine" /><label for="cuisine">Cuisine</label></p>
<p><input type="checkbox" name="metier2" id="peche" value="peche" /><label for="peche">Pêche</label></p>
<p><input type="checkbox" name="metier2" id="secourisme" value="secourisme" /><label for="secourisme">Secourisme</label></p>
</br>
<p><center><input type="submit" name="post" value="Envoyer"/></center></p>
</form>
</body>

Je marque le message en résolu

edit : j'avais oublié d'insérer la mise en automatique du nom de l'invité xD

leenide
Nouveau membre

Féminin
Messages : 6
Inscrit(e) le : 28/01/2011

http://replay.guildealliance.com/forum
leenide a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum