Confirmation de formulaire / condition

Gaetan_ · 17/01/2011, 09h52

Bonjour à tous,

Pardon, je ne suis pas très copain avec le JS...
Je voudrais réaliser un truc tout simple :
Qu'un pop up de confirmation de formulaire n'apparaisse que si mon bouton radio est égal à 0.

en fait quelque chose qui ressemble dans l'absolu à ca :

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
<script>
function confirm(){
if (document.monform.toto.value == 0)
{	
	if (confirm("Etes vous sur ?")){ document.forms.monform.submit(); }
}
}
</script>
</HEAD>
<BODY>
<form method='post' action='toto.php' id="monform">
<INPUT TYPE="radio" NAME="toto" value="0" CHECKED>
<INPUT TYPE="radio" NAME="toto" value="1">
<INPUT TYPE="button" VALUE="Valider"  onclick="confirm()">
</FORM>

Je sais ce n'est pas beau...

Quelqu'un pourrait il m'aider ?

En vous remerciant

Loceka · 17/01/2011, 10h51

Plusieurs erreurs :

La plus grave est d'appeller ta fonction confirm en sachant qu'une telle fonction existe déjà en Javascript (la preuve, tu l'utilises).

Ensuite tu cherches "document.monform" alors que c'est "document.forms.monform" (tu l'as d'ailleurs bien écrit par la suite).

Puis tu cherches la valeur (.value) de l'élément qui a le nom "toto" alors que 2 éléments répondent à ce nom, donc c'est une collection d'élément, pas un élément.

Et enfin, l'indentation

Voilà un code qui marche :

Code :

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

1
2
3
4
5
function monConfirm(){
	if (document.forms.monform.toto[0].checked) {
		if (confirm("Etes vous sur ?")){ document.forms.monform.submit(); }
	}
}

Gaetan_ · 17/01/2011, 11h04

Merci !
Clair et bien expliqué.

Seul hic : ca passe sur ie et pas sur ff...

Loceka · 17/01/2011, 11h16

wabon ?

Chez moi ça marche (IE 8, Opera 9 et FF 3.6)

Ceci dit j'aime pas bien la syntaxe de tout à l'heure (mais je sais que certains Maîtres ici la préconisent donc elle doit pas être si mal) alors je vais la réécrire :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function monConfirm(){
	// récupération du formulaire
	var monForm = document.getElementById("monform");
	// récupération du premier élément avec le name "toto"
	var toto_0 = document.getElementsByName("toto")[0];
	if (toto_0.checked) {
		if (confirm("Etes vous sur ?")) {
			monForm.submit();
		}
	}
}

Normalement ça devrait marcher sur tous les navigateurs (mais le code d'avant aussi...)

Gaetan_ · 17/01/2011, 11h40

Excuse moi je me suis mal exprimé aussi.

J'ai le message de confirmation dans les 2 cas :
Même si le 2eme bouton radio est coché.

Loceka · 17/01/2011, 11h49

Moi pas

Tu peux mettre le code de ta page en entier ?
Et aussi donner la version de FF avec laquelle ça passe pas ?

Gaetan_ · 17/01/2011, 13h37

Roswell

Bien sur voilà mon 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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE></TITLE>
<script>
function monConfirm(){
	var monForm = document.getElementById("monform");
	var toto_0 = document.getElementsByName("toto")[0];
	if (toto_0.checked) {
		if (confirm("Etes vous sur ?")) {
			monForm.submit();
		}
	}
}
</script>
</HEAD>
<BODY>
<form method='post' action='toto.php' id="monform">
<INPUT TYPE="radio" NAME="toto" value="0" CHECKED>
<INPUT TYPE="radio" NAME="toto" value="1">
<INPUT TYPE="button" VALUE="Valider"  onclick="confirm()">
</FORM>
 
</BODY>
</HTML>

Testé sous Firefox 3.6.13

Merci

Loceka · 17/01/2011, 14h11

J'ai exactement cette version de FF et ça marche très bien, à condition bien entendu que tu appelles la bonne méthode (sinon ça ne marche pas du tout) :

Code :

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

<INPUT TYPE="button" VALUE="Valider"  onclick="monConfirm()">

Gaetan_ · 17/01/2011, 14h19

Erf...

Un grand merci !

Super.

Bonne journée

Gaetan_ · 17/01/2011, 14h50

Pardon je fais mon boulet...

Si le bouton radio #2 est sélectionne le formulaire ne se valide pas

Désolé

Gaetan_ · 17/01/2011, 17h33

Je pense avoir trouvé mais si je clique su OK ou Annuler je vais vers la page "toto.php" existe t'il une solution pour rester sur la page courante en cas d'annulation ?

Merci

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
<HTML>
 <HEAD>
  <TITLE></TITLE>
<script>
function monConfirm(){
	var monForm = document.getElementById("monform");
	var toto_0 = document.getElementsByName("toto")[0];
	var toto_1 = document.getElementsByName("toto")[1];
	if (toto_0.checked) {
		if (confirm("Confirmer ?")) {
			monForm.submit();
		}
	} 
	if (toto_1.checked) {
	 monForm.submit();
	 }
}
</script>
 
 
</HEAD>
<BODY>
<form method='post' action='toto.php' id="monform">
<INPUT TYPE="radio" NAME="toto" value="0" CHECKED>
<INPUT TYPE="radio" NAME="toto" value="1">
<INPUT TYPE="button" VALUE="Valider"  onclick="monConfirm()">
 
</FORM>
 
</BODY>
</HTML>

vermine · 17/01/2011, 17h39

Bonjour,

Je ne suis pas d'accord avec vous.

Si vous cochez le premier bouton et que vous cliquez sur "Annuler" dans la pop up de confirm, vous restez sur la même page. Vous ne serez redirigé que si vous cliquez sur "Ok" ou bien si vous cochez le second bouton.

Loceka · 17/01/2011, 17h53

+1 sur Vermine, pour moi ça marche comme ça le devrait.

Par contre, il serait plus "propre" d'utiliser la validation sur le formulaire à mon avis (ajout d'un attribut onsubmit au formulaire, remplacement du bouton valider par un submit et ajout d'un return à la méthode):

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
<HTML>
 <HEAD>
  <TITLE></TITLE>
<script>
function monConfirm(){
	var toto = document.getElementsByName("toto");
	var canSubmit = false;
	if (toto[0].checked) {
		if (confirm("Confirmer ?")) {
			canSubmit = true;
		}
	} else if (toto[1].checked) {
			canSubmit = true;
	}
	return canSubmit;
}
</script>
 
 
</HEAD>
<BODY>
<form method='post' action='toto.php' id="monform" onsubmit="return monConfirm();">
<INPUT TYPE="radio" NAME="toto" value="0" checked="checked"/>
<INPUT TYPE="radio" NAME="toto" value="1"/>
<INPUT TYPE="submit" VALUE="Valider"/>
 
</FORM>
 
</BODY>
</HTML>

Note aussi que tu peux factoriser ta méthode :

Code :

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

1
2
3
4
function monConfirm(){
	var toto = document.getElementsByName("toto");
	return toto[1].checked || (toto[0].checked && confirm("Confirmer ?"));
}

Gaetan_ · 17/01/2011, 18h16

Merci à vous. Super.

Mon problème vient en fait du Submit qui en image semble mal interprété.
OK :

Code :

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

1
2
 
<INPUT TYPE="button" VALUE="Valider"  onclick="monConfirm()">

Bloque :

Code :

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

1
2
 
<INPUT TYPE="image" SRC="<?php echo $base_url; ?>bio/valider.gif" onMouseOver="this.src='<?php echo $base_url; ?>bio/valider2.gif'" onMouseOut="this.src='<?php echo $base_url; ?>bio/valider.gif'" WIDTH="229" HEIGHT="28" BORDER="0" ALIGN="AbsMiddle" onclick="monConfirm()">

dukej · 17/01/2011, 20h52

Citation:

Envoyé par Gaetan_

Merci à vous. Super.

Mon problème vient en fait du Submit qui en image semble mal interprété.
OK :

Code :

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

1
2
 
<INPUT TYPE="button" VALUE="Valider"  onclick="monConfirm()">

Bloque :

Code :

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

1
2
 
<INPUT TYPE="image" SRC="<?php echo $base_url; ?>bio/valider.gif" onMouseOver="this.src='<?php echo $base_url; ?>bio/valider2.gif'" onMouseOut="this.src='<?php echo $base_url; ?>bio/valider.gif'" WIDTH="229" HEIGHT="28" BORDER="0" ALIGN="AbsMiddle" onclick="monConfirm()">

normal un input type image renvoie : nameinput.x et nameinput.y

Loceka · 18/01/2011, 07h52

Citation:

Envoyé par Gaetan_

Merci à vous. Super.

Mon problème vient en fait du Submit qui en image semble mal interprété.
OK :

Code :

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

1
2
 
<INPUT TYPE="button" VALUE="Valider"  onclick="monConfirm()">

Bloque :

Code :

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

1
2
 
<INPUT TYPE="image" SRC="<?php echo $base_url; ?>bio/valider.gif" onMouseOver="this.src='<?php echo $base_url; ?>bio/valider2.gif'" onMouseOut="this.src='<?php echo $base_url; ?>bio/valider.gif'" WIDTH="229" HEIGHT="28" BORDER="0" ALIGN="AbsMiddle" onclick="monConfirm()">

Normal, mais pas pour la raison énoncée ci-dessus :

Un input de type "image" a exactement le même comportement qu'un input de type "submit", comportement qui est très différent du input de type "button" (du coup si tu prends le dernier code que j'ai donné ça devrait marcher ^_^) :
Le type submit/image va valider ton formulaire tout seul. Ici ton formulaire est déclaré comme suit :

Code :

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

<form method='post' action='toto.php'>

Ce qui fait que lors de l'appui sur un input type submit/image, il va appeller la page "toto.php" en POST.
Le fait que tu fasses une validation du formulaire dans ta fonction appellée par le onclick ne sert à rien, sauf à soumettre ton formulaire plus tôt que prévu.
Pour vérifier un formulaire avant de l'envoyer lorsqu'on utilise un submit/image, il faut obligatoirement passer par l'attribut "onsubmit" du formulaire (ou alors terminer ton onclick par un "return false" sur l'input submit mais c'est très moche et ça peut ne pas marcher sur tous les navigateurs).

Les input de type button quant à eux se contentent d'avoir l'apparence d'un bouton, il ne soumettent pas les formulaires ni rien.

Pour résumer :

vire le onclick sur le bouton
ajoute le onsubmit sur le formulaire
change la fonction javascript comme je l'ai montré plus haut

La prochaine fois mets ton vrai code

Gaetan_ · 18/01/2011, 09h49

Bonjour,

Merci pour votre suivi et toutes vos explications, vraiment.

Citation:

ajoute le onsubmit sur le formulaire

c'est à dire :

Code :

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

<form method='post' action='toto.php' id="monform"  onsubmit="monConfirm()">

Pardon mais le JS...

Loceka · 18/01/2011, 10h23

Citation:

Envoyé par Gaetan_

c'est à dire :

Code :

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

<form method='post' action='toto.php' id="monform"  onsubmit="monConfirm()">

Pardon mais le JS...

Non, là c'est la lecture qui pêche

C'est à dire, comme j'avais écrit ci-avant (clique sur la carré bleu avec la flèche à côté du pseudo pour voir le message en entier) :

Citation:

Envoyé par Loceka

Code :

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

<form method='post' action='toto.php' id="monform" onsubmit="return monConfirm();">

Gaetan_ · 18/01/2011, 11h00

Merci pour votre aide et votre patience. Super.

Bonne journée

Gaetan_ · 18/01/2011, 12h46

Vous allez me détester je le sais...

Loceka j'ai repris ta solution c'est parfait.

j'ai un dernier problème....

:
Mon formulaire comporte une valeur "transport", sous forme de bouton radio.
Ce dernier peut avoir les valeurs 1 / 2 / 3 ou 4.
Certaines de ces valeurs peuvent ne pas apparaitre dans certains cas (transport = 1 ou 3 ou 4)

Il ne faudrait pas que ce message apparaisse si "transport" a la valeur 4.

j'ai donc essayé d'adapter le code mais rien

Code :

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

1
2
3
4
5
6
 
function monConfirm(){
	var assu = document.getElementsByName("assur");
	var transp = document.getElementsByName("transport");
	return assu[0].checked || (assu[1].checked && transp.value != '4' && confirm("Confirmation"));
}

Code fonctionnant à la base :

Code :

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

1
2
3
4
5
6
 
function monConfirm(){
	var assu = document.getElementsByName("assur");
	var transp = document.getElementsByName("transport");
	return assu[0].checked || (assu[1].checked && confirm("Confirmation"));
}

Je suis désolé

17/01/2011, 14h11	#8
Loceka Membre Expert Tlouye Ci Inscription : mars 2004 Messages : 1 450 Détails du profil Informations personnelles : Nom : Tlouye Ci Informations forums : Inscription : mars 2004 Messages : 1 450 Points : 2 149 Points : 2 149	J'ai exactement cette version de FF et ça marche très bien, à condition bien entendu que tu appelles la bonne méthode (sinon ça ne marche pas du tout) : Code : Sélectionner tout - Visualiser dans une fenêtre à part <INPUT TYPE="button" VALUE="Valider" onclick="monConfirm()">
	00

17/01/2011, 17h39	#12
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 2 686 Détails du profil Informations personnelles : Âge : 27 Informations forums : Inscription : mars 2008 Messages : 2 686 Points : 5 768 Points : 5 768	Bonjour, Je ne suis pas d'accord avec vous. Si vous cochez le premier bouton et que vous cliquez sur "Annuler" dans la pop up de confirm, vous restez sur la même page. Vous ne serez redirigé que si vous cliquez sur "Ok" ou bien si vous cochez le second bouton. __________________ Elen Poukram - Isegoria - Sandawe
	00

17/01/2011, 11h04	#3
Gaetan_ Membre éprouvé Gaetan Webmaster Inscription : janvier 2007 Messages : 386 Détails du profil Informations personnelles : Nom : Gaetan Âge : 40 Localisation : France Informations professionnelles : Activité : Webmaster Secteur : Biens de consommation Informations forums : Inscription : janvier 2007 Messages : 386 Points : 441 Points : 441	Merci ! Clair et bien expliqué. Seul hic : ca passe sur ie et pas sur ff...
	00

17/01/2011, 11h40	#5
Gaetan_ Membre éprouvé Gaetan Webmaster Inscription : janvier 2007 Messages : 386 Détails du profil Informations personnelles : Nom : Gaetan Âge : 40 Localisation : France Informations professionnelles : Activité : Webmaster Secteur : Biens de consommation Informations forums : Inscription : janvier 2007 Messages : 386 Points : 441 Points : 441	Excuse moi je me suis mal exprimé aussi. J'ai le message de confirmation dans les 2 cas : Même si le 2eme bouton radio est coché.
	00

17/01/2011, 11h49	#6
Loceka Membre Expert Tlouye Ci Inscription : mars 2004 Messages : 1 450 Détails du profil Informations personnelles : Nom : Tlouye Ci Informations forums : Inscription : mars 2004 Messages : 1 450 Points : 2 149 Points : 2 149	Moi pas Tu peux mettre le code de ta page en entier ? Et aussi donner la version de FF avec laquelle ça passe pas ?
	00

17/01/2011, 14h19	#9
Gaetan_ Membre éprouvé Gaetan Webmaster Inscription : janvier 2007 Messages : 386 Détails du profil Informations personnelles : Nom : Gaetan Âge : 40 Localisation : France Informations professionnelles : Activité : Webmaster Secteur : Biens de consommation Informations forums : Inscription : janvier 2007 Messages : 386 Points : 441 Points : 441	Erf... Un grand merci ! Super. Bonne journée
	00

17/01/2011, 14h50	#10
Gaetan_ Membre éprouvé Gaetan Webmaster Inscription : janvier 2007 Messages : 386 Détails du profil Informations personnelles : Nom : Gaetan Âge : 40 Localisation : France Informations professionnelles : Activité : Webmaster Secteur : Biens de consommation Informations forums : Inscription : janvier 2007 Messages : 386 Points : 441 Points : 441	Pardon je fais mon boulet... Si le bouton radio #2 est sélectionne le formulaire ne se valide pas Désolé
	00

18/01/2011, 11h00	#19
Gaetan_ Membre éprouvé Gaetan Webmaster Inscription : janvier 2007 Messages : 386 Détails du profil Informations personnelles : Nom : Gaetan Âge : 40 Localisation : France Informations professionnelles : Activité : Webmaster Secteur : Biens de consommation Informations forums : Inscription : janvier 2007 Messages : 386 Points : 441 Points : 441	Merci pour votre aide et votre patience. Super. Bonne journée
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email