danielhagnoul

L'utilisateur doit pouvoir se tromper ou changer d'avis, il doit donc y avoir un "reset" disponible.

C'est la gestion de ce "reset" qui a été la partie la plus énervante de ce code. J'ai découvert qu'il est impossible de mélanger un <input type="reset"> avec un document.querySelector( 'maForm' ).reset().

De même, un dispachEvent() sur le "reset" ou un document.querySelector( 'maForm' ).reset() sont capricieux.

Il a fallu que j'utilise un button classique avec une réinitialisation "manuelle" et que je double une condition if pour y arriver.

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
<form id="interetForm">
    <p>
        <label for="interet">Vous pouvez sélectionné, au maximum, 10 options : </label>
    </p>
    <p>
        <output id="nbOpSel"></output> <!-- contiendra le nombre d'option sélectionnées-->
    </p>
    <p>
        <output id="result"></output> <!-- contiendra la liste des options sélectionnées-->
    </p>
    <p>
        <button id="btnReset">Réinitialiser</button> <!-- l'utilisateur doit pouvoir changer d'avis -->
    </p>
    <select id="interet" size="10" multiple></select>
        <option value="musique">Musique</option> 
        <option value="cinema">Cinema</option>
        <option value="sport">Sport</option>
        <option value="jeuvideo">Jeu-Vidéo</option>
        <option value="lecture">Lecture</option>
        <option value="musique2">Musique2</option> 
        <option value="cinema2">Cinema2</option>
        <option value="sport2">Sport2</option>
        <option value="jeuvideo2">Jeu-Vidéo2</option>
        <option value="lecture2">Lecture2</option>
        <option value="musique3">Musique3</option> 
        <option value="cinema3">Cinema3</option>
        <option value="sport3">Sport3</option>
        <option value="jeuvideo3">Jeu-Vidéo3</option>
        <option value="lecture3">Lecture3</option>
        <option value="musique4">Musique4</option> 
        <option value="cinema4">Cinema4</option>
        <option value="sport4">Sport4</option>
        <option value="jeuvideo4">Jeu-Vidéo4</option>
        <option value="lecture4">Lecture4</option>
    </select>
</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
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
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
    const 
        elemInteret = document.querySelector( '#interet' ),
        elemNbOpSel = document.querySelector( '#nbOpSel' ),
        elemBtnReset = document.querySelector( '#btnReset' ),
        elemResult = document.querySelector( '#result' );
 
    let 
        arOptSel = [], // contiendra les options sélectionnées
        limite = 10; // nombre maximum d'option sélectionables
 
    /*
     * select : gestion du nombres d'option sélectionnées
     */ 
    elemInteret.addEventListener( 'change', ev => {
        arOptSel = Array.from( ev.target.selectedOptions );
 
        let 
            arOptSelLength = arOptSel.length,
            str = "";
 
        for ( const opt of arOptSel ){
            str += opt.value + ', ';
        }
 
        elemResult.value = str;
 
        if ( arOptSelLength < limite ){
 
            elemNbOpSel.value = `Vous avez sélectionné ${ arOptSelLength } options`;
 
        } else if ( arOptSelLength === limite ) {
 
            elemNbOpSel.value = `Vous avez sélectionné ${ arOptSelLength } options`;
 
            elemInteret.setAttribute( 'disabled', 'disabled' );
 
        } else if ( arOptSelLength > limite ){
 
            elemNbOpSel.value = `Erreur ! ${ arOptSelLength } options sélectionnées`;
 
            elemInteret.setAttribute( 'disabled', 'disabled' );
        }
 
        /*
         * Si l'utilisateur à sélectionné plus de 10 options (shift + clic)
         * il faut réinitialiser le forùulaire
         */ 
        setTimeout( () => {
            if ( arOptSelLength > limite && elemInteret.getAttribute( 'disabled' ) === 'disabled' ) {
                document.querySelector( '#interetForm' ).reset();
                elemInteret.removeAttribute( 'disabled' );
            }
        }, 1500 );
 
    }, { capture: false, passive: true, once: false } );
 
    /*
     * button réinitialiser : gestion manuelle
     */ 
    elemBtnReset.addEventListener( 'click',  ev => {
        for ( const opt of Array.from( elemInteret.querySelectorAll( 'option' ) ) ){
            opt.removeAttribute( 'selected' );
        }
 
        elemInteret.removeAttribute( 'disabled' );
    }, { capture: false, passive: true, once: false } );
 
    // fin code du test
 
}, { capture: false, passive: true, once: false } );

Exemple

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)

EDIT 2018-04-20

Si l'on remplace le <input type="reset"> par <button type="reset">Réinitialiser</button> on peut alors utiliser un bouton réinitialiser et document.querySelector( '#formChoix' ).reset(); dans le même formulaire.

Voir mon exemple pour des checkbox : https://www.developpez.net/forums/d1.../#post10178584

Licence Creative Commons Attribution 2.0 Belgique