Gerer des checkbox dans une fonction

**guillaumeIOB** · 30/04/2018, 18h06

Bonjour,

Voila j'ai un onclick sur un checkbox qui declenche une fonction.

Cette fonction est par ailleurs declenchée d'autres fois avec un onblur en remplissant une cellule input et en sortant

Ainsi j'ai un double souci :
- Comment gerer les checkbox sans toutes les nommer ? Pour solutionner le pb temporairement, je dois annoncer tous les checbox et quand on en a 200, c'est trés trés trés long :
- J'aimerai pouvoir informer de la sauvegarde de l'info du checkbox en lui retournant un css comme pour l'input

Voila mon code :

Code :

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

1
2
3
4
<?php
echo '<input type="checkbox" name="checknom'.$nbcred.'" id="checknom'.$nbcred.'" onclick="envoi(\'checknom'.$nbcred.'\',';if ($clcred['checknom']=="1"){echo '0';}else{echo '1';}echo');"'; if ($clcred['checknom']=="1"){echo " checked='checked'";} echo '><br>';
//etc....
?>

et mon 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
19
20
function envoi (idA) {
    if (idA=="checknom1" || idA=="checkautrenom" || \\etc.................... et j en ai 200\\ )
   {
      if(document.getElementById(idA).checked == true){idC = '1';}else{idC = '0';}
      nb="0";
   }
  else 
   {
     var idC = document.getElementById(idA).value;
   }
 
var xhr_object = new XMLHttpRequest();
xhr_object.open("POST", "mapagephp.php?nb="+nb+"&champ="+idA+"&"+idA+"="+idC, true);
xhr_object.onreadystatechange = function() {if(xhr_object.readyState == 4) {}}
xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var data = "nb="+nb+"&champ="+idA+"&"+idA+"="+idC;
xhr_object.send(data);
// ici j'entoure l'input qui a été validé, j'ai evidemment un pb quand c'est une checbox pour laquelle j'aurai aimé aussi mettre un css en vert
var idC = document.getElementById(idA); idC.style.border="2px solid #00FF00";
}

Merci de votre aide
Guillaume

**mathieu** · 30/04/2018, 20h32

vous pouvez ajouter une classe CSS à toutes les cases à cocher.
et ensuite vous pouvez les récupérer toutes avec la fonction "getElementsByClassName"
https://dom.spec.whatwg.org/#dom-doc...ntsbyclassname

**guillaumeIOB** · 30/04/2018, 20h51

Bonsoir,

Donc ça se serait pour répondre a ma seconde problématique en fait (et encore je n'ai pas tout a fait compris le rapport ;-) ), mais le plus important est la récupération des values quand ce sont les checkbox et quand ce sont les input.

Merci pour votre aide.

**danielhagnoul** · 30/04/2018, 21h35

Envoyé par kaolivier

Bonjour,

Voila j'ai un onclick sur un checkbox qui declenche une fonction.

Cette fonction est par ailleurs declenchée d'autres fois avec un onblur en remplissant une cellule input et en sortant [...]

Ce n'est pas très clair ! Un "checkbox" est un input.

Un exemple gérant l'événement "change" sur une série d'input dont le nom commence par "checknom..." :

Code HTML :

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

1
2
3
4
5
6
7
<input type="checkbox" name="checknomA" checked>
<input type="checkbox" name="checknomB">
<input type="checkbox" name="checknomC">
<input type="checkbox" name="checknomD">
<input type="checkbox" name="checknomE">
<input type="checkbox" name="checknomF">
<input type="checkbox" name="checknomG">

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
25
26
27
28
29
30
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
    for (const elem of Array.from(document.querySelectorAll('input[name^="checknom"]'))) {
        elem.addEventListener('change', ev => {
            let
                name = ev.target.name,
                checked = ev.target.checked;
 
            // debug, console, touche F12
            console.log(name, checked);
 
            if (checked) {
                // action
            }
        }, {
            capture: false,
            passive: true,
            once: false
        });
    }
 
    // fin code du test
}, {
    capture: false,
    passive: true,
    once: false
});

**guillaumeIOB** · 30/04/2018, 23h30

Bonsoir danielhagnoul,

Je te remercie pour ton aide, mais la encore je ne comprends rien a ton exemple, je ne comprends pas le rapport avec ma questions en fait.

Donc je reprends, imaginons 2 inputs, dont l'un est type="checkbox" et l'autre un type="text".

J'ai une action javascript sur les deux qui renvoi sur la meme fonction pour que je puisse via ajax sauvegarder la valeur de chaque :

Code php :

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

