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

[Bipo]

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.

[Scoubifitz]

bonjour et bonne année !

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

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

[Bipo]

Bonjour,

Merci mais j'ai déjà testé la solution proposée par ce sujet 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

Merci beaucoup.
Xoumi.

[Scoubifitz]

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>

[Bipo]

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.

[Scoubifitz]

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'