IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Voir le flux RSS

danielhagnoul

Form 3 : Les fonctions kCreateFormDOMObject et kFromToDatas

Noter ce billet
par , 03/06/2018 à 12h36 (718 Affichages)
Suite de :



La fonction kCreateFormDOMObject crée un objet DOM contenant un lien vers chaque élément nommé (name ou data-name pris en compte) composant le formulaire.

Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
kCreateFormDOMObject(elemForm = kRequiredParamVerbose({
    param: "elemForm",
    type: "htmlFormElement",
    info: "un élément FORM"
  }),
  boolChildren = true
)

Le code de base de cette fonction et son comportement sont identiques à kCreateDOMObject(). On y a simplement (sic) ajouté le traitement des name et data-name en tenant compte des particularité des boutons radio et des checkbox.

Construisons notre objet et manipulons deux propriétés, exemple n° 6 :

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
<form id="myForm">
    <fieldset>
        <legend>Choisir un pays</legend>
        <label>France
            <input type="radio" name="pays" data-name="france" value="France">
        </label>
        <br>
        <label>Belgique
            <input type="radio" name="pays" data-name="belgique" value="Belgique">
        </label>
        <br>
        <label data-name="labelEspagne">Espagne
            <input type="radio" name="pays" data-name="espagne" value="Espagne">
        </label>
        <br>
    </fieldset>
    <br>
    <button type="submit" name="submit">Valider</button>
    <button type="reset" name="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
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
    console.log(`Window load : ${new kDvjhDate()}`);
 
    // début code du test
 
    dvjhUtilitiesBoolDebug = true;
 
    const elemForm = k$('#myForm');
 
    if (kFormNameUnique(elemForm)) {
        let oElemForm = kCreateFormDOMObject(elemForm);
 
        console.log(kLogVars`L'objet oElemForm contient les propriétés : ${ oElemForm }`);
 
        oElemForm.dom_espagne.style.margin = '1rem';
        oElemForm.dom_labelEspagne.style.color = 'red';
    }
 
    // fin code du test
 
    kIDUnique();
}, {
    capture: false,
    passive: true,
    once: false
});

Résultats dans la console :

kFormNameUnique, liste des noms du FORM : pays, france, belgique, labelEspagne, espagne, submit, reset
L'objet oElemForm contient les propriétés : dom_0 = [object HTMLFieldSetElement], dom_1 = [object HTMLLegendElement], dom_2 = [object HTMLLabelElement], dom_france = [object HTMLInputElement], dom_5 = [object HTMLLabelElement], dom_belgique = [object HTMLInputElement], dom_labelEspagne = [object HTMLLabelElement], dom_espagne = [object HTMLInputElement], dom_submit = [object HTMLButtonElement], dom_reset = [object HTMLButtonElement]
formTest6

Exemple n° 7 :

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
<form id="myForm">
    <fieldset>
        <legend>Choisir des pays</legend>
        <label>France
            <input type="checkbox" name="pays[]" data-name="france" value="France">
        </label>
        <br>
        <label>Belgique
            <input type="checkbox" name="pays[]" data-name="belgique" value="Belgique">
        </label>
        <br>
        <label>Espagne
            <input type="checkbox" name="pays[]" data-name="espagne" value="Espagne">
        </label>
        <br>
    </fieldset>
    <fieldset>
        <legend>Goumandises</legend>
        <label>Chocolat
            <input type="checkbox" name="chocolat" value="Chocolat">
        </label>
        <br>
        <label>Nouget
            <input type="checkbox" name="nougat" value="Nougat">
        </label>
        <br>
    </fieldset>
    <br>
    <button type="submit" name="submit">Valider</button>
    <button type="reset" name="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
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
    console.log(`Window load : ${new kDvjhDate()}`);
 
    // début code du test
 
    dvjhUtilitiesBoolDebug = true;
 
    const elemForm = k$('#myForm');
 
    if (kFormNameUnique(elemForm)) {
 
        let oElemForm = kCreateFormDOMObject(elemForm);
 
        console.log(kLogVars `L'objet oElemForm contient les propriétés : ${ oElemForm }`);
 
        elemForm.addEventListener('submit', ev => {
            ev.stopPropagation();
            ev.preventDefault();
 
            if (oElemForm.dom_belgique.checked && oElemForm.dom_chocolat.checked) {
                alert(`Oufti ! Vous avez bon goût !`);
            }
        });
    }
 
    // fin code du test
 
    kIDUnique();
}, {
    capture: false,
    passive: true,
    once: false
});