1
2
3
4
5
<?php
echo '
<input type="text" id="toto_'.$nbcred.'" name="toto_'.$nbcred.'" value="'.$clcred['toto'].'" onblur="envoi(\'toto_'.$nbcred.'\',0)"> | <input type="checkbox" name="checknom'.$nbcred.'" id="checknom'.$nbcred.'" onclick="envoi(\'checknom'.$nbcred.'\',';if ($clcred['checknom']=="1"){echo '0';}else{echo '1';}echo');"'; if ($clcred['checknom']=="1"){echo " checked='checked'";} echo '><br>';
//etc....
?>

Par l'intermédiaire de ma fonction envoi(idA, nb) j'envoi les infos qui seront sauvegardées via mon fichier mapagephp.php, le probleme est que la value issue d'un type checkbox n'est pas comprise de la meme façon qu'une valeur du type text, d'ou mon pb car je dois préciser les 200 champs de checkbox pour faire comprendre que la value depend de true, alors que pour un type text, je recupere directement le value.

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
19
20
function envoi (idA) {
    if (idA=="checknom1" || idA=="checkautrenom" || \\etc.................... et j en ai 200\\ )
   {
      if(document.getElementById(idA).checked == true){idC = '1';}else{idC = '0';}
      nb="0";
   }
  else 
   {
     var idC = document.getElementById(idA).value;
   }
 
var xhr_object = new XMLHttpRequest();
xhr_object.open("POST", "mapagephp.php?nb="+nb+"&champ="+idA+"&"+idA+"="+idC, true);
xhr_object.onreadystatechange = function() {if(xhr_object.readyState == 4) {}}
xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var data = "nb="+nb+"&champ="+idA+"&"+idA+"="+idC;
xhr_object.send(data);
// ici j'entoure l'input qui a été validé, j'ai evidemment un pb quand c'est une checbox pour laquelle j'aurai aimé aussi mettre un css en vert
var idC = document.getElementById(idA); idC.style.border="2px solid #00FF00";
}

Donc comment faire s'il vous plait pour ne pas avoir a préciser tous les champs checkbox dans la conditions

Code :

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

