Discussion :

[guillaumeIOB]

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]

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]

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]

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]

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]

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]

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]

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]

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

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]

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]

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.

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]

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]

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]

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]

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.