Javascript pour checkbox/radio dans un formulaire

[CapriceK]

Bonjour!

Je rencontre un nouveau problème dans le codage de mon formulaire de fiches persos sur FA. J'ai créé un formulaire et un script pour poster automatiquement un message dans une section donnée. Et tout fonctionne, pas de soucis. Cependant, je rencontre un léger problème dans le codage du script: impossible de trouver comment on configure les radio et les checkbox. La plupart des explications que j'ai vue sont en php et comme j'ai un code en JS...

Voici l'extrait de formulaire concerné (d'abord le radio et ensuite la checkbox):

Code:

 <span class="label_form">Maison ou ancienne maison</span><br />
      <div class="note_form_maisons">Attention! Ne cochez pas cette case avant la validation si votre personnage est un élève, il sera réparti par le Choixpeau!.Si votre personnage n'a pas été à Poudlard, indiquez l'établissement où il a été scolarisé dans "autre".</div>
      <div class="maisons_form"><input type="radio" name="maison" value="gryffondor" id="gryffondor" /> <label for="gryffondor">Gryffondor</label><br />
      <input type="radio" name="maison" value="Poufsouffle" id="Poufsouffle" /> <label for="Poufsouffle">Poufsouffle</label><br />
      <input type="radio" name="maison" value="Serdaigle" id="Serdaigle" /> <label for="Serdaigle">Serdaigle</label><br />
      <input type="radio" name="maison" value="Serpentard" id="Serpentard" /> <label for="Serpentard">Serpentard</label><br />
      <input type="radio" name="maison" value="Autre" id="Autre" /> <label for="Autre">Autre <input type="text" size="40" name="work" id="work" class="writing_form" /></label></div><br /><br />
      <br />
      <span class="label_form">Matières suivies</span> <br />
      <div class="note_form_matieres">Pour les élèves de Poudlard uniquement ! Pour les 1e année: tronc commun uniquement; pour les 3e/4e/5e année: tronc commun + 2 ou 3 options; pour les 6e/7e années: environ 5 matières au choix.</div>
<table border="0" width="100%">
<tr>
<td width="25%" class="cell_titre_table_form">Général</td>
<td width="49%" class="cell_titre_table_form" colspan="2"> Matières du tronc commun</td>
<td width="26%" class="cell_titre_table_form"> Options</td>
</tr>
<tr>
<td>   <input type="checkbox" name="adlt" id="adlt" /> <label for="adlt">Je ne suis plus un élève !</label><br />      
       <input type="checkbox" name="tc" id="tc" /> <label for="tc">Tronc commun</label><br /></td>
<td>   <input type="checkbox" name="sortileges" id="sortileges" /> <label for="sortileges">Sortilèges</label><br />
   <input type="checkbox" name="metamorphose" id="metamorphose" /> <label for="metamorphose">Métamorphose</label><br />
   <input type="checkbox" name="Potions" id="Potions" /> <label for="Potions">Potions</label><br />
   <input type="checkbox" name="Botanique" id="Botanique" /> <label for="Botanique">Botanique</label><br /></td>
<td>   <input type="checkbox" name="Histoire" id="Histoire" /> <label for="Histoire">Histoire de la magie</label><br />
   <input type="checkbox" name="Vol" id="Vol" /> <label for="Vol">Vol</label><br />
   <input type="checkbox" name="Astronomie" id="Astronomie" /> <label for="Astronomie">Astronomie</label><br />
   <input type="checkbox" name="edm" id="edm" /> <label for="edm">Etude des moldus</label><br /></td>
<td>   <input type="checkbox" name="Arithmancie" id="Arithmancie" /> <label for="Arithmancie">Arithmancie</label><br />
   <input type="checkbox" name="edr" id="edr" /> <label for="edr">Etude des runes</label><br />
   <input type="checkbox" name="Divination" id="Divination" /> <label for="Divination">Divination</label><br />
   <input type="checkbox" name="scm" id="scm" /> <label for="scm">Soins aux créatures magiques</label><br /></td>
</tr>
</table>

Et voici la configuration du script:

Code:

<script type="text/javascript">
function envoiMessage(form)
{
  // Créer un message à partir des informations fournies
  var txt_message = '<div class="ficheperso"><div class="titrefiche">'
             + form.nomperso.value + '</div>' + '\n'
              + '<span class="titre_liste nom2">Age</span><span class="text_liste">' + form.age.value + '</span>' + '\n'
              + '<span class="titre_liste nom2">Date de naissance</span><span class="text_liste">' + form.birthdate.value + '</span>' + '\n'
              + '<span class="titre_liste nom2">Avatar</span><span class="text_liste">' + form.avatar.value + '</span>' + '\n' + '\n'
              + '<span class="titre_liste nom2">Autre</span><span class="text_liste">' + form.remarque.value + '</span></div>' + '\n'
              + '<span class="nom1 desc_phy">Description physique </span><div class="desc1">' + form.physique.value + '</div>' + '\n' + '\n'
              + '<span class="nom1 caractere">Caractère</span><div class="desc1">' + form.caractere.value + '</div>' + '\n' + '\n'
              + '<span class="nom1 histoire">Histoire</span><div class="desc1">' + form.histoirevie.value + '</div>' + '\n' + '\n'
              + '<span class="nom1 relations">Famille et entourage</span><div class="desc1">' + form.relation.value + '</div>' + '</div>' + '\n' + '\n'

  // Insère le texte construit dans le champ caché "message" du formulaire
  form.message.value = txt_message;

form.subject.value = form.nomperso.value;
}
</script>

Je souhaiterai insérer la maison et les matières juste avant l'histoire. Si vous aviez un exemple de la façon dont on code les checkbox/radio en JS, ce serait amplement suffisant pour que je voie comment c'est configuré et que je l'adapte.

Merci beaucoup

[Scoubifitz]

bonjour,

on en a déjà parlé , non ?

https://forum.forumactif.com/t367588-probleme-de-creation-de-formulaire#3112526

[CapriceK]

Ouaip, mais ce n'était pas le même problème! Enfin si mais non^^" En fait, même dans ce que tu m'as donné sur les checkbox/radio, j'ai l'impression que je ne peux pas incorporer directement les cases cochées en plein milieu de mon message, comme je voudrais le faire  

Edit: comme je ne suis pas sûre que ça soit clair, voilà une illustration. J'ai édité le formulaire comme c'est fait dans ton exemple:

Code:

<input type="checkbox" name="matieres" value="Je ne suis plus un élève!" /> Je ne suis plus un élève !<br />      
       <input type="checkbox" name="matieres" value="Tronc Commun" /> Tronc commun<br />

Et si je mets le script après la variable txt_message, ça fonctionne:

Code:

<script type="text/javascript">
function envoiMessage(form)
{
   // Créer un message à partir des informations fournies  
  var txt_message = '<div class="ficheperso"><div class="titrefiche">'
              + form.nomperso.value + '</div>' + '\n'
               + '<span class="titre_liste nom2">Age</span><span class="text_liste">' + form.age.value + '</span>' + '\n'
               + '<span class="titre_liste nom2">Métier / Année d\'étude</span><span class="text_liste">' + form.work.value + '</span>' + '\n'
            + '<span class="titre_liste nom2">Maison / Ancienne Maison</span><span class="text_liste">' + maison + ' ' + form.autremaison.value + '</span>' + '\n' + '\n'
            + '<span class="titre_liste nom2">Matières suivies</span><span class="text_liste">'
               + '</span>' + '\n' + '\n'
               + '<span class="titre_liste nom2">Vie associative / hobbies</span><span class="text_liste"></div></div>' + '\n' + '\n' ;
  
txt_message +=  " ";
for(var i = 0; i < form.matieres.length; i++)
{
if(form.matieres[i].checked === true) { txt_message +=  form.matieres[i].value + "<br />"; }
}

// Insère le texte construit dans le champ caché "message" du formulaire
   form.message.value = txt_message;

form.subject.value = form.nomperso.value;
}
</script>

