Discussion :

[silenthill]

Bonjour a tous,
Je suis entrain de concevoir un formulaire pour devis en ligne mais je bloque un peu ...
Je voudrais :
-1- Activer désactiver un Input (en lecture seule) qui contient le prix correspondant à un bouton radio ou checkbox
-2- un input à la fin du formulaire pour avoir la somme des input actifs.
Ps : les détails sur l'image jointe


Merci pour votre aide !

[NoSmoking]

Bonjour et bienvenue sur DVP.

Nous sommes tout décidé à t'aider mais encore faudrait-il savoir sur quoi tu bloques.

Je me lance, il existe les événements pour gérer un certains nombre de chose, un petit exemple

Code :

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

1
2
<input type="checkbox" id="my_check" onclick="document.getElementById('my_input').disabled=this.checked">
<input type="text" id="my_input" value="la valeur">

mais sans plus d'info...

[silenthill]

Merci pour ta réponse mais ton code sera valable pour un groupe de bouton radio?

Code :

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

1
2
3
4
<input name="radios" type="radio" id="radio01" onclick="document.getElementById('input01').disabled=this.checked">
<input type="text" id="input01" value="la valeur" readonly="readonly">
<input name="radios" type="radio" id="radio02" onclick="document.getElementById('input02').disabled=this.checked">
<input type="text" id="input02" value="la valeur" readonly="readonly">

Au chargement de la page les inputs sont tous actif alors que je voudrai qu'ils soient grisés par défaut et en "readonly" et ca sera l'action onclick qui les active un par un grâce au choix de la radio correspondante.
c'est possible ?

[andry.aime]

Bonjour,

Tu veux que seul l'input text correspondant au radio button sélectionné qui est active? Dans ce cas tu dois utiliser une boucle.
Attention, si c'est un input readonly que tu veux que ça soit éditable, c'est l'attribut readonly que tu dois manipuler avec JS mais pas disabled.

A+.

[silenthill]

-Oui seul l'input correspondant a son bouton radio s'active lors du choix du b radio
-Tout les inputs sont en "readonly" et c'est voulu pour qu'il ne soit pas éditable même si ils deviennent actifs, ils sont la qu'a titre informatif sur le prix.
pour que l'utilisateur comprenne bien que l'option qu'il a choisis en cliquant sur le bouton radio correspond bien au prix en face (l'input qui est devenu actif= donc plus grisé , mais toujours en readonly)

[andry.aime]

Crée une fonction avec un paramètre dont l'id de l'input à activer. Tu désactives tous les input correspondant à tous les radio bouton (Tu peux utiliser ce script pour récupérer les éléments à désactiver, ou bien tu les files une class et les récupères avec getElementsByClassName,...). Tu actives à la fin l'input ayant l'id en paramètre.

A+.

[silenthill]

Merci mais ... je suis nul en JS
T'as pas un bout de code pour exemple ?

[silenthill]

Code :

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

1
2
3
4
5
 
<label>
<input id="Serrure_7" type="radio" name="Serrure" value="sans serrure" onclick="document.getElementById('sans_serrure').enabled=this.checked"/> Sans serrure
</label>
<input type="text" id="sans_serrure" name="prix1" value="720" disabled="true" readonly="readonly" size="5" /> €

J'ai fait ça mais ca marche pas et j'ai un doute sur "enabled=this.checked"

[silenthill]

J'ai fait avec :

Code :

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

1
2
3
4
5
 
<label>
<input id="Serrure_7" type="radio" name="Serrure" value="sans serrure" onclick="document.getElementById('sans_serrure').disabled=false.checked"/> Sans serrure
</label>
<input type="text" id="sans_serrure" name="prix1" value="720" disabled="true" readonly="readonly" size="5" /> €

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

[andry.aime]

J'avais dit de créer une fonction avec une boucle qui désactive tous et active ensuite celui qui est ciblé. Essaye de faire la fonction et revient ensuite en cas de problème pour t'aider.

A+.

[silenthill]

Facile à dire je suis nul en JS !

[NoSmoking]

Facile à dire je suis nul en JS !

il ne faut pas que cela soit une fatalité

Code :

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

1
2
3
4
var i, nb= nombre_element;
for( i=0; i <nb; i++){
  // faire ce qu'il y a à faire
}