par , 03/06/2018 à 11h36 (1050 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.
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 :
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> |
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 :
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> |
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
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 :
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> |
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
Licence Creative Commons Attribution 2.0 Belgique
Consulter le profil
Marquer ce blog comme lu