1
2
if (idA=="checknom1" || idA=="checkautrenom" || \\etc.................... et j en ai 200\\ )
   {

Merci pour votre aide
Guillaume

**mathieu** · 01/05/2018, 08h01

danielhagnoul a proposé comme moi une méthode pour obtenir la liste de toutes les cases à cocher.

ce qui n'est pas clair c'est le test que vous faites avec tous ces noms. est ce que c'est pour tester si c'est une case à cocher ou un champ texte ?
dans ce cas, il serait plus simple de mettre un 3e argument à la fonction "envoi" qui indique de quel type de champ il s'agit.

et là vous nous montrez le code PHP ce qui n'est pas pratique pour comprendre ce qu'il se passe. montrez nous le code HTML généré.

**NoSmoking** · 01/05/2018, 08h39

Bonjour,

Donc je reprends, imaginons 2 inputs, dont l'un est type="checkbox" et l'autre un type="text".

attention quand même j'ai l'impression que le « cahier des charges » vient de changer

Si tel est le cas il suffit de récupérer TOUS les <input> quelque chose et de leur affecter la même fonction qui elle fera le nécessaire suivant le cas.

Code :

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

var allInputs = document.querySelectorAll("input");

Mais ...?

**guillaumeIOB** · 01/05/2018, 10h37

Bonjour a tous et merci pour votre aide,

Je pense que je dois très mal m'exprimer, alors je vais tenter d'être plus compréhensible, avec un exemple précis :

Code html :

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
25
26
27
28
29
30
31
32
 
 
<html>
<head>
 
<script type="application/javascript">
function envoi (idA) 
{
   if (idA=="inscrit_1" || idA=="inscrit_2" || \\etc.................... et j en ai 200\\ )
   {if(document.getElementById(idA).checked == true){idC = '1';}else{idC = '0';}}
   else 
   {var idC = document.getElementById(idA).value;}
 
  var xhr_object = new XMLHttpRequest();
  xhr_object.open("POST", "mapagephp.php?champ="+idA+"&"+idA+"="+idC, true);
  xhr_object.onreadystatechange = function() {if(xhr_object.readyState == 4) {}}
  xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  var data = "nb="+nb+"&champ="+idA+"&"+idA+"="+idC;
  xhr_object.send(data);
  // ici j'entoure l'input qui a été validé, j'ai evidemment un pb quand c'est une checbox pour laquelle j'aurai aimé aussi mettre un css en vert
  var idC = document.getElementById(idA); idC.style.border="2px solid #00FF00";
}
</script>
 
</head>
<body>
<input type="text" id="nommembre_1" name="nommembre_1"  onblur="envoi('nommembre_1',0)"> | <input type="checkbox" name="inscrit_1" id="inscrit_1" onclick="envoi('inscrit_1"><br>
<input type="text" id="nommembre_2" name="nommembre_2"  onblur="envoi('nommembre_2',0)"> | <input type="checkbox" name="inscrit_2" id="inscrit_2" onclick="envoi('inscrit_2"><br>
<input type="text" id="nommembre_3" name="nommembre_3"  onblur="envoi('nommembre_3',0)"> | <input type="checkbox" name="inscrit_3" id="inscrit_3" onclick="envoi('inscrit_3"><br>
etc.....
<input type="text" id="nommembre_200" name="nommembre_200"  onblur="envoi('nommembre_200',0)"> | <input type="checkbox" name="inscrit_200" id="inscrit_200" onclick="envoi('inscrit_200"><br></body>
</html>

Mon code PHP qui recupere l'info :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$champ=@$_GET["champ"];	
$valeur=@$_GET[$champ];
 
$champ = substr(@$_GET["champ"], 0, strrpos(@$_GET["champ"], '_'));
$nbcred = substr(@$_GET["champ"], -1);
$v_var="`$champ` = '$valeur'";
 
$res = mysql_query("SELECT * FROM `".$sufftable."liste` where `idliste`='$nbcred '");
while($cl= mysql_fetch_array($res, MYSQL_ASSOC))
{
  $modif=mysql_query("UPDATE `".$sufftable."liste` SET $v_var WHERE `idliste`='$nbcred '");
}

Mon probleme se situe dans le javascript comment réécrire cette phrase sans me taper les 200 nom de champ (input checkbox) puisque je dois recuperer la valeur du champ passer en idA, sachant que la meme fonction recupere aussi des value simple venant de input text ?

if (idA=="inscrit_1" || idA=="inscrit_2" || \\etc.................... et j en ai 200\\ )
{if(document.getElementById(idA).checked == true){idC = '1';}else{idC = '0';}}
else
{var idC = document.getElementById(idA).value;}

Merci pour votre aide
Guillaume

**mathieu** · 01/05/2018, 11h53

je crois que vous avez loupé mon message de ce matin :

Envoyé par mathieu

danielhagnoul a proposé comme moi une méthode pour obtenir la liste de toutes les cases à cocher.

ce qui n'est pas clair c'est le test que vous faites avec tous ces noms. est ce que c'est pour tester si c'est une case à cocher ou un champ texte ?
dans ce cas, il serait plus simple de mettre un 3e argument à la fonction "envoi" qui indique de quel type de champ il s'agit.

et là vous nous montrez le code PHP ce qui n'est pas pratique pour comprendre ce qu'il se passe. montrez nous le code HTML généré.

**guillaumeIOB** · 01/05/2018, 13h13

Envoyé par mathieu

je crois que vous avez loupé mon message de ce matin :

Je ne comprends toujours pas votre message par rapport a ma demande, il ne s'agit pas d'un test, et j'ai bien mis mon code html.

Je demande juste comment interpreter la value d'un input checkbox dans une fonction qui traite aussi la value d'un autre input texte, je ne sais pas comment être plus clair.

A moins que votre principale idée est de mettre un 3e argument à la fonction "envoi" qui indique de quel type de champ il s'agit, dans ce cas, c'est une solution, mais je voulais savoir si ce n'est pas possible de detecter directement dans la fonction le type de champ, plutot que de mettre un autre argument dans l'appel de la fonction ?

Merci pour votre aide.

**mathieu** · 01/05/2018, 13h38

Envoyé par kaolivier

Je ne comprends toujours pas votre message par rapport a ma demande, il ne s'agit pas d'un test, et j'ai bien mis mon code html.

je parlais du test qui est fait dans le "if", je ne disais pas que votre code est un code de test.

Envoyé par kaolivier

A moins que votre principale idée est de mettre un 3e argument à la fonction "envoi" qui indique de quel type de champ il s'agit, dans ce cas, c'est une solution, mais je voulais savoir si ce n'est pas possible de detecter directement dans la fonction le type de champ, plutot que de mettre un autre argument dans l'appel de la fonction ?

c'est peut-être possible mais je ne sais pas comment faire pour que ça fonctionne sur tous les navigateurs.
voilà un code qui fonctionne sous Firefox dernière version et qui est a tester avec des autres navigateurs :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
var element = document.getElementById(idA);
 
if ("checkbox" === element["attributes"]["type"]["value"]) {
 
    console.log("case à cocher");
 
} else if ("text" === element["attributes"]["type"]["value"]) {
 
    console.log("zone de texte");
 
}

**danielhagnoul** · 01/05/2018, 22h21

Voici un exemple, à partir de votre HTML, de ce que vous devriez faire en 2018, avec le JS d'aujourd'hui (ES2015+). La multiplication des ID, lorsqu'elle est inutile, est une mauvaise chose.

Si vous n'y comprenez rien, je suis désolé, mais il y a longtemps que je ne travaille plus avec du code obsolète pour les infâmes versions de IE. Faites un effort d'apprentissage des codes CSS, HTML, et JS.

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
<input type="text" name="nommembre_1"> |
<input type="checkbox" name="inscrit_1">
<br>
<input type="text" name="nommembre_2"> |
<input type="checkbox" name="inscrit_2">
<br>
<input type="text" name="nommembre_3"> |
<input type="checkbox" name="inscrit_3">
<br>
<input type="text" name="nommembre_200"> |
<input type="checkbox" name="inscrit_200">

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
    const
        elemsCheckox = Array.from(document.querySelectorAll('input[name^="inscrit_"]')),
        elemsText = Array.from(document.querySelectorAll('input[name^="nommembre_"]')),
        membreModifier = (numero, value, check) => {
 
            // debug, console, touche F12
            console.log(numero, value, check);
 
            // transaction AJAX avec le serveur PHP
 
        };
 
    for (const elem of elemsCheckox) {
        elem.addEventListener('change', ev => {
            let
                name = ev.target.name,
                numero = name.split('_')[1],
                check = ev.target.checked,
                value = document.querySelector('input[name="nommembre_' + numero + '"]').value;
 
 
            membreModifier(numero, value, check);
        }, {
            capture: false,
            passive: true,
            once: false
        });
    }
 
    for (const elem of elemsText) {
        elem.addEventListener('change', ev => {
            let
                name = ev.target.name,
                numero = name.split('_')[1],
                value = ev.target.value,
                check = document.querySelector('input[name="inscrit_' + numero + '"]').checked;
 
            membreModifier(numero, value, check);
        }, {
            capture: false,
            passive: true,
            once: false
        });
    }
 
    // fin code du test
}, {
    capture: false,
    passive: true,
    once: false
});