Résultats dans la console :

kFormNameUnique, liste des noms du FORM : pays[], france, belgique, espagne, chocolat, nougat, submit, reset
L'objet oElemForm contient les propriétés : dom_0 = [object HTMLFieldSetElement], dom_1 = [object HTMLLegendElement], dom_2 = [object HTMLLabelElement], dom_france = [object HTMLInputElement], dom_5 = [object HTMLLabelElement], dom_belgique = [object HTMLInputElement], dom_8 = [object HTMLLabelElement], dom_espagne = [object HTMLInputElement], dom_11 = [object HTMLFieldSetElement], dom_12 = [object HTMLLegendElement], dom_13 = [object HTMLLabelElement], dom_chocolat = [object HTMLInputElement], dom_16 = [object HTMLLabelElement], dom_nougat = [object HTMLInputElement], dom_submit = [object HTMLButtonElement], dom_reset = [object HTMLButtonElement]
formTest7


Validation de formulaire, exemple n° 8 :

La fonction kFromToDatas convertit toutes (inclus les boutons radio et les checkbox) les informations du formulaire en un objet JSON. Il est alors facile d'examiner la cohérence des données (la validation finale doit toujours se faire côté serveur). On peut ajouter toutes les propriétés nécessaires avant l'envoi au serveur.

HTML de l'exemple n° 7

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
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
    console.log(`Window load : ${new kDvjhDate()}`);
 
    // début code du test
 
    dvjhUtilitiesBoolDebug = true;
 
    const elemForm = k$('#myForm');
 
    if (kFormNameUnique(elemForm)) {
 
        let oElemForm = kCreateFormDOMObject(elemForm);
 
        console.log(kLogVars `L'objet oElemForm contient les propriétés : ${ oElemForm }`);
 
        elemForm.addEventListener('submit', ev => {
            ev.stopPropagation();
            ev.preventDefault();
 
            if (oElemForm.dom_belgique.checked && oElemForm.dom_chocolat.checked) {
                alert(`Oufti ! Vous avez bon goût !`);
            }
 
            // récupérations des données au format JSON
            let oDatas = kFromToDatas(elemForm);
 
            oDatas['dateTime'] = (new kDvjhDate()).toString(); // ex : 2018-05-18T17:35:02.757+0200
 
            console.log(oDatas);
        });
    }    
 
    // fin code du test
 
    kIDUnique();
}, {
    capture: false,
    passive: true,
    once: false
});

Résultats dans la console :

{chocolat: "Chocolat", pays[]: Array(2), dateTime: "2018-06-02T20:11:46.608+0200"}

pays[]: (2) ["France", "Belgique"]
formTest8

