[html] bloquer l'utilisation d'un bouton

Version imprimable

02/08/2006, 08h37
Adren

[html] bloquer l'utilisation d'un bouton

Bonjour

Je suis actuellement en train de réaliser un formulaire html. J'ai un bouton radio et un bouton valider. Le bouton valider envoie vers une autre page bien sur, c'est le but d'un formulaire.
Je voulais savoir si : tant que le bouton radio n'est pas coché, est il possible de griser ou d'interdire le click sur le bouton modifier? je sais que c'est possible en flash mais en html pas sur

merci d'avance;)
02/08/2006, 09h55
delas

slt

disabled sur ton bouton.

et un p'tit javascript sur ton radio onClick="document.monbouton.disabled = false"

?
02/08/2006, 09h59
Adren

à vrai dire je ne connais rien à javascript tu aurais un exemple pour ce que tu viens de suggérer?

Quelque chose de ce type répond a ta question.

Code:

1
2
3
4
5
<form action="#" method="post">
<input type="radio" name="choix" id="choix_1" value="1" onclick="document.getElementById('submit').disabled=false"/><label for="choix_1">Oui</label>
<input type="radio" name="choix" id="choix_0" value="0" onclick="document.getElementById('submit').disabled=false"/><label for="choix_0">Non</label>
<input type="submit" id="submit" disabled="disabled" />
</form>

Je pense qu'une "vraie" validation de formulaire serai mieu que le petit boit de code précedent.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function valider() {
	var flag = false;
	var message = '';
	elm1 = document.getElementById('choix_1');
	elm2 = document.getElementById('choix_0');
	if (elm1.checked || elm2.checked) {
		flag = true;
	} else {
		message += 'vous n\'avez pas selectionné de choix';
	}
	if (!flag) {
		alert(message);
	}
	return flag;
}

Code:

1
2
3
4
5
<form action="#" method="get" onsubmit="return valider();" name="form">
<strong>choix: </strong><input type="radio" name="choix" id="choix_1" value="1" onclick="document.getElementById('submit').disabled=false"/><label for="choix_1">Oui</label>
<input type="radio" name="choix" id="choix_0" value="0" onclick="document.getElementById('submit').disabled=false"/><label for="choix_0">Non</label><br />
<input type="submit" id="submit" /> <input type="reset" />
</form>

02/08/2006, 10h39
Adren

je vais regarder cela :P

mon code de test étant le suivant :

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
<html>
<head>
<title>Fichier Test</title>
<SCRIPT language="JavaScript">
 
function valider() {
	var flag = false;
	var message = '';
	elm1 = document.getElementById('choix_1');
	elm2 = document.getElementById('choix_0');
	if (elm1.checked || elm2.checked) {
		flag = true;
	} else {
		message += 'vous n\'avez pas selectionné de choix';
	}
	if (!flag) {
		alert(message);
	}
	return flag;
}
 
</script>
</head>
 
<body>
 
<form action="#" method="get" onsubmit="return valider();" name="form">
<strong>choix: </strong><input type="radio" name="choix" id="choix_1" value="1" onclick="document.getElementById('submit').disabled=false"/><label for="choix_1">Oui</label>
<input type="radio" name="choix" id="choix_0" value="0" onclick="document.getElementById('submit').disabled=false"/><label for="choix_0">Non</label><br />
<input type="submit" id="submit" /> <input type="reset" />
</form>
 
</body></html>

cela ne fonctionne pas je devrais peut etre poster dans le forum javascript non? car ce n'est plus du html :roll:

02/08/2006, 11h12
masu

Citation:

Envoyé par Adren

cela ne fonctionne pas je devrais peut etre poster dans le forum javascript non? car ce n'est plus du html :roll:

Alors qu'est ca qui ne fonctionne pas?
Tu redonne exactement le code que je t'ai fourni, je l'ai testé sous ff.

Ici, le code fourni, ne met pas le bouton de soumission a disable, mais le formulaire n'est soumis que si la fonction valider revroie vrai. Donc le formulaire n'est soumis que si un des element des cercles d'options est selectionné.

-----------------------------------
edit: je vien de tester sous IE, pas de probleme.
02/08/2006, 11h13
Adren

moi je souhaite que le formulaire puisse être soumis seulement si un des 2 boutons radios est coché. dans le cas contraire le bouton de soumission est à disabled:roll:

edit : il fonctionne oui mais ce n'était pas le resultat que je souhaitais en fait ;) je souhaitais le disabled
02/08/2006, 11h17
masu

Citation:

Envoyé par Adren

moi je souhaite que le formulaire puisse être soumis seulement si un des 2 boutons radios est coché. dans le cas contraire le bouton de soumission est à disabled:roll:

Le formulaire est bien soumis seulement si un des 2 boutons radios est coché, je te le garantie.

Maintenant, je n'ai pas joué avec la propriété disabled du bouton submit car c'est un pratique qui n'est pas "Accessible".
02/08/2006, 11h19
Adren

oui je sais que le formulaire est bien soumis par contre si je comprends bien on ne peut pas jouer sur la propriété disabled? si aucun bouton n'est coché on ne peut pas mettre le bouton valider à disabled? :?
02/08/2006, 11h30
masu

Citation:

Envoyé par Adren

oui je sais que le formulaire est bien soumis par contre si je comprends bien on ne peut pas jouer sur la propriété disabled? si aucun bouton n'est coché on ne peut pas mettre le bouton valider à disabled? :?

Le probleme n'est pas que ce n'est pas possible techniquement, ni meme que ce n'est pas valide (HTML valide et semantique réspectée). Je di que c'est une mauvaise pratique du coté de l'accessibilité.
02/08/2006, 11h31
Adren

ok tant pis merci quand meme de ton aide

Pourquoi tant pi ?
Si tu veu utiliser disabled, mon premier post te donne une réponce. Soit ce serait mieu d'en faire une fonction du genre.
Code:

1 2 3 function enable() { document.getElementById('submit').disabled=false ; }
Code:

1 2 3 4 5 <form action="#" method="get" onsubmit="return valider();" name="form"> <strong>choix: </strong><input type="radio" name="choix" id="choix_1" value="1" onclick="enable()"/><label for="choix_1">Oui</label> <input type="radio" name="choix" id="choix_0" value="0" onclick="enable()"/><label for="choix_0">Non</label><br /> <input type="submit" id="submit" disabled="disabled" /> <input type="reset" /> </form>
---------------------------
edit: désolé, je vien de relire mon post le ton est un peu sec. (un truc qui m'a énervé au boulo).
Ce que je veu dire que ce n'est qu'un conseil de ne pas utiliser le disable, le choix reste le tien.
:)