[formulaire] Récupération données JavaScript choix multiples

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

Résolu [formulaire] Récupération données JavaScript choix multiples

Message par Xoumi le Dim 4 Jan 2015 - 19:49

Bonjour / Bonsoir à tous,

Je suis actuellement en train de développer un formulaire pour simplifier la gestion administrative de mon forum. Cependant, je n'arrive pas à pallier un problème alors que j'ai regardé de nombreux tutoriels sur le Net.

Dans mon formulaire, je souhaite mettre en place des cases à cocher :

Code:
 <tr>
      <td class="tdformrep">Poste(s) occupé(s): </td><td><input type="checkbox" name="postes" value="Poste1" id="postes" /> Poste1
      <input type="checkbox" name="postes" value="Poste2" id="postes" /> Poste2
      <input type="checkbox" name="postes" value="Poste3" id="postes" /> Poste3</td>
    </tr>

Je souhaiterai que mes membres puissent cocher plusieurs choix eu égard aux postes qu'ils occupent. Cependant, je n'arrive pas à récupérer les valeurs via mon script :

Code:
+ '[color=#CD8528]► Postes occupés : [/color] ' + document.getElementById('postes').value + '\n\n'

Est-ce que vous auriez une solution à me proposer pour que je puisse récupérer les variables cochées ?

Voici l'intégralité de mon script en hide :

.

En vous remerciant par avance de l'aide que vous pourriez m'apporter.
Bien cordialement,
Xoumi.


Dernière édition par Xoumi le Mer 7 Jan 2015 - 17:35, édité 1 fois

Xoumi
*****

Messages : 604
Inscrit(e) le : 23/09/2010

http://www.harrypotter2005.net
Xoumi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [formulaire] Récupération données JavaScript choix multiples

Message par Scoubifitz le Lun 5 Jan 2015 - 10:23

bonjour et bonne année !

Il y a toujours ce topic pour comprendre les bases d'un formulaire :

http://forum.forumactif.com/t280246-formulaire#2492238


Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: [formulaire] Récupération données JavaScript choix multiples

Message par Xoumi le Lun 5 Jan 2015 - 14:44

Bonjour,

Merci mais j'ai déjà testé la solution proposée par ce sujet Wink Si je poste sur le FDF, c'est que j'ai déjà parcouru l'ensemble des sujets sinon, je m'économise de le faire Smile

Merci beaucoup.
Xoumi.

Xoumi
*****

Messages : 604
Inscrit(e) le : 23/09/2010

http://www.harrypotter2005.net
Xoumi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [formulaire] Récupération données JavaScript choix multiples

Message par Scoubifitz le Mar 6 Jan 2015 - 23:35

désolé pour le retard de post ...

Si vous le permettez , on va déjà prendre des nouvelles résolutions pour 2015.

Rajoutez "this" à l'appel du script de la balise "form" :
<form enctype="multipart/form-data" name="post" method="post" action="/post" onsubmit="CompleteMessage(this)">

Cela permettra de simplifier le codage du script ...

Ensuite , concernant les identifiants (id) des checkboxs , chaque identifiant doit rester unique :

Code:
<tr>
<td class="tdformrep">Poste(s) occupé(s): </td>
<td><input type="checkbox" name="postes" value="Poste 1" id="poste1" /> Poste1
<input type="checkbox" name="postes" value="Poste 2" id="poste2" /> Poste2
<input type="checkbox" name="postes" value="Poste 3" id="poste3" /> Poste3</td>
</tr>

Passons au script ...

Comme on a placé "this" dans l'appel du script , on place maintenant "form" dans la fonction :

Code:
<script type="text/javascript">
function CompleteMessage(form)

ce qui permet de simplifier tous les "document.getElementById" par "form" ...

exemple : document.getElementById('message').value devient form.message.value

Enfin , mieux vaut définir une variable (var) pour le message , et préciser en fin de script que cette variable sera la valeur du message . Il est plus simple de travailler sur cette variable , de l'arrêter pour définir une condition et de reprendre après ...

