Confirmation de formulaire / condition

Version imprimable

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:

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

17/01/2011, 10h51
Loceka
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 :mouarf:

Voilà un code qui marche :
Code:

1 2 3 4 5 function monConfirm(){ if (document.forms.monform.toto[0].checked) { if (confirm("Etes vous sur ?")){ document.forms.monform.submit(); } } }
17/01/2011, 11h04
Gaetan_

Merci !
Clair et bien expliqué.

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

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:

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...)

17/01/2011, 11h40
Gaetan_

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é.
17/01/2011, 11h49
Loceka

Moi pas :koi:

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

Roswell :)

Bien sur voilà mon code :

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

17/01/2011, 14h11
Loceka

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:

<INPUT TYPE="button" VALUE="Valider" onclick="monConfirm()">
17/01/2011, 14h19
Gaetan_

Erf...

Un grand merci !

Super.

Bonne journée
17/01/2011, 14h50
Gaetan_

Pardon je fais mon boulet...

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

Désolé

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:

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>

17/01/2011, 17h39
vermine

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.

+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:

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:

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

Merci à vous. Super.

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

Code:

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

Bloque :

Code:

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()">

Citation:
Envoyé par Gaetan_
Merci à vous. Super.

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

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

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 :)

Citation:
Envoyé par Gaetan_
Merci à vous. Super.

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

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

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:

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

18/01/2011, 09h49
Gaetan_

Bonjour,

Merci pour votre suivi et toutes vos explications, vraiment.

Citation:

ajoute le onsubmit sur le formulaire

c'est à dire :

Code:

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

Pardon mais le JS...
18/01/2011, 10h23
Loceka

Citation:

Envoyé par Gaetan_

c'est à dire :

Code:

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

Pardon mais le JS...

Non, là c'est la lecture qui pêche :roll:
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:

<form method='post' action='toto.php' id="monform" onsubmit="return monConfirm();">
18/01/2011, 11h00
Gaetan_

Merci pour votre aide et votre patience. Super.

Bonne journée

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

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

j'ai un dernier problème.... :cry: :
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 :calim2:
Code:

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:

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é

18/01/2011, 13h42
Loceka

C'est normal :

Code:

var transp = document.getElementsByName("transport");

Tu récupères une liste d'éléments avec getElementsByName. Pour ne récupérer qu'un seul élément, il faut lui assigner un ID et l'appeller avec getElementById.

Si tu ne veux/peux pas faire ça avec l'ID, il faut que tu récupères le bon élément de ta liste (comme précédemment d'ailleurs). Comme à mon avis t'as qu'un seul élément avec le nom "transport", ça donnera :

Code:

var transp = document.getElementsByName("transport")[0];