JavaScript et formulaire HTML

Version imprimable

1 pi�ce(s) jointe(s)

Bonjour � tous,

J�ai un formulaire dans une page HTML, j�aimerais bien ajouter 3 fonctions � cette page :

Pi�ce jointe 371520

si besoin, voici le code HTML :

Code:

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
<html>
<head> <title> Exemple </title> </head>
 
<style type="text/css">
table { border-collapse: collapse; }
td    { border: 1px solid black; }
</style>
 
<script language="JavaScript" type="text/JavaScript">
<!--
 
//-->
</script>
 
<body>
 
<form name="form123" action="page123.html" method="get">
 
<table border="1">
<tr> <td colspan="2" rowspan="1" width="210" bgcolor="#FFFFDD"> &nbsp;&nbsp;&nbsp; Rubrique 1 </td> </tr>
<tr> <td width="20"> <input type="checkbox" name="i01" /> </td> <td> &nbsp;choix 1 <br> </td> </tr>
<tr> <td> <input type="checkbox" name="i02" /> </td> <td> &nbsp;choix 2 <br> </td> </tr>
<tr> <td> <input type="checkbox" name="i03" /> </td> <td> &nbsp;choix 3 <br> </td> </tr>
</table>
 
<br><br>
 
<table border="1">
<tr> <td colspan="2" rowspan="1" width="210" bgcolor="#FFFFDD"> &nbsp;&nbsp;&nbsp; Rubrique 2 </td> </tr>
<tr> <td width="20"> <input type="checkbox" name="i04" /> </td> <td> &nbsp;choix 4 <br> </td> </tr>
<tr> <td> <input type="checkbox" name="i05" /> </td> <td> &nbsp;choix 5 <br> </td> </tr>
<tr> <td> <input type="checkbox" name="i06" /> </td> <td> &nbsp;choix 6 <br> </td> </tr>
<tr> <td> <input type="checkbox" name="i07" /> </td> <td> &nbsp;choix 7 <br> </td> </tr>
</table>
 
<br><br>
 
<table border="1">
<tr> <td colspan="2" rowspan="1" width="210" bgcolor="#FFFFDD"> &nbsp;&nbsp;&nbsp; Rubrique 3 </td> </tr>
<tr> <td width="20"> <input type="checkbox" name="i08" /> </td> <td> &nbsp;choix 8 <br> </td> </tr>
<tr> <td> <input type="checkbox" name="i09" /> </td> <td> &nbsp;choix 9 <br> </td> </tr>
<tr> <td> <input type="checkbox" name="i10" /> </td> <td> &nbsp;choix 10 <br> </td> </tr>
<tr> <td> <input type="checkbox" name="i11" /> </td> <td> &nbsp;choix 11 <br> </td> </tr>
<tr> <td> <input type="checkbox" name="i12" /> </td> <td> &nbsp;choix 12 <br> </td> </tr>
</table>
 
<br><br>
 
<input type="submit" value="Envoyer" /> 
<input type="reset" value="Annuler" />
 
</form>
 
</body>
</html>

Fonction 1 : on ne peut cocher au maximum que 10 choix( sur les 12) apr�s cela bloque.
Fonction 2 : indiquer � c�t� du titre de la rubrique le nombre de choix coch�s, exemple : Rubrique 1 (2 choix)
Fonction 3 : si on clique sur un titre d�une rubrique, cela affiche (ou masque) les choix en dessous du titre.

Je pense qu�un bout de code JavaScript dans la page, devrait permettre cela.

J�aimerais bien apprendre � faire cela, manipuler les valeurs d�un formulaire d�une page HTML.

Mais : je ne sais pas, par o� commencer. Si une personne peut me donner un peu d�aide.

Grandement merci, pour vos remarques et conseils.

Jean-Christophe

:?

Re-Bonjour,

j'ai bricol� un truc, cela permet de bloquer les 10 coches sur 12, mais bon, je ne penses pas que c'est bien optimis�,

Code:

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<html>
<head> <title> Exemple </title> </head>
 
<style type="text/css">
table { border-collapse: collapse; }
td    { border: 1px solid black; }
</style>
 
