Comment construire un formulaire
Bonjour
J'aimerais savoir si vous pouviez m'aider à contruire une èartie de mon formuiare.
J'aimerais contruire les checkbox et radio d'un formulaire dynamiquement en fonction de la station choisie.
Ce que j'aimerais faire, c'est ceci
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
|
<div class="checkbox">
<div class="select-title">Temperature</div>
<div>
<input type="checkbox" data-name="temperature" name="type[]" id="id-ta" checked value="5" />
<label for="id-ta">T-Air</label>
</div>
<div>
<input type="checkbox" data-name="temperature" name="type[]" id="id-ts" value="6" />
<label for="id-ts">T-Surface</label>
</div>
<div>
<input type="checkbox" data-name="temperature" name="type[]" id="id-t30mm" value="7" />
<label for="id-t30mm">T-30mm</label>
</div>
<div>
<input type="checkbox" data-name="temperature" name="type[]" id="id-t60mm" value="8" />
<label for="id-t60mm">T-60mm</label>
</div>
<div>
<input type="checkbox" data-name="temperature" name="type[]" id="id-t100mm" value="9" />
<label for="id-t100mm">T-100mm</label>
</div>
<div>
<input type="checkbox" data-name="temperature" name="type[]" id="id-t200mm" value="10" />
<label for="id-t200mm">T-200mm</label>
</div>
<div>
<input type="checkbox" data-name="temperature" name="type[]" id="id-t500mm" value="11" />
<label for="id-t500mm">T-500mm</label>
</div>
<div>
<input type="checkbox" data-name="temperature" name="type[]" id="id-t1200mm" value="12" />
<label for="id-t1200mm">T-1200mm</label>
</div>
<div>
<input type="checkbox" data-name="temperature" name="type[]" id="id-tcb" value="13" />
<label for="id-tcb">T-Cover Bottom</label>
</div>
<div>
<input type="checkbox" data-name="temperature" name="type[]" id="id-tcts" value="14" />
<label for="id-tcts">T-Cover Top</label>
</div>
</div>
<div class="checkbox">
<div class="select-title">Heatflux</div>
<div>
<input type="checkbox" data-name="heatflux" name="type[]" id="id-hfs" value="3" />
<label for="id-hfs">Heatflux Shallow</label>
</div>
<div>
<input type="checkbox" data-name="heatflux" name="type[]" id="id-hfb" value="4" />
<label for="id-hfb">Heatflux Bottom</label>
</div>
</div>
<div class="checkbox">
<div class="select-title">Water</div>
<div>
<input type="checkbox" data-name="water" name="type[]" id="id-wl" value="1" />
<label for="id-wl">Waterlevel</label>
</div>
<div>
<input type="checkbox" data-name="water" name="type[]" id="id-wln" value="2" />
<label for="id-wln">Waterlevel normalized</label>
</div>
</div> |
A deux trois truc prêt ;)
Pour cela, j'utilise ceci qui me retorune ce que je souhaite
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
|
function checkAvailbaleSensors(para){
console.log("check available sensor para:",para)
return $.ajax({
url: 'checkAvailableSensors-v2.php',
type: 'POST',
data:para, // data: { pond: pond, from: from, to: to },
cache: false,
dataType: 'json',
error: function (request, error) {
console.log("Error");
console.log(request.responseText);
},
success: function (data) {
console.log("Success availabe sensors: ");
$.each(data, function(index, element) {
console.log("Family:", index);
/*
$('#sensors').append($('<div>2</div>', {
}));
*/
//console.log(element);
$.each(element, function(ind, name) {
$('#sensors').append('<div><input type="checkbox" data-name="' + name.sensor_family_name +'" name="type[]" id="id-' + name.sensor_type_name + '" value="' + name.id_sensor_type + '" /><label for="id-' + name.sensor_type_name + '">' + name.sensor_type_longname + '</label></div>');
console.log("\tname:", name.sensor_type_name);
console.log("\tlongname:", name.sensor_type_longname);
console.log("\tfam name:", name.sensor_family_name);
});
console.log("----");
});
}
});
} |
les console.log() m'affiche ceci
Citation:
Success availabe sensors:
ponds-v2.js:177:13
Family: 1
name: wl
longname: Waterlevel
fam name: water
name: wln
longname: Waterlevel normalized
fam name: water
----
Family: 2
name: hf
longname: Heatflux Shallow
fam name: heatflux
name: hfb
longname: Heatflux Bottom
fam name: heatflux
----
Family: 3
name: ta
longname: T-Air
fam name: temperature
name: ts
longname: T-Surface
fam name: temperature
name: t30mm
longname: T-30mm
fam name: temperature
name: t60mm
longname: T-60mm
fam name: temperature
name: t200mm
longname: T-200mm
fam name: temperature
name: t500mm
longname: T-500mm
fam name: temperature
name: t1200mm
longname: T-1200mm
fam name: temperature
----
Donc ca me semble bien partir et il me reste contruire dans chaque each(), ceci avec les valeurs correspondantes
Code:
1
2
3
4
| <div>
<input type="checkbox" data-name="heatflux" name="type[]" id="id-hfs" value="3" />
<label for="id-hfs">Heatflux Shallow</label>
</div> |
J'ai donc déjà essayé avec le append(),
Le problème ou je bloque, c'est j'ai du mal comment faire avec un append() ou prepend, surtout à ce niveau
Code:
1
2
3
4
5
6
7
| //console.log(element);
$.each(element, function(ind, name) {
$('#sensors').append('<div><input type="checkbox" data-name="' + name.sensor_family_name +'" name="type[]" id="id-' + name.sensor_type_name + '" value="' + name.id_sensor_type + '" /><label for="id-' + name.sensor_type_name + '">' + name.sensor_type_longname + '</label></div>');
console.log("\tname:", name.sensor_type_name);
console.log("\tlongname:", name.sensor_type_longname);
console.log("\tfam name:", name.sensor_family_name);
}); |
La ou je doute, c'est comment avoir toutes les meme famille dans un <fieldset> , par exemple?
Par exemple, la balise data-name, indique la famille auqelles appartiennent les capteurs. Il y a trois types de famille
- temperature
- water
- heatflux.
Il faudrait que j'aie
Code:
1
2
3
4
5
6
7
8
9
| <div class="chackbox remperature">
... mes checkbox...
</div>
<div class="chackbox water">
... mes checkbox...
</div>
<div class="chackbox heatflux">
... mes checkbox...
</div> |
Pourriez-vous me donner une bonne piste à suivre pour ajouter ceci?
Merci pour vos lumières
