Conditions avec 2 checkbox

**romann76** · 16/07/2009, 13h36

Bonjour,

Voici ce que je recherche en utilisant javacript :

si une personne coche la checkbox "paiement" elle doit donc cocher un bouton radio "cheque" "cb" ou "mandat"

voici le debut de mon javascript :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
var payment = document.formulaire.payment;
var i=0;
while(i<payment.length & payment[i].checked==false)
	{
	i++ ;
	}
	if(i>=payment.length) {
	alert("choisissez votre paiement");
	return false;
	}

Si vous avez des idées ?

Merci d'avance

**franculo_caoulene** · 16/07/2009, 15h04

Salut,

Poste-nous un document html complet et vidé de tout code inutile à l'illustration de ton problème, s'il te plait. On ne sait pas ce que représente quoi dans ton code. Voici un petit modèle :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>modèle de code pour bien poster</title>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <style type="text/css">
  /* code css */
  </style>
</head>
<body>
  <!-- code xhtml -->
  <script type="text/javascript">
  <!--
    // code javascript
  //-->
  </script>
</body>
</html>

**autofill** · 16/07/2009, 15h45

En parlant de contenu inutile, tu ne peux pas supprimer la première ligne de ton modèle ?

Oups je sors et je cours, il y a une armée à mes trousses

Sinon c'est vrai que ce n'est pas très clair ta demande ...

Si tu veux juste tester qu'un bouton radio est coché, tu peux utiliser cette fonction :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function isRadioChecked(objRadio) {
  if (objRadio[0]) {
    for (i=0; i < objRadio.length; i++) {
      if (objRadio[i].checked) {
        return true;
      }
    }
  } else if (objRadio.checked) {
    return true;
  }
 
  return false;
}

Et pour obtenir la valeur sélectionnée :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function getRadioValue(objRadio) {
  if (objRadio[0]) {
    for (i=0; i < objRadio.length; i++) {
      if (objRadio[i].checked) {
        return objRadio[i].value;
      }
    }
  } else if (objRadio.checked) {
    return objRadio.value;
  }
 
  return false;
}

**romann76** · 16/07/2009, 16h28

voici le code

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
34
35
36
37
38
39
40
41
42
43
44
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<script type="text/javascript">  
function validpaiement()
{
if ((document.forms.paiement.checked==true) && (document.forms.mode.checked==false) )
{
alert("merci de selectionner votre paiement");
return false;
}
return true;
}
</script>
</head>
<body>
 
<form action="http://www.monsite.com/acces-paiement.html" method="post" enctype="application/x-www-form-urlencoded" name="forms" OnSubmit="return validpaiement()">
	<table>
		<tr>
			<td>
	<input type="checkbox" name="paiement" id="paiement" /></td><td> Je désire régler maintenant</td>
		</tr>
		<tr>
			<td><input type="radio" name="mode" id="cb" /> Carte bancaire</td>
		</tr>
		<tr>
			<td><input type="radio" name="mode" id="cheque" />Chèque</td>
		</tr>
		<tr>
			<td><input type="radio" name="mode" id="mandat" />Mandat</td>
		</tr>
		<tr>
			<td colspan="2" style="text-align:center">
			<input type="submit" value="valider">
			</td>
		</tr>
	</table>
</form>
</body>
</html>

le principe que je recherche est que si il coche la chekbox il faut l'obliger a sélectionner un mode de paiement

Merci

**micetf** · 16/07/2009, 17h13

Il y a sûrement mieux,
mais voilà ce que je ferais.
Pour accéder à l'attribut checked, je passerais plutôt par la fonction getElementById()
et
je désactiverais les checkbox type de paiement
tant que l'utilisateur n'a pas signifié qu'il avait l'intention de payer maintenant.

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<script type="text/javascript">
function $(id) {
	return document.getElementById(id);
} 
function activepaiement() {
	$("cb").disabled=$("paiement").checked==false;
	$("cheque").disabled=$("paiement").checked==false;
	$("mandat").disabled=$("paiement").checked==false;
}
function validpaiement() {
	if (($("paiement").checked==true) && !(($("cb").checked||$("cheque").checked||$("mandat").checked)==true) ) {
		alert("merci de selectionner votre paiement");
		return false;
	}
	return true;
}
window.onload=function() {
	activepaiement();
}
</script>
</head>
<body>
 
<form action="" method="post" enctype="application/x-www-form-urlencoded" name="forms" >
	<table>
		<tr>
			<td>
	<input type="checkbox" name="paiement" id="paiement" onclick="activepaiement()" /></td><td> Je désire régler maintenant</td>
		</tr>
		<tr>
			<td><input type="radio" name="mode" id="cb"  /> Carte bancaire</td>
		</tr>
		<tr>
			<td><input type="radio" name="mode" id="cheque"  />Chèque</td>
		</tr>
		<tr>
			<td><input type="radio" name="mode" id="mandat"  />Mandat</td>
		</tr>
		<tr>
			<td colspan="2" style="text-align:center">
			<input type="submit" value="valider" onclick="validpaiement()">
			</td>
		</tr>
	</table>
</form>
</body>
</html>

Fred

**franculo_caoulene** · 16/07/2009, 17h28

A vue de nez dans validpaiement :

Code :

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

1
2
3
4
5
6
7
if (document.getElementById("paiement").checked) {
  var mode = document.getElementsByName("mode");
  for (var i=0,imax=mode.length; i<imax; i++) {
    if (mode[i].checked) { return true; }
  }
  return false;
}

**romann76** · 17/07/2009, 07h17

merci de vos réponses mais aucun des 2 fonctionnent...

en fait, je peux valider sans passer par les conditions

Romann76

**franculo_caoulene** · 17/07/2009, 10h24

Il suffit juste de déplacer le return false

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
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<script type="text/javascript">  
function validpaiement()
{
if (document.getElementById("paiement").checked) {
  var mode = document.getElementsByName("mode");
  for (var i=0,imax=mode.length; i<imax; i++) {
    if (mode[i].checked) { return true; }
  }
}
alert("raté");
return false;
}
</script>
</head>
<body>
 
<form action="http://www.monsite.com/acces-paiement.html" method="post" enctype="application/x-www-form-urlencoded" name="forms" OnSubmit="return validpaiement()">
	<table>
		<tr>
			<td>
	<input type="checkbox" name="paiement" id="paiement" /></td><td> Je désire régler maintenant</td>
		</tr>
		<tr>
			<td><input type="radio" name="mode" id="cb" /> Carte bancaire</td>
		</tr>
		<tr>
			<td><input type="radio" name="mode" id="cheque" />Chèque</td>
		</tr>
		<tr>
			<td><input type="radio" name="mode" id="mandat" />Mandat</td>
		</tr>
		<tr>
			<td colspan="2" style="text-align:center">
			<input type="submit" value="valider">
			</td>
		</tr>
	</table>
</form>
</body>
</html>

Conditions avec 2 checkbox

JavaScript

Discussions similaires

Partager

Partager