Activer / désactiver input text avec input radio

Signaler
Messages postés
6
Date d'inscription
mardi 17 juillet 2012
Statut
Membre
Dernière intervention
20 juillet 2012
-
silenthill11
Messages postés
6
Date d'inscription
mardi 17 juillet 2012
Statut
Membre
Dernière intervention
20 juillet 2012
-
Bonjour a tous,
Je suis entrain de concevoir un formulaire pour devis en ligne mais je bloque ... :(
Je voudrais :
-1- Activer désactiver un input text (en "readonly") qui contient le prix correspondant à un input radio ou checkbox
-2- un input text à la fin du formulaire pour avoir la somme des inputs text actifs.

Ps : les détails sur l'image jointe



<label>
 Sans serrure
</label>
 €

Ca marche mais l'input reste activé quand un autre bouton radio est sélectionné ... je voudrai qu'il retourne à son état initial si il est dé-sélectionné.

Merci a tous :)

11 réponses

Messages postés
1540
Date d'inscription
lundi 26 mai 2003
Statut
Membre
Dernière intervention
1 août 2013
11
Salut,

lorsqu'un radio est cliqué, il faut non seulement activer le bon contrôle, mais aussi désactiver tous les autres. Il faut donc référencer l'ensemble des tes input/radio pour pouvoir les parcourir dans une fonction Javascript.
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
4
Bonjour,

Vous avez de la chance que je sois passé sur le forum aujourd'hui, j'ai pu vous concocter un petit code exprès pour vous (même si je ne devrais pas le faire).

Je me permettrai quand même de vous expliquer les différents éléments de ma réponse, puisqu'il s'agit de technique Javascript avancées, malgré l'aspect simplet du code.

D'abord, il vous faudra utiliser un fonction, dans une balise <script>. Il s'agit de la suivante :

check = (function() {
var o = null;
return function(id) {
if (o) {
o.disabled = true
}
if (id) {
id = document.getElementById(id) || id;
id.disabled = false;
o = id
} else {
throw new Error("Wrong argument");
}
}
})();


Ce code utilise une technique appelé Closure, qui est essentiellement une fonction retournant une autre fonction. Cela permet de garder certaines variables (o, dans notre cas, qui représente l'élément qui n'est plus désactivé) dans le [[Scope]] de la fonction, c'est-à-dire qu'il ne sera pas accessible globalement, et qu'il ne polluera pas l'objet global. Pour faire simple : cela accélère votre fonction et la rend plus propre.

Pour utiliser cette fonction, il vous faudra appeler check avec comme argument l'ID de l'élément à réactiver (ou directement l'élément; j'ai conçu votre code afin qu'il soit souple) de cette façon :

check('sans_serrure');


Cela vous donne donc comme code HTML ceci :

<label>
 Sans serrure
</label>
 €


En plus de votre code Javascript. Vous devez opérer ces changements sur tous les INPUT[type = radio] à qui cela s'applique.

Des questions ?

JDMCreator
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
4
J'ai fait une petite erreur mineure et sans conséquence que je m'empresse de corriger :

check = (function() {
var o = null;
return function(id) {
if (o) {
o.disabled = true;
}
id = document.getElementById(id) || id;
if (id) {
id.disabled = false;
o = id;
} else {
throw new Error("Wrong argument");
}
}
})();



JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !
Messages postés
6
Date d'inscription
mardi 17 juillet 2012
Statut
Membre
Dernière intervention
20 juillet 2012

Merci pour ton aide ca marche c'est nickel y a juste un problème :
Mon formulaire est concu en différente rubrique sur la meme page :
Comme sur le screen :
-Choix de la serrure
-Choix huisserie
-Poignée
-etc.

du coup si par exemple je fais mon choix de serrure, c'est nickel, l'input text relatif à la radio s'active,
mais si je passe a la rubrique suivante : "choix de l'huisserie" => la radio reste active mais l'input text revient a son etat initial = disabled :(
et c'est problématique puisque je voudrai faire la somme des input text actif à la fin du formulaire.
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
4
Ce n'est un problème complexe à régler. Voici le code modifié :

check = (function() {
var o = {};
return function(name, id) {
if (o[name]) {
o[name].disabled = true;
}
id = document.getElementById(id) || id;
if (id) {
id.disabled = false;
o[name] = id;
} else {
throw new Error("Wrong argument");
}
}
})();


À la place d'utiliser une simple variable qui contient l'élément activé, j'ai créé un Object qui agira comme Base de données.

Elle s'utilise de la façon suivante :

check('serrure','sans_serrure');


Le deuxième argument est le même que le premier dans le code précédent. Actuellement, le premier élément représente un groupe. Cela peut être n'importe quoi, et non pas obligatoirement le "name" utilisé pour les INPUT[type=radio].

Suis-je clair dans ce que je dis ou non ?

JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !
Messages postés
6
Date d'inscription
mardi 17 juillet 2012
Statut
Membre
Dernière intervention
20 juillet 2012

y a encore un blèm :p
- pour les boutons radio ça marche très bien puisque y a qu'un choix possible
- par contre pour les checkbox (possibilité de choix multiple) ca marche pas, quand on check plusieurs box il n'y ya que la dernière checké qui reste active
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
4
Dans ce cas, pour les INPUT[type=checkbox], tu n'as qu'à changer le premier argument de ta fonction pour chaque case à cocher différente ;)

Cela répondit-il à tes questions ?

JDMCreator
Messages postés
6
Date d'inscription
mardi 17 juillet 2012
Statut
Membre
Dernière intervention
20 juillet 2012

Ok mais Le problème c'est que, si je les décoche les input text reste actifs :s
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
4
Oui, j'avais bien vu mon erreur avant que vous ne répondiez, mais je n'étais pas à la maison. Il vous faudra donc utiliser deux "systèmes" utilisant la même fonction selon que votre élément soit un INPUT[type= radio] ou un INPUT[type=checkbox].

D'abord, la fonction :

check = (function() {
var o = {};
return function(name, id) {
var a = arguments,
i = (a.length > 2) ? !!a[2] : true;
if (o[name] && o[name] != id) {
o[name].disabled = i;
}
id = document.getElementById(id) || id;
if (id) {
id.disabled = !i;
o[name] = id
} else if(!id){
throw new Error("Wrong argument");
}
}
})();


Pour vos INPUT[type=radio], il n'y rien à changer depuis la dernière version. Par contre, pour les INPUT[type=checkbox], il vous faut rajouter un troisième argument de cette façon :

check('serrure','sans_serrure', this.checked);


Le troisième argument doit toujours être this.checked, il n'y a pas besoin de l'adapter pour chaque élément (à moins que vous souhaitiez faire des effets, cela prend une valeur booléenne).

Et n'oubliez pas : ne rajoutez pas de troisième argument sur les INPUT[type =radio], sinon le comportement de ceux-ci seront étranges.

Cela règle-t-il votre problème ?

JDMCreator
Messages postés
6
Date d'inscription
mardi 17 juillet 2012
Statut
Membre
Dernière intervention
20 juillet 2012

Visiblement il faut pour chaque checkbox un premier argument différent :
<input id="Option_1" onclick="check('option01','pattes', this.checked)" type="checkbox"
<input id="Option_2" onclick="check('option02','oculus', this.checked)" type="checkbox"
<input id="Option_3" onclick="check('option03','imposte', this.checked)" type="checkbox"
<input id="Option_4" onclick="check('option04','judas', this.checked)" type="checkbox"


sinon l'activation a un comportement bizarre.
Messages postés
6
Date d'inscription
mardi 17 juillet 2012
Statut
Membre
Dernière intervention
20 juillet 2012

Merci c'est Nickel ! :))
pour que ca marche il faut suivre cette logique :

- Pour un groupe de radios



etc.
etc.


Pour le cas ou un des bouton radio n'a pas d'input text en face la chaine se casse et il refuse de revenir a son état initial (disabled) donc il faut mettre un input en hidden



Pour un groupe de checkbox il faut incrémenter ou changer le premier argument :




Voila ce que ca donne au final :))

il me reste plus qu'a trouver le moyen de faire la somme de tout les input actifs ;)