desactivation d'un input selon choix radio

Bonjour, je cherche a desactivé un input selon le choix d'un bouton radio :

http://www.developpez.net/forums/att...eenshot001.jpg

SI libre occupé est coché, le prix doit etre desactivé.

Ce tableau est dynamique, il resulte des choix de l'internaute donc je doit faire un javascript qui tienne en compte ceci.

exemple du retour HTML du tableau :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <tr> <td>2</td> <td>du 20/12/2008 au 27/12/2008</td> <td> <input type="radio" id="rad2" name="etat[1229727600]" value="1" onclick="onYes();" checked> Libre </td> <td> <input type="radio" id="rada2" name="etat[1229727600]" value="0" onclick="onNo();"> Occupé </td> <td> <input name="prix[1229727600]" id="prix2" type="text" size="10" class="test">€ </td> </tr>
Voici mon javascript :
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 function updateBox() { var inputdist = document.getElementById('tableau').getElementsByTagName('input'); for(var i=0; i<inputdist.length; i++){ enableBox(document.getElementById("rad"+[i]).checked); } } function enableBox(yes) { var inputmist = document.getElementById('tableau').getElementsByTagName('input'); for(var i=0; i<inputmist.length; i++){ document.getElementById("prix"+[i]).disabled=!yes; } } function onYes() { updateBox(); } function onNo() { updateBox(); } function onLoad() { updateBox(); }
le probleme viens de la ligne

enableBox(document.getElementById("rad"+[i]).checked);

j'ai cette erreur dans le navigateur :

document.getElementById(...) is null or not a object.

Voyez vous l'erreur ?

Code:

enableBox(document.getElementById("rad"+i).checked);

tout simplement, idem avec les champs prix.

Merci,

J'ai enlevé les [] mais cela ne change rien, toujours la meme erreur

Oui, c'est normal :

Code:

var inputdist = document.getElementById('tableau').getElementsByTagName('input');

Tu récupères tous les input, y compris ceux qui n'ont pas comme id 'rad'+i, donc à un moment, le getElementById ne trouve pas l'élément.

je ne vois pas comment faire autrement pour recuperer mes valeurs. Tu aurais une idée.
Sachant que les id sont sont générés grace a un script php.

En rajoutant un test :

Code:

1
2
3
4
5
6
7
function updateBox()
{
  	var inputdist = document.getElementById('tableau').getElementsByTagName('input');
	for(var i=0; i<inputdist.length; i++){
	if(inputdist[i].id.match('rad'){enableBox(inputdist[i]).checked);}
										 }
}

pardonne moi d'insister mais toujours un pb
J'ai mofidié

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
function updateBox()
{
  	var inputdist = document.getElementById('tableau').getElementsByTagName('input');
	for(var i=0; i<inputdist.length; i++){
	if(inputdist[i].id.match('rad'){enableBox(inputdist[i]).checked));}
}
 
function enableBox(yes)
{
    var inputmist = document.getElementById('tableau').getElementsByTagName('input');
	for(var i=0; i<inputmist.length; i++){
	document.getElementById("prix"+i).disabled=!yes;
										 }
}
 
function onYes()
{
	updateBox();
}
 
function onNo()
{
	updateBox();
}
 
function onLoad()
{
	updateBox();
}

J'obtiens l'erreur / Object expected

Attention aux parenthèses et accolades...
Code:

1 2 3 4 5 6 7 function updateBox() { var inputdist = document.getElementById('tableau').getElementsByTagName('input'); for(var i=0; i<inputdist.length; i++){ if(inputdist[i].id.match('rad')){enableBox(inputdist[i]).checked;} } }
Et fait la même chose pour la fonction suivante ou tu auras aussi la même erreur !

Je pense toucher au but , ca doit donner ceci :

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
function updateBox()
{
  	var inputdist = document.getElementById('tableau').getElementsByTagName('input');
	for(var i=0; i<inputdist.length; i++){
	if(inputdist[i].id.match('rad')) {
	enableBox(inputdist[i]).checked; }
	}
}
 
function enableBox(yes)
{
    var inputmist = document.getElementById('tableau').getElementsByTagName('input');
	for(var i=0; i<inputmist.length; i++){
	if(inputmist[i].id.match('prix')) {
		document.getElementById("prix"+i).disabled=!yes;
									  }
										 }
}
 
function onYes()
{
	updateBox();
}
 
function onNo()
{
	updateBox();
}
 
function onLoad()
{
	updateBox();
}

Mais ca bloque encore, ce qui me bloque je pense c'est le xxxx.length

Quelques précisions, je pensais que mon erreur venait de :

enableBox(document.getElementById("rad"+[i]).checked);

mais en faisant une pure page HTML , je me rend compte que l'erreur vient de :

document.getElementById("prix"+[i]).disabled=!yes

Voici le retour HTML de cette page :

http://copenaol.free.fr/debug.html

Le script fonctionne mais toujours cette erreur en bas de page (document.getElementById(...) is null or not a object.)

J'utilise la même fonction pour vérifier si le prix est renseigné si Libre est coché et cela fonctionne.
Code:

1 2 3 4 5 6 7 8 9 10 11 function test() { var inputList = document.getElementById('tableau').getElementsByTagName('input'); for(var i=0; i<inputList.length; i++){ if(document.getElementById("prix"+i).value== "" && document.getElementById("rad"+[i]).checked) { alert ("Veuillez remplir le prix de la ligne " +[i]+ ". Le champs libre étant coché, vous devez rentrer un prix"); document.getElementById("prix"+i).focus(); return false; } } }
Petite remarque concernant le .length

Dans l'exemple debug.html, j'ai fait un alert et il me retourne 11 (3 libres + 3 occupé + 3 prix + 1 champ hidden + 1 bouton), donc utilisé le length dans exemple me parait pas pertinant, la boucle va se faire 11 fois alors que je n'ai que 3 lignes a vérifier. Je ne sais pas comment faire une boucle avec simplement le nombre exacte de ligne car le nombre de ligne chaque fois en fonction du choix de l'internaute (tableau dynamique généré en php)

Bon, j'ai un peu raté mon exemple... :aie:

Code:

1
2
3
4
5
6
7
8
function updateBox()
{
  	var inputdist = document.getElementById('tableau').getElementsByTagName('input');
	for(var i=0; i<inputdist.length; i++){
	if(inputdist[i].id.match('rad')) {
	enableBox(inputdist[i].checked); }
	}
}

Si je suis cet exemple , ca doit me donner pour la fonction enableBox :

Code:

1
2
3
4
5
6
7
8
9
function enableBox(yes)
{
    var inputmist = document.getElementById('tableau').getElementsByTagName('input');
	for(var i=0; i<inputmist.length; i++){
             if(inputmist[i].id.match('prix')) {
	inputmist[i].disabled=!yes;
									  }
										 }
}

Oui, mais là, tous tes input prix seront modifiés selon le choix du checkbox cliqué... Une autre solution :

Code:

1
2
3
4
5
6
7
8
9
function updateBox()
{
  	var inputdist = document.getElementById('tableau').getElementsByTagName('input');
	for(var i=0; i<inputdist.length; i++){
	if(inputdist[i].id.match('rad')) {
	    var nb = inputdist[i].id.match(/d+/);
            document.getElementById('prix'+nb).disabled = !inputdist[i].checked}
	}
}

Merci pour ta patience;
Meme pb ++> document.getElementById('prix'+nb).disabled = !inputdist[i].checked}

erreur document.getElementById(...) is null or not a object

Je ne comprend pas ce que veut dire cette erreur, la fonctionne renvoie pas Null et n'est pas considéré comme etant un objet. Je seche

Bonjour,
il ne serait pas plus siple de s'inspirer de la FAQ et donc de faire ainsi :

Code:

1
2
3
4
5
6
7
function enableBox(nombre){
if (document.getElementById('rad'+nombre).checked) {
	document.getElementById('prix'+nombre).disabled=false;
	} else {				  
	document.getElementById('prix'+nombre).disabled=true;
}
}

et

Code:

1
2
3
4
5
6
7
8
9
<td>
<input type="radio" id="rad0" name="etat[1228604400]" value="1" onclick="enableBox('0');" checked="checked"> Libre
</td>
<td>
<input type="radio" id="rada0" name="etat[1228604400]" value="0" onclick="enableBox('0');"> Occup&eacute;
</td>
<td>
<input name="prix[1228604400]" id="prix0" type="text" size="10" class="test">€
</td>

Jumano, Bovino, je vous remercie, cela fonctionne.
Je suis depuis quelques jours dessus avec mon tableau dynamique sans trouver la solution.

Pour le ...length, sauriez vous comment l'enlever pour avoir pile poile le nbre de test et ainsi ne pas faire des loops pour rien ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function test() { var inputList = document.getElementById('tableau').getElementsByTagName('input'); for(var i=0; i<inputList.length; i++){ if(document.getElementById("prix"+i).value== "" && document.getElementById("rad"+[i]).checked) { alert ("Veuillez remplir le prix de la ligne " +[i]+ ". Le champs libre étant coché, vous devez rentrer un prix"); document.getElementById("prix"+i).focus(); return false; } } }

Re,
Tu peux ajouter :

Code:

1
2
3
for(var i=0; i<inputList.length; i++){
 
if(inputList[i].type=='radio') {

merci bcp a vous deux, tout est ok