Code:
<script type="text/javascript">
function CompleteMessage(form)
{
var txt_message = '[center][color=#89725B][size=18]ABSENCE D\'UN MEMBRE[/size][/color][/center]' + '\n\n'
+ '[center][color=#D2B48C][size=18]Identité du Joueur[/size][/color][/center]' + '\n\n'
+ '[color=#D2B48C]► Nom du personnage : [/color] ' + _userdata['username'] + '\n'
+ '[color=#D2B48C]► Maison : [/color] ' + form.maison.value + '\n\n'
+'[center][color=#CD8528][size=18]Poste(s) occupé(s)[/size][/color][/center]' + '\n\n'
+ '[color=#CD8528]► Postes occupés : [/color] ';
for(var i = 0; i < form.postes.length; i++)
{
if(form.postes[i].checked === true) { txt_message += form.postes[i].value + " - "; }
}
txt_message += '\n\n[center][color=#D2B48C][size=18]Date et motif de l\'absence[/size][/color][/center]' + '\n\n'
+ '[color=#D2B48C]► Absence du : [/color] ' + form.datedeb.value + ' [color=#D2B48C]au[/color] ' + form.datefin.value + '\n'
+ '[color=#D2B48C]► Motif : [/color] ' + form.'motif.value + '\n\n'   
+ form.absindet.value + '\n\n';
form.message.value = txt_message ;
alert("Votre absence a été publiée avec succès ! Revenez-nous vite !");
}
</script>

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: [formulaire] Récupération données JavaScript choix multiples

Message par Xoumi le Mer 7 Jan 2015 - 12:54

Bonjour,

Merci pour votre réponse.

Cependant, j'aimerai plutôt conserver mon codage de base et que l'on m'explique comment intégrer la condition ci-dessous :

Code:
;
for(var i = 0; i < form.postes.length; i++)
{
if(form.postes[i].checked === true) { txt_message += form.postes[i].value + " - "; }
}

en utilisant document.getElementById('postes').value. C'est sur ce point que je n'arrive pas à comprendre la logique car en lisant les tutoriels, j'ai bien compris que cette fonction permettait de récupérer les choix cochés.

Merci beaucoup.
Xoumi.


Xoumi
*****

Messages : 604
Inscrit(e) le : 23/09/2010

http://www.harrypotter2005.net
Xoumi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [formulaire] Récupération données JavaScript choix multiples

Message par Scoubifitz le Mer 7 Jan 2015 - 13:43

@Scoubifitz a écrit:Ensuite , concernant les identifiants (id) des checkboxs , chaque identifiant doit rester unique :

Code:
<tr>
<td class="tdformrep">Poste(s) occupé(s): </td>
<td><input type="checkbox" name="postes" value="Poste 1" id="poste1" /> Poste1
<input type="checkbox" name="postes" value="Poste 2" id="poste2" /> Poste2
<input type="checkbox" name="postes" value="Poste 3" id="poste3" /> Poste3</td>
</tr>

Il faut quand même appliquer un identifiant unique à chaque case à cocher . Les cases auront le même nom , mais un id différent .

C'est à partir de ce nom (name) qu'on va récupérer les valeurs des checkboxs .

En reprenant le script de départ , on recherche donc dans le document , le nom du formulaire, le nom de l'élément et sa propriété

document.nom_formulaire.nom_element.propriété = document.post.postes.value

S'il y a plusieurs valeurs , on place la condition (for)

Je reprends donc le script , et place les valeurs des postes sur la même ligne :

Code:
<script type="text/javascript" language="javascript">
function CompleteMessage()
{
document.getElementById('message').value = '[center][color=#89725B][size=18]ABSENCE D\'UN MEMBRE[/size][/color][/center]' + '\n\n'
+ '[center][color=#D2B48C][size=18]Identité du Joueur[/size][/color][/center]' + '\n\n'
+ '[color=#D2B48C]► Nom du personnage : [/color] ' + _userdata['username'] + '\n'
+ '[color=#D2B48C]► Maison : [/color] ' + document.getElementById('maison').value + '\n\n'
+'[center][color=#CD8528][size=18]Poste(s) occupé(s)[/size][/color][/center]' + '\n\n'
+ '[color=#CD8528]► Postes occupés : [/color] ';
for(var i = 0; i < document.post.postes.length; i++)
{
if(document.post.postes[i].checked === true) { document.getElementById('message').value += document.post.postes[i].value + " - "; }
}
document.getElementById('message').value += '\n\n' +'[center][color=#D2B48C][size=18]Date et motif de l\'absence[/size][/color][/center]' + '\n\n'
+ '[color=#D2B48C]► Absence du : [/color] ' + document.getElementById('datedeb').value + ' [color=#D2B48C]au[/color] ' + document.getElementById('datefin').value + '\n'
+ '[color=#D2B48C]► Motif : [/color] ' + document.getElementById('motif').value + '\n\n'   
+ document.getElementById('absindet').value + '\n\n'

alert("Votre absence a été publiée avec succès ! Revenez-nous vite !");
}
</script>

Je remets la condition à part , si vous avez des questions supplémentaires , n'hésitez pas :

Code:
;
for(var i = 0; i < document.post.postes.length; i++)
{
if(document.post.postes[i].checked === true) { document.getElementById('message').value += document.post.postes[i].value + " - "; }
}
document.getElementById('message').value += '\n\n'

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz 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