Equivalent ES5 par Babel : http://babeljs.io/repl/#?babili=fals....0&envVersion=

En ce qui me concerne, c'est ma dernière intervention sur ce sujet.

**guillaumeIOB** · 02/05/2018, 01h32

Bonsoir et merci milles fois danielhagnoul de toute votre aide, malheureusement, cette version de javascript est bien trop compliquée pour moi utilisant javascript que pour des actions mineurs.
Je suis géné du temps que vous m'avez consacré a perte, puisque je ne parviens pas à comprendre vos réponses. Je vous remercie encore et vous souhaite une excellente nuit.

Bonsoir mathieu et merci pour votre code qui m'aide considérablement en répondant à ma demande.
Par contre, j'ai un probleme lorsque le champ n'est ni une checkbox ni un input mais un simple select,

J'ai tenté une condition mais cela ne marche uniquement qu'avec la checkbox biensur, et avec les input text, mais pas avec les select qui, ce dernier ne parvient meme pas a declencher l'alert:

Code :

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

1
2
3
4
5
6
function envoi (idA) {
        var element = document.getElementById(idA);
	if ("checkbox" == element["attributes"]["type"]["value"]) {if(document.getElementById(idA).checked == true){idC = '1';} else{ idC = '0';}}
	else {idC = document.getElementById(idA).value;}
        alert ('test');
}

alors que si je degage le code du checkbox, le code : idC = document.getElementById(idA).value; fonctionne parfaitement.

Merci de votre ultime aide.
Bonne nuit.

**mathieu** · 02/05/2018, 07h26

s'il y a un menu déroulant, il n'y a pas d'attribut "type"

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
if ("select" === element["localName"]) {
 
    console.log("menu déroulant");
 
} else if ("checkbox" === element["attributes"]["type"]["value"]) {
 
    console.log("case à cocher");
 
} else if ("text" === element["attributes"]["type"]["value"]) {
 
    console.log("zone de texte");
 
}

**NoSmoking** · 02/05/2018, 11h01

Je pense qu'il faut que tu oublies ta façon d'aborder ton code, j'entends par là qu'il faut que tu supprimes le code javascript des tes balises pour affecter tes actions aux différents éléments dans la partie script.

Le gros avantage est que tu pourras affecter des fonctions différentes suivant le type de contrôle que tu as, voire même une seule fonction qui fera elle le trie suivant le cas.

Une remarque également, tes <input type="checkbox"> devrait avoir un attribut value, c'est généralement comme cela que l'on fait.

Autre remarque est que faire un envoi sur un onblur est peut être un peu excessif à mon sens, pas le droit à l'erreur ou alors autre envoi en perspective.

Gerer des checkbox dans une fonction

JavaScript

Discussions similaires

Partager

Partager