Lecture JSON et pré-coché case et bouton d'un formulaire
Bonjour,
J'ai une petite application météo, qui me permet de sélectionner les informations et les unités de mesure à afficher.
J'aimerai lorsque je vais sur mon formulaire, pré-coché les cases et bouton de mon formulaire après le lecture de mon fichier json.
Voici mes fichiers:
mon formulaire config.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
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>View Choice</title>
<link rel="stylesheet" href="css/styleopacity.css" type="text/css">
</head>
<body >
<div id="background_opacity">
<form name="monFormulaire" method="post" action="traitement.php"><!--Début de mon formulaire-->
<h3><u>Veuillez choisir les options que vous désirez voir</u></h3>
<div id="contener"><!--mon contener-->
<nav class="element"><!--première box-->
<h4>Navigation</h4>
<ul>
<li><a href="index.html">Page d'accueil</a></li>
</ul>
</nav>
<div class="element"><!--troisième box-->
<h4><u>Unités de mesure: </u></h4>
<ul><!--Les boutons radio-->
<li><b>Degré:</b>
<ul>
<li><input type="radio" name="degre" value="0" id="celcius" type="checkbox" checked/> <label for="celcius">Celcius </label></li>
<li><input type="radio" name="degre" value="1" id="fahrenheit"/> <label for="fahrenheit">Fahrenheit</label></li>
<li><input type="radio" name="degre" value="2" id="kelvin"/> <label for="kelvin">Kelvin</label></li>
</ul>
</li>
<li><b>Vitesse du vent:</b>
<ul>
<li><input type="radio" name="vent" value="0" id="m/s" type="checkbox" checked/> <label for="m/s">m/s</label></li>
<li><input type="radio" name="vent" value="1" id="Km/h"/> <label for="Km/h">Km/h</label></li>
<li><input type="radio" name="vent" value="2" id="kts"/> <label for="kts">kts</label> </li>
</ul>
</li>
<li><b>Visibilité en:</b>
<ul>
<li><input type="radio" name="visib" value="0" id="m" type="checkbox" checked/> <label for="m">m</label></li>
<li><input type="radio" name="visib" value="1" id="Km"/> <label for="Km">Km</label></li>
</ul>
</li>
<li><b>Pression en:</b>
<ul>
<li><input type="radio" name="press" value="0" id="hPa" type="checkbox" checked/> <label for="hPa">hPa</label></li>
<li><input type="radio" name="press" value="1" id="bar"/> <label for="bar">bar</label></li>
</ul>
</li>
</ul>
</div>
<div class="element"><!--quatrième box-->
<h4><b><u>Que voulez vous voir: </u></b></h4>
<ul><!--les cases à cocher-->
<li>Température<input type="checkbox" name="Temperature" value="1"/></li>
<li>Couverture nuageuse<input type="checkbox" name="Nuage" value="1"/></li>
<li>Vitesse du vent<input type="checkbox" name="VitesseVent" value="1"/></li>
<li>Pression<input type="checkbox" name="Pression" value="1"/></li>
<li>Visibilité<input type="checkbox" name="Visibilité" value="1"/></li>
<li>Description<input type="checkbox" name="Description" value="1"/></li>
<!--<li>Pluie<input type="checkbox" name="Pluie"/></li>-->
<!--<li>Lever du soleil<input type="checkbox" name="Lever du soleil"/></li>-->
<!--<li>Coucher du soleil<input type="checkbox" name="Coucher du soleil"/></li>-->
<!--<li>Durée du jour<input type="checkbox" name="Durée du jour"/></li>-->
<!--<li>Lever de la lune<input type="checkbox" name="Lever de la lune"/></li>-->
<!--<li>Coucher de la lune<input type="checkbox" name="Coucher de la lune"/></li>-->
<!--<li>Phases de la lune<input type="checkbox" name="Phases de la lune"/></li>-->
<!--<li>Heure des marées<input type="checkbox" name="Heure des marées"/></li>-->
</ul>
</div>
</div>
<p class="align"><input type="submit" value="Enter" /><input type="reset" value="annuler"/></p>
</form>
<hr>
<footer>
<p class="align-right">© F. NICOLAY</p>
</footer>
</div>
<script src="jquery-3.4.1.min.js"></script>
<script src="configForm.js"></script>
<!--tentative de coché les cases du formulaire avec lescture json infructueuse-->
<script>$(document).ready(function (){
configForm();
});
</script>
</body>
</html> |
mon fichier data.json
Code:
[{"temp":"1","nuage":"1","vitesseVent":"1","pression":"1","visib":"1","description":0,"degre":"2","vent":"0","uniteVisib":"1","unitePression":"0"}]
mon fichier configForm.js, qui va lire le json et est censé coché ou non les cases et boutons de mon formulaire.
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
| //tentative pour afficher les cases cochées, mais sans succès.
function configForm(callback) {
$.getJSON("data.json", function (data) {
if (data["temp"] == 1) {
$("#Temperature").prop('checked', true);
} else {
$("#Temperature").prop('checked', false);
}
if (data["nuage"] == 1) {
$("#Nuage").prop('checked', true);
} else {
$("#Nuage").prop('checked', false);
}
if (data["vitesseVent"] == 1) {
$("#VitesseVent").prop('checked', true);
} else {
$("#VitesseVent").prop('checked', false);
}
if (data["pression"] == 1) {
$("#Pression").prop('checked', true);
} else {
$("#Pression").prop('checked', false);
}
if (data["visib"] == 1) {
$("#Visibilité").prop('checked', true);
} else {
$("#Visibilité").prop('checked', false);
}
if (data["description"] == 1) {
$("#Description").prop('checked', true);
} else {
$("#Description").prop('checked', false);
}
if (data["degre"] == 2) {
$("#degre").val("2");
} else if (data["degre"] == 1) {
$("#formdegreemp").val("1");
} else if (data["degre"] == 0) {
$("#degre").val("0");
}
if (data["vent"]== 1) {
$("#vent").val("1");
} else if (data["vent"] == 0) {
$("#vent").val("0");
}
if (data["uniteVisib"]== 1) {
$("#visib").val("1");
} else if (data["uniteVisib"] == 0) {
$("#visib").val("0");
}
if (data["unitePression"]== 1) {
$("#press").val("1");
} else if (data["unitePression"] == 0) {
$("#press").val("0");
}
callback();
});
} |
