Discussion :

[cool2505]

bonjour
je creer un formulaire en html css et javascript.
j ai une liste de 4 checkbox et je souhaite ne recuperer que les valeur des case cochée....
comme dans lexemple ci dessous


je souhaite que seul les fruits coché ( pommes dans l exemple ci dessus) n'apparaisse dans mon "text area"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var nombre = '';
function copier(nombre1, nombre2,nombre3, nombre4) {
      document.getElementById('texte-copie').value =  'fruits utlisé:\n' +'       '+ nombre1 +'\n'+'       '+ nombre2 +'\n'+'       '+ nombre3 +'\n'+'       '+ nombre4 +'\n' ;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<p>
J'ai utilisé les fruits suivant:
<FORM>
<input type="checkbox" name="checkbox1" id="nombre1" value="pommes">pommes
<input type="checkbox" name="checkbox2" id="nombre2" value="fraises">fraises
<input type="checkbox" name="checkbox3" id="nombre3" value="poires">poires
<input type="checkbox" name="checkbox4" id="nombre4" value="cerises">cerises
</FORM>
   <input type="button" value="Envoyer dans la case" onclick="copier(document.getElementById('nombre1').value, document.getElementById('nombre2').value, document.getElementById('nombre3').value, document.getElementById('nombre4').value)" />
</p>
<p><textarea id="texte-copie" readonly="readonly" cols="30" rows="6" ></textarea></p>

d'avance merci

[Golgotha]

Le temps que quelqu'un apporte la solution en js pure, voici une version avec jQuery.

Exemple : http://jsfiddle.net/ezdo6ca5/

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<p>J'ai utilisé les fruits suivant:
<FORM id="form_fruits">
<input type="checkbox" name="checkbox1" id="nombre1" value="pommes">pommes
<input type="checkbox" name="checkbox2" id="nombre2" value="fraises">fraises
<input type="checkbox" name="checkbox3" id="nombre3" value="poires">poires
<input type="checkbox" name="checkbox4" id="nombre4" value="cerises">cerises
</FORM>
   <input type="button" value="Envoyer dans la case" id="bt_envoyer" />
</p>
<p><textarea id="texte-copie" readonly="readonly" cols="30" rows="6" ></textarea></p>

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
$("#bt_envoyer").click(function(){    
    $("#texte-copie").empty();
    elems = $("#form_fruits input");
 
 
    $("#form_fruits input").each(function(index) {
        if (elems[index].checked)
            $("#texte-copie").append(elems[index].value + '\n');
    });
 
 
});

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#form_fruits :checkbox:checked").each

[CosmoKnacki]

La version Javascript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
/* <![CDATA[ */
(function() { // on encapsule 
    window.addEventListener('load', function() { // on ajoute la gestion de l'événement "load" à l'élément window
        document.getElementById('bsend').addEventListener('click', function() { // on ajoute la gestion de l'événement "click" au bouton 
            var fruitListText = 'fruits utilisés:\n';
            var currentFruitNode;
            for (var i=1; i<5; i++) {
                currentFruitNode = document.getElementById('nombre' + i); 
                if (currentFruitNode.checked)
                    fruitListText += '       ' + currentFruitNode.value + '\n'; 
            }
            document.getElementById('texte-copie').value = fruitListText; 
        }, false);
    }, false);
})();
/* ]]> */
</script>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<p>J'ai utilisé les fruits suivant:</p>
 
<form action="">
    <div>
        <input type="checkbox" name="checkbox1" id="nombre1" value="pommes"/>pommes
        <input type="checkbox" name="checkbox2" id="nombre2" value="fraises"/>fraises
        <input type="checkbox" name="checkbox3" id="nombre3" value="poires"/>poires
        <input type="checkbox" name="checkbox4" id="nombre4" value="cerises"/>cerises
        <input type="button" id="bsend" value="Envoyer dans la case" />
    </div>
    <p><textarea id="texte-copie" readonly="readonly" cols="30" rows="6" ></textarea></p>
</form>

L'idée est de séparer le code javascript du code html, donc plus d'attributs onclick dans les balises, on utilise les gestionnaires d'événements. C'est à dire que l'on attache à un élément une fonction qui se déclenche lors d'un événement particulier, par exemple le chargement de la page, un clique de souris, un survol, la perte du focus, l'appui sur une touche...

Pour définir un gestionnaire d'événement on utilise addEventListener.
Dans le code présent, j'ai rajouté un attribut id au bouton pour pouvoir l'atteindre plus facilement ce qui donne document.getElementById('bsend').addEventListener('click', function() {...}, false);Le code de la fonction se contente de passer en revue chaque checkbox et de tester si elles sont cochées. Dans ce cas le texte est ajouté à fruitListText.

Ensuite cette partie de code est placée dans le corps de la fonction d'un autre gestionnaire d'événement window.addEventListener('load', function() {. Cette événement se déclenche quand la page est chargée, ce qui assure que tous les éléments soient disponibles. (sinon on risque de se référer à un élément qui n'existe pas, parce qu'il n'est pas encore chargé.)

Pour finir, on encapsule le tout dans (function(){...})(); pour ne pas polluer l'espace de nom. En effet, toute variable utilisée dans cette "capsule" ne sera pas accessible de l'extérieur, ce qui est pratique si on veut ajouter d'autres scripts en évitant que des variables portant le même nom ne posent problème.

Ce script n'est qu'un exemple, il est loin d'être parfait, en vrac:

• Les noms de variables et d'ids en franglais c'est pas terrible, il faut mieux faire soit l'un soit l'autre. (Je penche plutôt pour l'anglais qui est plus concis et qui ne nécessite que les lettres ascii.)
• La boucle for avec le nombre 5 à ne pas dépasser codé en dur n'est pas très heureuse, il y a des manières plus malines de procéder, ou en changeant la structure du code html.
• Ce code ne fonctionnera pas sur les anciennes versions d'internet explorer (jusqu'à la version 8 incluse) pour la simple raison que addEventListener n'existe pas pour ces versions qui utilisent à la place la méthode propriétaire attachEvent.
• À la place de window.addEventListener('load'... qui doit attendre que la totalité de la page soit chargée (médias inclus), on pourra lui préférer document.addEventListener('DOMContentLoaded', ... issu des spécifications html5, qui se déclenche dés que le code html et les scripts sont chargés.

Concernant jQuery:

À coté un code en "pur" javascript semble bien verbeux. En effet, jQuery permet d'exprimer les choses de manière beaucoup plus concise et d'atteindre les divers éléments d'une page facilement grâce à ses sélecteurs. Mais ce n'est pas juste le sucre syntaxique de jQuery qui fait son succès, c'est aussi sa capacité à gommer les différences entre navigateurs. Avec jQuery, le problème de compatibilité évoqué précédemment ne se pose plus, car toutes ces différences sont gérées en amont et rendues invisible à l'utilisateur.

Néanmoins, faire l'apprentissage du "pur" javascript n'est pas une mauvaise chose loin de là.

[lysandro]

Juste pour m'amuser ...

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var copier_fruits;
// ES5 browsers
if ( Array.prototype.filter &&
     Array.prototype.map ) {
    copier_fruits = function copier_fruits ( fruits ) {
        var filter = Array.prototype.filter;
        document.getElementById("texte-copie").value = "fruits utilisés:\n" 
                + filter.call(fruits, function(chkbox){return chkbox.checked})
                    .map(function(chkbox){return chkbox.value})
                    .join("      ");
    }
} 
// ES3 browsers
else {
    copier_fruits = function copier_fruits ( fruits ) {
        var fruits_utilisés = [];
        for( var i = 0, e = fruits.length, f; i < e; ++i ) {
            if ( (f = fruits[i]).checked )
                fruits_utilisés.push(f.value);
        }
        document.getElementById("texte-copie").value = "fruits utilisés:\n" 
                    + fruits_utilisés.join("      ");
    }
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<p>
    J'ai utilisé les fruits suivant:
    <form name="ingrédients">
        <input type="checkbox" name="fruits" value="pommes">pommes
        <input type="checkbox" name="fruits" value="fraises">fraises
        <input type="checkbox" name="fruits" value="poires">poires
        <input type="checkbox" name="fruits" value="cerises">cerises
    </form>
    <input type="button" value="Envoyer dans la case" onclick="copier_fruits(document.forms['ingrédients'].elements['fruits'])" />
</p>
<p><textarea id="texte-copie" readonly="readonly" cols="30" rows="6" ></textarea></p>

[SylvainPV]

Ma version avec ce que lysandro m'a appris hier

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
  <form name="ingrédients"> 
     <p>J'ai utilisé les fruits suivants:</p>
        <input type="checkbox" name="fruits" value="pommes">pommes
        <input type="checkbox" name="fruits" value="fraises">fraises
        <input type="checkbox" name="fruits" value="poires">poires
        <input type="checkbox" name="fruits" value="cerises">cerises
        <input type="submit" value="Envoyer dans la case" />
    </form>

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
document.forms.ingrédients.onsubmit = function(e){
   document.getElementById('texte-copie').value = [].reduce.call(this.fruits, function(out, fruit){
      return fruit.checked ? out + fruit.value + '\n\t' : out;
   }, 'fruits utilisés:\n\t');    
   return false;
};