Exemple n° 9 :

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
<form id="myForm">
    <fieldset>
        <legend>Un peu de tout</legend>
        <label>Nom
            <input type="text" name="nom" value="">
        </label>
        <br>
        <div data-name="divAdresse">
            <label>Rue
                <input type="text" name="rue" value="">
            </label>
            <br>
            <label>Ville
                <input type="text" name="ville" value="">
            </label>
            <br>
        </div>
    </fieldset>
    <fieldset>
        <legend>Pourquoi pas</legend>
        <label>Note du chocolat noir (de 1 à 10) :
            <progress data-name="noteChocolatNoir" min="1" max="10" step="1" value="5"></progress>
        </label>
        <br>
        <label>Consommation de Nougat (en %) :
            <meter data-name="consommationNouget" min="0" max="100" step="1" value="10"></meter>
        </label>
        <br>
    </fieldset>
    <br>
    <button type="submit" name="submit">Valider</button>
    <button type="reset" name="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
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
    console.log(`Window load : ${new kDvjhDate()}`);
 
    // début code du test
 
    dvjhUtilitiesBoolDebug = true;
 
    const elemForm = k$('#myForm');
 
    if (kFormNameUnique(elemForm)) {
 
        let oElemForm = kCreateFormDOMObject(elemForm);
 
        console.log(kLogVars `L'objet oElemForm contient les propriétés : ${ oElemForm }`);
 
        oElemForm.dom_divAdresse.style.color = 'blue';
        oElemForm.dom_divAdresse.style.fontSize = '125%';
        oElemForm.dom_divAdresse.style.margin = '1rem';
 
        elemForm.addEventListener('submit', ev => {
            ev.stopPropagation();
            ev.preventDefault();
 
            // récupérations des données au format JSON
            let oDatas = kFromToDatas(elemForm);
 
            oDatas['noteChocolatNoir'] = oElemForm.dom_noteChocolatNoir.value;
            oDatas['consommationNouget'] = oElemForm.dom_consommationNouget.value;
 
            oDatas['dateTime'] = (new kDvjhDate()).toString(); // ex : 2018-05-18T17:35:02.757+0200
 
            console.log(oDatas);
        });
    }    
 
    // fin code du test
 
    kIDUnique();
}, {
    capture: false,
    passive: true,
    once: false
});

Résultats dans la console :

kFormNameUnique, liste des noms du FORM : nom, divAdresse, rue, ville, noteChocolatNoir, consommationNouget, submit, reset
L'objet oElemForm contient les propriétés : dom_0 = [object HTMLFieldSetElement], dom_1 = [object HTMLLegendElement], dom_2 = [object HTMLLabelElement], dom_nom = [object HTMLInputElement], dom_divAdresse = [object HTMLDivElement], dom_6 = [object HTMLLabelElement], dom_rue = [object HTMLInputElement], dom_9 = [object HTMLLabelElement], dom_ville = [object HTMLInputElement], dom_12 = [object HTMLFieldSetElement], dom_13 = [object HTMLLegendElement], dom_14 = [object HTMLLabelElement], dom_noteChocolatNoir = [object HTMLProgressElement], dom_17 = [object HTMLLabelElement], dom_consommationNouget = [object HTMLMeterElement], dom_submit = [object HTMLButtonElement], dom_reset = [object HTMLButtonElement]
{nom: "moi", rue: "chaussée", ville: "elle", noteChocolatNoir: 5, consommationNouget: 10, …}

dateTime: "2018-06-03T09:22:43.587+0200"
formTest9

Exemple n° 10 : un QCM.

formTest10

Exemple n° 11 : deux liste liées, choisir un pays puis la ville dans ce pays.[LIST=1]

formTest11

Nom : 88x31.png
Affichages : 85
Taille : 1,4 Ko Licence Creative Commons Attribution 2.0 Belgique

Envoyer le billet « Form 3 : Les fonctions kCreateFormDOMObject et kFromToDatas » dans le blog Viadeo Envoyer le billet « Form 3 : Les fonctions kCreateFormDOMObject et kFromToDatas » dans le blog Twitter Envoyer le billet « Form 3 : Les fonctions kCreateFormDOMObject et kFromToDatas » dans le blog Google Envoyer le billet « Form 3 : Les fonctions kCreateFormDOMObject et kFromToDatas » dans le blog Facebook Envoyer le billet « Form 3 : Les fonctions kCreateFormDOMObject et kFromToDatas » dans le blog Digg Envoyer le billet « Form 3 : Les fonctions kCreateFormDOMObject et kFromToDatas » dans le blog Delicious Envoyer le billet « Form 3 : Les fonctions kCreateFormDOMObject et kFromToDatas » dans le blog MySpace Envoyer le billet « Form 3 : Les fonctions kCreateFormDOMObject et kFromToDatas » dans le blog Yahoo

Mis à jour 08/06/2018 à 11h29 par danielhagnoul

Catégories
Javascript , Développement Web , ES2015

Commentaires