Activer / désactiver input text avec input radio

Question

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 Sans serrure € 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 :)

cs_jopop · Answer

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.

jdmcreator · Answer

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

jdmcreator · Answer

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 !

silenthill11 · Answer

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.

jdmcreator · Answer

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 !

silenthill11 · Answer

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

jdmcreator · Answer

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

silenthill11 · Answer

Ok mais Le problème c'est que, si je les décoche les input text reste actifs :s

jdmcreator · Answer

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

silenthill11 · Answer

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.

silenthill11 · Answer

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

Activer / désactiver input text avec input radio

11 réponses

Votre réponse

Discussions similaires