Input radio, onclick et remplissage auto

Dvlop.com · 03/02/2011, 12h10

Bonjour,

A l'intérieur d'un formulaire, j'ai un champ avec des boutons radio.

Code :

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

1
2
3
 
<input id="options_type_acces" type="radio" onclick="this.form.submit()" '.$checked_no.' name="options_type_acces" value="no"/> 
<label for="options_type_acces"> Aucun accès</label>

Je voudrais qu'au click sur un des choix, un tableau se pré-remplisse (chaque ligne du tableau correspond à un champ de formulaire).

Je me mélange les pinceaux entre le traitement du formulaire et l'envoi de ce bouton radio, ou j'utilise mal le JS, langage que je ne connaît que trop peu.
J'ai essayé des choses qui ne fonctionnent pas à tel point que je me demande si c'est bien possible. Mon formulaire est automatiquement validé. Y a t'il d'autres moyens?

Si je ne suis pas claire, je peux donner des compléments.

Merci de vos réponses !

javatwister · 03/02/2011, 13h11

Citation:

J'ai essayé des choses qui ne fonctionnent pas à tel point que je me demande si c'est bien possible.

Salut!

dis-toi bien que nous aussi on a tout essayé, y compris des expériences qui relèvent de la science-fiction ou d'une carence neuronale avérée; eh bien, tiens-toi bien: tout est possible

si tu pouvais donner un lien vers la page ou tout au moins donner un peu plus de code (pas de php, merci), on serait heureux de dénouer ton problème

Dvlop.com · 03/02/2011, 15h12

Bonjour javatwister.

Tant mieux alors. Reste plus qu'à y voir clair alors...

Voici mon code. J'ai copié le code source de mon block quand il est ouvert.
(un pti bout de js qui cache ou montre ma div au clic)

