JavaScript et formulaire HTML

**zipbox** · 19/04/2018, 15h22

Bonjour à tous,

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

Nom : form.jpg
Affichages : 157
Taille : 26,5 Ko

si besoin, voici le code HTML :

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
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

**zipbox** · 19/04/2018, 19h07

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 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
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,

**NoSmoking** · 19/04/2018, 19h15

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 :

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

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 :

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

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

**zipbox** · 19/04/2018, 19h35

Super merci . . .

Je vais continuer de travailler avec cela . . .

**danielhagnoul** · 19/04/2018, 23h29

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)

**zipbox** · 20/04/2018, 12h42

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

**zipbox** · 20/04/2018, 18h20

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 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
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>

**danielhagnoul** · 20/04/2018, 23h39

Exemple :

Code CSS :

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

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 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
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 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
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 } );

**zipbox** · 21/04/2018, 09h30

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

JavaScript et formulaire HTML

JavaScript

Discussions similaires

Partager

Partager