<script language="JavaScript" type="text/JavaScript">
<!--
function f123(i) {
 
  // n=i.id.substr(1,2);
 
  n = 0;
 
  if (document.getElementById("i01").checked == true) n++;
  if (document.getElementById("i02").checked == true) n++;
  if (document.getElementById("i03").checked == true) n++;
  if (document.getElementById("i04").checked == true) n++;
  if (document.getElementById("i05").checked == true) n++;
  if (document.getElementById("i06").checked == true) n++;
  if (document.getElementById("i07").checked == true) n++;
  if (document.getElementById("i08").checked == true) n++;
  if (document.getElementById("i09").checked == true) n++;
  if (document.getElementById("i10").checked == true) n++;
  if (document.getElementById("i11").checked == true) n++;
  if (document.getElementById("i12").checked == true) n++;
 
  // alert(n);
 
  if (n > 10) document.getElementById(i.id).checked = false;
 
}
//-->
</script>
 
<body>
 
<form name="form123" action="page123.html" method="get">
 
<table border="1">
<tr> <td colspan="2" rowspan="1" width="210" bgcolor="#FFFFDD"> &nbsp;&nbsp;&nbsp; Rubrique 1 </td> </tr>
<tr> <td width="20"> <input type="checkbox" name="i01" id="i01" onclick="f123(this)" /> </td> <td> &nbsp;choix 1 <br> </td> </tr>
<tr> <td> <input type="checkbox" name="i02" id="i02" onclick="f123(this)" /> </td> <td> &nbsp;choix 2 <br> </td> </tr>
<tr> <td> <input type="checkbox" name="i03" id="i03" onclick="f123(this)" /> </td> <td> &nbsp;choix 3 <br> </td> </tr>
</table>
 
<br><br>
 
<table border="1">
<tr> <td colspan="2" rowspan="1" width="210" bgcolor="#FFFFDD"> &nbsp;&nbsp;&nbsp; Rubrique 2 </td> </tr>
<tr> <td width="20"> <input type="checkbox" name="i04" id="i04" onclick="f123(this)" /> </td> <td> &nbsp;choix 4 <br> </td> </tr>
<tr> <td> <input type="checkbox" name="i05" id="i05" onclick="f123(this)" /> </td> <td> &nbsp;choix 5 <br> </td> </tr>
<tr> <td> <input type="checkbox" name="i06" id="i06" onclick="f123(this)" /> </td> <td> &nbsp;choix 6 <br> </td> </tr>
<tr> <td> <input type="checkbox" name="i07" id="i07" onclick="f123(this)" /> </td> <td> &nbsp;choix 7 <br> </td> </tr>
</table>
 
<br><br>
 
<table border="1">
<tr> <td colspan="2" rowspan="1" width="210" bgcolor="#FFFFDD"> &nbsp;&nbsp;&nbsp; Rubrique 3 </td> </tr>
<tr> <td width="20"> <input type="checkbox" name="i08" id="i08" onclick="f123(this)" /> </td> <td> &nbsp;choix 8 <br> </td> </tr>
<tr> <td> <input type="checkbox" name="i09" id="i09" onclick="f123(this)" /> </td> <td> &nbsp;choix 9 <br> </td> </tr>
<tr> <td> <input type="checkbox" name="i10" id="i10" onclick="f123(this)" /> </td> <td> &nbsp;choix 10 <br> </td> </tr>
<tr> <td> <input type="checkbox" name="i11" id="i11" onclick="f123(this)" /> </td> <td> &nbsp;choix 11 <br> </td> </tr>
<tr> <td> <input type="checkbox" name="i12" id="i12" onclick="f123(this)" /> </td> <td> &nbsp;choix 12 <br> </td> </tr>
</table>
 
<br><br>
 
<input type="submit" value="Envoyer" /> 
<input type="reset" value="Annuler" />
 
</form>
 
</body>
</html>

il me tarde de d�couvrir plus JavaScript,

:?

19/04/2018, 18h15
NoSmoking

Bonjour,
un indice pour commencer tu peux r�cup�rer TOUS tes type="checkbox" avec la m�thode document.querySelectorAll(selecteur) en lui passant comme s�lecteur "[type=checkbox]".

Code:

var oInputs = document.querySelectorAll("[type=checkbox]");

Maintenant si tu veux connaitre combien sont coch�s on change presque rien, on modifie juste le s�lecteur comme suit

Code:

var oInputs = document.querySelectorAll("[type=checkbox]:checked");
19/04/2018, 18h35
zipbox

Super merci . . .

Je vais continuer de travailler avec cela . . .

:D
19/04/2018, 22h29
danielhagnoul

:salut:

Exemple pour un select, voir : Select multiple avec une limite et une r�initialisation

Nota bene pour les utilisateurs de Firefox

J'ai adopt� les modules ES2015 partout, c'est tellement pratique, mais Firefox est en retard par rapport � Chrome et Edge, voir Can I use module : https://caniuse.com/#search=module.
La sortie de Firefox 60 (normal) est pr�vue pour le 2018-05-09 (https://wiki.mozilla.org/RapidRelease/Calendar)
20/04/2018, 11h42
zipbox

Super merci . . . Je vais regarder cela . . .

:D

Re-Bonjour,

J'ai utilis� : document.querySelectorAll("[type=checkbox]:checked"); c'est bien pratique,

j'ai bricol� de quoi compter les coches, par rubrique, pour les afficher avec : document.getElementById("").innerHTML.

me reste � voir pour 'afficher/masquer'

Code:

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<html>
<head> <title> Exemple </title> </head>
 
<style type="text/css">
table { border-collapse: collapse; }
td    { border: 1px solid black; }
</style>
 
<script language="JavaScript" type="text/JavaScript">
<!--
function f123(i) {
 
  var d = document.querySelectorAll("[type=checkbox]:checked");
  if (d.length > 10) document.getElementById(i.id).checked = false;
 
  var n1 = 0;
  var n2 = 0;
  var n3 = 0;
 
  for (var j = 0; j < d.length; j++) {
 
    var v = d[j].name;
 
    var v1 = "01 02 03";
    var v2 = "04 05 06 07";
    var v3 = "08 09 10 11 12";
 
    if (v1.indexOf(v.substr(1,2)) > -1) n1++;
    if (v2.indexOf(v.substr(1,2)) > -1) n2++;
    if (v3.indexOf(v.substr(1,2)) > -1) n3++;
  }
 
  document.getElementById("r1").innerHTML=" &nbsp;&nbsp;&nbsp; Rubrique 1 : <font color='#ff0000'>" + n1 + "</font>";
  document.getElementById("r2").innerHTML=" &nbsp;&nbsp;&nbsp; Rubrique 2 : <font color='#ff0000'>" + n2 + "</font>";
  document.getElementById("r3").innerHTML=" &nbsp;&nbsp;&nbsp; Rubrique 3 : <font color='#ff0000'>" + n3 + "</font>";
 
}
//-->
</script>
 
<body>
 
<form name="form123" action="page123.html" method="get">
 
<table border="1">
<tr> <td colspan="2" rowspan="1" width="210" bgcolor="#FFFFDD" id="r1"> &nbsp;&nbsp;&nbsp; Rubrique 1 </td> </tr>
<tr> <td width="20"> <input type="checkbox" name="i01" id="i01" onclick="f123(this)" /> </td> <td> &nbsp;choix 1 </td> </tr>
<tr> <td> <input type="checkbox" name="i02" id="i02" onclick="f123(this)" /> </td> <td> &nbsp;choix 2 </td> </tr>
<tr> <td> <input type="checkbox" name="i03" id="i03" onclick="f123(this)" /> </td> <td> &nbsp;choix 3 </td> </tr>
</table>
 
<br><br>
 
<table border="1">
<tr> <td colspan="2" rowspan="1" width="210" bgcolor="#FFFFDD" id="r2"> &nbsp;&nbsp;&nbsp; Rubrique 2 </td> </tr>
<tr> <td width="20"> <input type="checkbox" name="i04" id="i04" onclick="f123(this)" /> </td> <td> &nbsp;choix 4 </td> </tr>
<tr> <td> <input type="checkbox" name="i05" id="i05" onclick="f123(this)" /> </td> <td> &nbsp;choix 5 </td> </tr>
<tr> <td> <input type="checkbox" name="i06" id="i06" onclick="f123(this)" /> </td> <td> &nbsp;choix 6 </td> </tr>
<tr> <td> <input type="checkbox" name="i07" id="i07" onclick="f123(this)" /> </td> <td> &nbsp;choix 7 </td> </tr>
</table>
 
<br><br>
 
<table border="1">
<tr> <td colspan="2" rowspan="1" width="210" bgcolor="#FFFFDD" id="r3"> &nbsp;&nbsp;&nbsp; Rubrique 3 </td> </tr>
<tr> <td width="20"> <input type="checkbox" name="i08" id="i08" onclick="f123(this)" /> </td> <td> &nbsp;choix 8 </td> </tr>
<tr> <td> <input type="checkbox" name="i09" id="i09" onclick="f123(this)" /> </td> <td> &nbsp;choix 9 </td> </tr>
<tr> <td> <input type="checkbox" name="i10" id="i10" onclick="f123(this)" /> </td> <td> &nbsp;choix 10 </td> </tr>
<tr> <td> <input type="checkbox" name="i11" id="i11" onclick="f123(this)" /> </td> <td> &nbsp;choix 11 </td> </tr>
<tr> <td> <input type="checkbox" name="i12" id="i12" onclick="f123(this)" /> </td> <td> &nbsp;choix 12 </td> </tr>
</table>
 
<br><br>
 
<input type="submit" value="Envoyer" /> 
<input type="reset" value="Annuler" />
 
</form>
 
</body>
</html>

Exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* problème avec Chrome 66b */
input[type='checkbox'] {
    border: 1pt solid black;
    width: 1rem;
    height: 1rem;
}
fieldset {
    width: 20rem;
}
label {
    display: block;
}
button {
    margin: 0.6rem;
}

Code:

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
57
58
59
60
61
62
63
64
65
<form id="formChoix">
    <div>
        <output id="result">' '</output> <!-- contiendra les ID des éléme,ts sélectionnés-->
    </div>
    <div>
        <fieldset>
            <legend>Rubrique 1</legend>
            <label for="i01">
                Choix 1 :
                <input type="checkbox" name="i01" id="i01">
            </label>
            <label for="i02">
                Choix 2 : 
                <input type="checkbox" name="i02" id="i02">
            </label>
            <label for="i03">
                Choix 3 :
                <input type="checkbox" name="i03" id="i03">
            </label>
        </fieldset>
        <fieldset>
            <legend>Rubrique 2</legend>
            <label for="i04"> 
                Choix 4 :
                <input type="checkbox" name="i04" id="i04">
            </label> 
            <label for="i05"> 
                Choix 5 :
                <input type="checkbox" name="i05" id="i05">
            </label> 
            <label for="i06"> 
                Choix 6 :
                <input type="checkbox" name="i06" id="i06">
            </label>
            <label for="i07"> 
                Choix 7 : 
                <input type="checkbox" name="i07" id="i07">
            </label>
        </fieldset>
        <fieldset>
            <legend>Rubrique 3</legend>
            <label for="i08"> 
                Choix 8 :
                <input type="checkbox" name="i08" id="i08">
            </label>
            <label for="i09"> 
                Choix 9  
                <input type="checkbox" name="i09" id="i09">
            </label>
            <label for="i10"> 
                Choix 10 :
                <input type="checkbox" name="i10" id="i10">
            </label>
            <label for="i11"> 
                Choix 11 :
                <input type="checkbox" name="i11" id="i11">
            </label>
            <label for="i12"> 
                Choix 12 :
                <input type="checkbox" name="i12" id="i12">
            </label>
        </fieldset>
    </div>
    <button type="reset">Réinitialiser</button>
</form>

Code:

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
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
    let 
        elemChecked = [];
 
    const 
        elemCheckbox = Array.from( document.querySelectorAll( 'input[type="checkbox"]' ) ),
        elemresult = document.querySelector( '#result' ),
        handleCheckboxEvent = ev => {
 
            // debug, console, touche F12
            // console.log( `${ ev.target.id } est sélectionné` );
 
            elemChecked = Array.from( document.querySelectorAll( 'input[type="checkbox"]:checked' ) );
 
            let str = '';
 
            for ( const item of elemChecked ) {
                str += item.id + ', ';
            }
 
            elemresult.value = str;
 
            // debug
            console.clear();
            console.log( `Il y a ${ elemChecked.length } sélectionnés.` );
 
            for ( const elem of elemChecked ) {
                console.log( `${ elem.id } est sélectionné` );
            }
 
            if ( elemChecked.length > 10 ) {
                document.querySelector( '#formChoix' ).reset();
                elemChecked = [];
 
                // debug
                console.clear();
            }
        };
 
    for ( const elem of elemCheckbox ) {
        elem.addEventListener( 'input', handleCheckboxEvent, { capture: false, passive: true, once: false } );
    }
 
    // fin code du test
 
}, { capture: false, passive: true, once: false } );

21/04/2018, 08h30
zipbox

Super, merci... Mais, ou la la, dur dur, pour ma petite t�te... je vais �tudier cela... Merci...

:D