Forum d'entraide PHPFrance

Bonsoir !

J'ai une liste déroulante comportant 1 à 5.

Juste en dessous j'ai 5 champs texte, tous "readonly" d'entrée.

Je désire désactiver ce readonly et rendre autant de champs actifs que le chiffre sélectionné de la liste déroulante.

En gros je choisis 3 dans la liste et hop 3 champs texte deviennent actifs.

Je pense que c'est en javascript que c'est possible. Qui aurait une idée ?

Merci !

Voilà , j'ai testé , ca fonctionne bien

<script language="javascript">
function changeRead(nb)
	{
	var boucle = parseFloat(nb) + parseFloat(1) ;
	//Débloquez tous
	for(i=1;i<6;i++)
		{
		divObj = document.getElementById('champ'+i);
		divInfo = document.getElementById('info'+i);
		if(divObj) 
			{
  			divObj.readOnly="readonly";
			divInfo.innerHTML="Read Only";
			}
		}
	//Bloquer
	for(i=1;i<boucle;i++)
		{
		divObj = document.getElementById('champ'+i);
		divInfo = document.getElementById('info'+i);
		if(divObj) 
			{
  			divObj.readOnly=false;
			divInfo.innerHTML="Read Only OFF";
			}
		}
	}
</script>

Nombre de champ (non en readonly)<select name="nb_champ" onchange="changeRead(this.value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select> <br />

<input name="champ1" id="champ1" type="text" size="30" /><span id="info1">Read Only Off</span><br />
<input name="champ2" id="champ2" type="text" size="30" readonly="readonly"/><span id="info2">Read Only</span><br />
<input name="champ3" id="champ3" type="text" size="30" readonly="readonly"/><span id="info3">Read Only</span><br />
<input name="champ4" id="champ4" type="text" size="30" readonly="readonly"/><span id="info4">Read Only</span><br />
<input name="champ5" id="champ5" type="text" size="30" readonly="readonly"/><span id="info5">Read Only</span><br />

++

Le même

<script language="javascript"> 
function changeRead(nb,size) { 
  for(var i=1;i<size;i++) { 
    if(document.getElementById('champ'+i)) {
      document.getElementById('champ'+i).readOnly = (i<nb) ? false : "readOnly" ;
      document.getElementById('info'+i).innerHTML = (i<nb) ? "Read Only OFF" : "Read Only";  
    } 
  }
</script> 

changeRead(this.options[this.selectedIndex].value, this.length);

Nota : pensez au "var" dans le for(var i=1; ...), sinon le i est considéré comme global et peut poser problème avec d'autres scripts qui pourraient tourner en paralèlle

Merci beaucoup à vous deux !

Ton code marche nickel Tictac

Ryle, ton code est beaucoup plus simplifié mais je en comprend pas quelque chose. Il est en retard d'un nombre lol

Quand je choisis 1, aucun champ n'est actif, 2, un seul est actif...etc

Tu as oublié un tit } à la fin

Une autre tite chose pour les surdoués Si je met un style, par exemple un fond gris pour l'état readonly, peut-on quand cet état devient actif mettre un autre style ?

Merci !

Oui dans la mesure ou chaque champ peut être identifié individuellement, ce qui est vrai dans le cas présent puisque chaque champ dispose d'un attribut id : dans ce cas, sauf erreur de ma part, tu peux faire quelque chose du genre :

Merci beaucoup Cyrano

Je me suis aidé de ton code et j'ai trouvé le code qui colle bien : Ce site peut être très utile pour ceux qui veulent Il référence les propriétés selon les navigateurs.

http://mozilla.tlk.fr/doc05.php

J'ai toujours revé modérer mon alter ego

Et le [Résolu] ?

Ha c'est jouissif

Ryle, ton code est beaucoup plus simplifié mais je en comprend pas quelque chose. Il est en retard d'un nombre lol

Quand je choisis 1, aucun champ n'est actif, 2, un seul est actif...etc

Arf ouep, j'ai loupé le fait que dans sa variable boucle il ajoutait 1. Le mieux du coup c'est de faire partir le for() de 0
Tu peux aussi pour changer de style passer par .className = "nomDeTaClasse";
C'est parfois plus pratique quand tu as plusieurs valeurs à changer

Tu as oublié un tit } à la fin

Oui, mais moi j'aime les accolades, et quand on aime, on ne compte pas
(comment ça c'est nul comme excuse ?! )

Oui j'avais essayé de changé cette valeur mais ça ne marche toujours pas Ryle. Tu l'as testé chez toi ? C'est pi être un souci dans ma page entière si ça marche chez toi.

Tu as oublié un tit } à la fin

Oui, mais moi j'aime les accolades, et quand on aime, on ne compte pas
(comment ça c'est nul comme excuse ?! )

C'est effectivement une excuse tout à fait déplorable, ha il est joli l'exemple donné aux débutants tiens

Ouep ça fonctionnait chez moi, mais je vies de réaliser que c'est parce que mes champs partaient de 0 et pas de 1... en fait pour rectifier ma fonction par rapport au script donné par TicTac, il faut mettre "<=" au lieu de "<" dans le (i<nb) pis ca devrait le faire

C'est bien ça

Merci à tous !

hello , je fais partir de ma boucle de 1 car c'est le i qui détermine mon champ (champ1,champ2,etc) mais j'avoue que j'ai zappé le <= !!! qui m'eviterait de faire +1

++