Mon soucis c'est que je voudrais qu'en pré-cochant une option le tableau se remplisse automatiquement, sans ni envoyer le formulaire, ni reloader la page (imagine toi au sein d'un plus grand formulaire, dont ce module ne représente que 3 champs)

Merci de ton aide

Code :

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
 <head>
		<style>	
			#dividnumero1
			{
				width:300px;
			}
			table.tableau
			{
				width:300px;
			}
			.tableau
			{
				border:1px solid;
				border-collapse:collapse;
				text-align:center;
				padding:0px;
				margin:0px;
			}
			.tableau .titres_horiz
			{
			text-align:center;
			}
				.titres_horiz .acces
				{
				text-align:center;
				padding-top:10px;
				border:1px solid;
				}
				.titres_horiz .option
				{
				width:120px;
				text-align:center;
				padding-bottom:10px;
				padding-top:10px;
				}
			.ss_titres_horiz
			{
			text-align:center;
			border-bottom:1px solid;
			}
				.ss_titres_horiz td
				{
				width:30px;
				text-align:center;
				}
 
			.tableau .titres_verti
			{
			text-align:left;
			width:90px;
			border-right:1px solid;
			border-left:1px solid;
			}
			.tableau tr.gris
			{
			background-color:#e3e0e0;
			}
			.tableau td
			{
			border-left:1px solid #b8b7b7;
			width:30px;
			text-align:center;
			}
		</style>
		<!--cacher le div-->
		<script type="text/javascript">
			function visibilite(thingId)
				{
				var 
					targetElement;
					targetElement = document.getElementById(thingId) ;
				if (targetElement.style.display == "none")
					{
					targetElement.style.display = "" ;
					}
				else 
					{
					targetElement.style.display = "none" ;
					}
				}
		</script>
	<title>Test</title>
   </head>
 
<body>
 
<p>
<a href="javascript:visibilite('dividnumero1');"><strong>Définir les options</strong></a>
	<div id="dividnumero1" style="display:none;">
		<p>
		<strong>Options type :</strong>
		</p>
		<form method="post" action="test_ccm_2.php" name="options_type_acces">
			<br/>
 
				<input id="options_type_acces" type="radio" onclick="this.form.submit()"  checked="checked"  name="options_type_acces" value="no"/> 
				<label for="options_type_acces"> Aucun accès</label>
			<br/>
				<input id="options_type_acces" type="radio"  onclick="this.form.submit()"  name="options_type_acces" value="plan"/> 
				<label for="options_type_acces"> Plans</label>
			<br/>
				<input id="options_type_acces" type="radio"  onclick="this.form.submit()"  name="options_type_acces" value="cle"/> 
				<label for="options_type_acces"> Clés</label>
 
			<br/>
				<input id="options_type_acces" type="radio"  onclick="this.form.submit()"  name="options_type_acces" value="autre"/> 
				<label for="options_type_acces"> Autre</label>					
		</form>
		<table class="tableau">
				<tr valign="top" class="titres_horiz">
					<td colspan=1 rowspan=2 class="acces">
						<strong>Accès</strong>
 
					</td>
					<td colspan=4 rowspan=1 class="option">
						<strong>Options</strong>
					</td>
				</tr>
				<tr class="ss_titres_horiz">
					<td colspan=1 rowspan=1>
						Aucun accès
					</td>
 
					<td colspan=1 rowspan=1>
						Plans
					</td>
					<td colspan=1 rowspan=1>
						Clés
					</td>
				</tr>
				<tr class="gris">
					<td colspan=1 rowspan=1 class="titres_verti">
						<label for="blop_acces">Professeur Blop</label>
 
					</td>
					<td colspan=1 rowspan=1>
						<input type="radio" name="blop_acces"  checked="checked"  value="NO"/>
					</td>
					<td colspan=1 rowspan=1>
						<input type="radio" name="blop_acces"  value="PLAN"/>
 
					<td colspan=1 rowspan=1>
						<input type="radio" name="blop_acces"  value="CLE"/>
					</td>
 
				</tr>
				<tr>
					<td colspan=1 rowspan=1 class="titres_verti">
						<label for="bang_acces">Professeur Bang</label>
					</td>
					<td colspan=1 rowspan=1>
						<input type="radio" name="bang_acces"  checked="checked"  value="NO"/>
					</td>
 
					<td colspan=1 rowspan=1>
						<input type="radio" name="bang_acces"  value="PLAN"/>
					</td>
					<td colspan=1 rowspan=1>
						<input type="radio" name="bang_acces"  value="CLE"/>
					</td>
				</tr>
				<tr class="gris">
					<td colspan=1 rowspan=1 class="titres_verti">
 
						<label for="tim_acces">Professeur Tim</label>
					</td>
					<td colspan=1 rowspan=1>
						<input type="radio" name="tim_acces"  checked="checked"  value="NO"/>
					</td>
					<td colspan=1 rowspan=1>
						<input type="radio" name="tim_acces"  value="PLAN"/>
					</td>
 
					<td colspan=1 rowspan=1>
						<input type="radio" name="tim_acces"  value="CLE"/>
					</td>
				</tr>	
			</table>
	</div>
</p>

javatwister · 04/02/2011, 12h51

tu veux remplir ton tableau avec quelles données???

tu as bien conscience que ce remplissage sera volatile, puisque la page sera soumise immédiatement?

Dvlop.com · 04/02/2011, 13h04

Salut...

Alors pour ce qui est de remplir les données du tableau, c'est un va et vient. On peut soit pré-coché une option type 'no','plan','clé','Autre', et le tableau se préremplit tout seul ('autre' n'y est pas mais c'est l'idée d'une option type qui mettrait tout à zéro : tableau vierge). Si en revanche on change un champ dans le tableau, on sors de l'option type (et on précoche par exemple notre fameuse option type 'Autre')
C'est plus précis ainsi ?

Pour mes données volatiles... En ai-je bien conscience ? Oui et non en fait.

Disons que je souhaite que ces champs soient volatiles jusqu'à la soumission du gros formulaire qui contient le tableau.
Je pensais récupérer les champs qui m'intéressent (ceux du tableau uniquement : tim_acces,bang_acces...) ensuite, après la soumission du gros form.

voilou...

Dvlop.com · 06/02/2011, 12h15

Bonjour

J'en suis là, grâce à l'aide d'autres forums de discussion. Le module est dorénavant fonctionnel, mais il y a encore qqchose qui m'échappe...

Comment m'y prendre pour créer un bouton de contrôle qui aille piocher dans les 3 cas possibles? dans notre exemple, Professeur machin à 'clé', professeur bidule à 'plan', professeur truc à 'aucun' ... ou autre ?

Merci de votre aide

Code :

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<div id="controls"><p>Mode :</p>
<label>Aucun accès <input id="ctrlAucun" name="ctrl" type="radio" onclick="checkAll('aucun')" /></label>
<label>Plans <input id="ctrlPlan" name="ctrl" type="radio" onclick="checkAll('plan')" /></label>
<label>Clés <input id="ctrlCle" name="ctrl" type="radio" onclick="checkAll('cle')" /></label>
<label>Autre <input id="ctrlAutre" name="ctrl" type="radio" onclick="uncheckAll()" /></label>
</div>
<div id="professeurs">
  <div><p>Professeur machin :</p>
  <label>Aucun accès <input name="machin" type="radio" class="aucun" onclick="controls()" /></label>
  <label>Plans <input name="machin" type="radio" class="plan" onclick="controls()" /></label>
  <label>Clés <input name="machin" type="radio" class="cle" onclick="controls()" /></label>
  </div>
  <div><p>Professeur truc :</p>
  <label>Aucun accès <input name="truc" type="radio" class="aucun" onclick="controls()" /></label>
  <label>Plans <input name="truc" type="radio" class="plan" onclick="controls()" /></label>
  <label>Clés <input name="truc" type="radio" class="cle" onclick="controls()" /></label>
  </div>
  <div><p>Professeur chouette :</p>
  <label>Aucun accès <input name="chouette" type="radio" class="aucun" onclick="controls()" /></label>
  <label>Plans <input name="chouette" type="radio" class="plan" onclick="controls()" /></label>
  <label>Clés <input name="chouette" type="radio" class="cle" onclick="controls()" /></label>
  </div>
  <div><p>Professeur bidule :</p>
  <label>Aucun accès <input name="bidule" type="radio" class="aucun" onclick="controls()" /></label>
  <label>Plans <input name="bidule" type="radio" class="plan" onclick="controls()" /></label>
  <label>Clés <input name="bidule" type="radio" class="cle" onclick="controls()" /></label>
  </div>
</div>
 
<script type="text/javascript">
// getElementsByClassName compatible IE
function gEBCN(classe,parent) {
  parent = parent || document;
  if(parent.getElementsByClassName) {
    return parent.getElementsByClassName(classe);
  } else {
    var all = parent.getElementsByTagName('*'),
    i, l=all.length,
    res = [];
    for(i=0;i<l;i++) {
      if(all[i].className === classe) { res.push(all[i]); }
    }
    return res;
  }
}
 
// Coche tous les éléments ayant comme className classe
// dans le div professeurs
function checkAll(classe) {
  var radios = gEBCN(classe,document.getElementById('professeurs')),
  i, l=radios.length;
  for(i=0;i<l;i++) {
    radios[i].checked = true;
  }
}
 
// Décoche tous les radios dans le div professeurs
function uncheckAll() {
  var inputs = document.getElementById('professeurs').getElementsByTagName('input'),
  i, l=inputs.length;
  for(i=0;i<l;i++) {
    if(inputs[i].type === 'radio') {
      inputs[i].checked = false;
    }
  }
}
 
// Retourne true ou false selon si
// tous les inputs ayant pour className classe
// dans le div professeurs sont cochés
function controlHasToBeChecked(classe) {
  var radios = gEBCN(classe,document.getElementById('professeurs')),
  i, l=radios.length,
  hasToBeChecked = true;
  for(i=0;i<l;i++) {
    if(!radios[i].checked) { hasToBeChecked = false; break; }
  }
  return hasToBeChecked;
}
 
// Gère l'état des 4 radios de contrôle
// selon celui des inputs du div professeurs
function controls() {
  var ctrlAucun = document.getElementById('ctrlAucun'),
  ctrlPlan = document.getElementById('ctrlPlan'),
  ctrlCle = document.getElementById('ctrlCle');
  ctrlAucun.checked = controlHasToBeChecked('aucun');
  ctrlPlan.checked = controlHasToBeChecked('plan');
  ctrlCle.checked = controlHasToBeChecked('cle');
  if(!ctrlAucun.checked && !ctrlPlan.checked && !ctrlCle.checked) {
    document.getElementById('ctrlAutre').checked = true;
  }
}
</script>

04/02/2011, 12h51	#4
javatwister Expert Confirmé danseur Inscription : août 2003 Messages : 2 667 Détails du profil Informations personnelles : Sexe : Localisation : France, Calvados (Basse Normandie) Informations professionnelles : Activité : danseur Informations forums : Inscription : août 2003 Messages : 2 667 Points : 3 035 Points : 3 035	tu veux remplir ton tableau avec quelles données??? tu as bien conscience que ce remplissage sera volatile, puisque la page sera soumise immédiatement?
	10

04/02/2011, 13h04	#5
Dvlop.com Invité de passage Inscription : février 2011 Messages : 9 Détails du profil Informations forums : Inscription : février 2011 Messages : 9 Points : 0 Points : 0	Salut... Alors pour ce qui est de remplir les données du tableau, c'est un va et vient. On peut soit pré-coché une option type 'no','plan','clé','Autre', et le tableau se préremplit tout seul ('autre' n'y est pas mais c'est l'idée d'une option type qui mettrait tout à zéro : tableau vierge). Si en revanche on change un champ dans le tableau, on sors de l'option type (et on précoche par exemple notre fameuse option type 'Autre') C'est plus précis ainsi ? Pour mes données volatiles... En ai-je bien conscience ? Oui et non en fait. Disons que je souhaite que ces champs soient volatiles jusqu'à la soumission du gros formulaire qui contient le tableau. Je pensais récupérer les champs qui m'intéressent (ceux du tableau uniquement : tim_acces,bang_acces...) ensuite, après la soumission du gros form. voilou...
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email