Javascript pour checkbox/radio dans un formulaire
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Javascript pour checkbox/radio dans un formulaire
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):
Et voici la configuration du script:
Merci beaucoup
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>
Merci beaucoup
Re: Javascript pour checkbox/radio dans un formulaire
bonjour,
on en a déjà parlé , non ?
https://forum.forumactif.com/t367588-probleme-de-creation-de-formulaire#3112526
on en a déjà parlé , non ?
https://forum.forumactif.com/t367588-probleme-de-creation-de-formulaire#3112526
Re: Javascript pour checkbox/radio dans un formulaire
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:
Et si je mets le script après la variable txt_message, ça fonctionne:
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:
Edit bis: j'ai trouvé un tuto pour les radio, du coup le seul problème qui subsiste ce sont les Checkbox!
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>
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>
Edit bis: j'ai trouvé un tuto pour les radio, du coup le seul problème qui subsiste ce sont les Checkbox!
Re: Javascript pour checkbox/radio dans un formulaire
Peut-on avoir un lien vers la page HTML concernée ?
je préfère avoir une vue d'ensemble du problème ...
je préfère avoir une vue d'ensemble du problème ...
Re: Javascript pour checkbox/radio dans un formulaire
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.
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.
Re: Javascript pour checkbox/radio dans un formulaire
bon ... avant toute chose , il faut rajouter enctype="multipart/form-data" dans la balise form ...
je vous met la partie qui vous intéresse pour le script :
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 :
et de supprimer :
- 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'
Re: Javascript pour checkbox/radio dans un formulaire
Tout fonctionne, c'est parfait! Merci beaucoup pour vos réponses rapides
Sujets similaires
» Formulaire javascript : problème pour récupérer la valeur d'une checkbox
» Bouton "Checkbox" dans un formulaire
» Code Html dans javascript formulaire
» Formulaire avec checkbox
» Formulaire : JavaScript
» Bouton "Checkbox" dans un formulaire
» Code Html dans javascript formulaire
» Formulaire avec checkbox
» Formulaire : JavaScript
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum