Discussion :

[epoc.01]

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



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 :

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

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&eacute;
                     </td>
                     <td>
                       <input name="prix[1229727600]" id="prix2" type="text" size="10" class="test">€
                     </td>
                   </tr>

Voici mon javascript :

Code :

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

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 ?

[Bovino]

Code :

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

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

tout simplement, idem avec les champs prix.

[epoc.01]

Merci,

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

[Bovino]

Oui, c'est normal :

Code :

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

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.

[epoc.01]

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.

[Bovino]

En rajoutant un test :

Code :

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

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

[epoc.01]

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

Code :

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

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

[Bovino]

Attention aux parenthèses et accolades...

Code :

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

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 !

[epoc.01]

Je pense toucher au but , ca doit donner ceci :

Code :

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

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

[epoc.01]

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 :

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

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)

[Bovino]

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

Code :

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

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

[epoc.01]

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

Code :

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

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

[Bovino]

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

Code :

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

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}
	}
}

[epoc.01]

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

[Jumano]

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

Code :

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

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 :

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

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>

[epoc.01]

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 :

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

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

[Jumano]

Re,
Tu peux ajouter :

Code :

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

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

[epoc.01]

merci bcp a vous deux, tout est ok