(Là encore j'ai raccourci pour que ça ne soit pas trop long).

Mais le soucis, c'est que comme ça, le résultat de mes checkbox apparaît en tout fin de message. Hors, ce que je voudrais, c'est qu'elles s'affichent au milieu de la variable txt_message, après "matières suivies" et avant "vie associative". Mais si je colle le script au milieu, ça ne fonctionne pas. J'ai tenté diverses manipulations, comme celle ci:

Code:


<script type="text/javascript">
function envoiMessage(form)
{
   // Créer un message à partir des informations fournies  
  var txt_message = '<div class="ficheperso"><div class="titrefiche">'
              + form.nomperso.value + '</div>' + '\n'
               + '<span class="titre_liste nom2">Age</span><span class="text_liste">' + form.age.value + '</span>' + '\n'
               + '<span class="titre_liste nom2">Métier / Année d\'étude</span><span class="text_liste">' + form.work.value + '</span>' + '\n'
            + '<span class="titre_liste nom2">Maison / Ancienne Maison</span><span class="text_liste">' + maison + ' ' + form.autremaison.value + '</span>' + '\n' + '\n'
            + '<span class="titre_liste nom2">Matières suivies</span><span class="text_liste">' ;

txt_message +=  " ";
for(var i = 0; i < form.matieres.length; i++)
{
if(form.matieres[i].checked === true) { txt_message +=  form.matieres[i].value + "<br />"; }
}
               txt_message += '</span>' + '\n' + '\n'
               + '<span class="titre_liste nom2">Vie associative / hobbies</span><span class="text_liste"></div></div>' + '\n' + '\n' ;
  
// Insère le texte construit dans le champ caché "message" du formulaire
   form.message.value = txt_message;

form.subject.value = form.nomperso.value;
}
</script>


Mais ça ne fonctionne pas du tout… Du coup je ne vois pas comment insérer mon résultat de checkbox au milieu du message.

Edit bis: j'ai trouvé un tuto pour les radio, du coup le seul problème qui subsiste ce sont les Checkbox!

[Scoubifitz]

Peut-on avoir un lien vers la page HTML concernée ?
je préfère avoir une vue d'ensemble du problème ...

[CapriceK]

C'est ici
Je pensais peut-être à créer une variable pour récupérer les checkbox, et ensuite mettre le nom de la variable au milieu de celle du txt_message, mais je ne suis pas sûre que ce soit possible.

[Scoubifitz]

bon ... avant toute chose , il faut rajouter enctype="multipart/form-data" dans la balise form ...

Code:

<form method="post" action="/post" enctype="multipart/form-data" onsubmit="envoiMessage(this)">

je vous met la partie qui vous intéresse pour le script :

+ '<span class="titre_liste nom2">Matières suivies</span>'
+ '<span class="text_liste">';
 for(var i = 0; i < form.matieres.length; i++)
{
if(form.matieres[i].checked === true) { txt_message +=  form.matieres[i].value + "\n"; }
}
txt_message += '</span>\n\n'
+ '<span class="titre_liste nom2">Vie associative / hobbies</span>'

vous remarquerez le point-virgule qui permet d'arrêter la variable "txt_message" , pour ouvrir une condition "for" ...

une fois la condition définie , on reprend la variable pour la suite du message ...
---------------------------
j'ai aussi remarqué que vous définissez une variable pour les "radios" ... C'est une bonne idée quand un des boutons radios doit récupérer la valeur d'un champ texte ...

il suffit de dire que la valeur du dernier bouton sera le contenu du champ texte :

Code:

var maison = "";
if(form.maison[0].checked == true)
maison = "Gryffondor";
else if(form.maison[1].checked == true)
maison = "Poufsouffle";
else if(form.maison[2].checked == true)
maison = "Serdaigle";
else if(form.maison[3].checked == true)
maison = "Serpentard";
else if(form.maison[4].checked == true)
maison = form.autremaison.value;

et de supprimer :

+ '<span class="titre_liste nom2">Maison / Ancienne Maison</span><span class="text_liste">' + maison + ' ' + form.autremaison.value + '</span>' + '\n' + '\n'

[CapriceK]

Tout fonctionne, c'est parfait! Merci beaucoup pour vos réponses rapides