Comment construire un formulaire

**pierrot10** · 12/03/2018, 20h03

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 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
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 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
 
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

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**psychadelic** · 13/03/2018, 01h26

$('#sensors').append('<div....

il n'y a aucun élément ayant pour ID="sensors" dans ton code...

le mieux serait que tu montre un code simplifié de ce que tu recherche à faire, plutôt que ton code réel...

Comment construire un formulaire

AJAX

Discussions similaires

Partager

Partager