Incohérence avec onsubmit ?

Version imprimable

16/06/2009, 10h06
jean1190

Incohérence avec onsubmit ?
Bonjour,

J'ai beaucoup lu à ce sujet. J'ai simplement envie de vérifier un formulaire avant envoi. Classique, oui, mais là ça ne marche pas.

Mon premier essai :
Code:

1 2 3 4 5 function valider(form) { alert("Saisissez les données"); return false; }
Code:

1 2 3 4 <form name="formulaire" id="formulaire" method="post" action="questionnaire.php" onsubmit="return valider(this)"> ... ... <input type="submit" name="valider" value="Valider le questionnaire" />
IE :Il ne se passe rien. Même pas d'alert.
FIREFOX : Le formulaire est tout le temps envoyé malgré le return false.

Note: En enlevant le "this" pour faire onsubmit ="return valider()" et function valider() ça ne change strictement rien.

Deuxième essai :

Code:

<form name="formulaire" id="formulaire" method="post" action="questionnaire.php" onsubmit="return false">

Là, quand même, le formulaire ne s'envoie pas, ni IE ni Firefox.

Où est ce que je me trompe dans mon premier essai ?

Merci !
16/06/2009, 10h11
andry.aime

Salut,
Vire le return dans le onsubmit.

Code:

<form name="formulaire" id="formulaire" method="post" action="questionnaire.php" onsubmit="valider(this)">

Modifie le nom de la paramètre "form" car ça peut te causer un problème.

Code:

1
2
3
<form name="formulaire" id="formulaire" method="post" action="questionnaire.php" onsubmit="return valider(this.form)">
...
...

Code:

1
2
3
4
5
function valider(monform)
		{
			alert("Saisissez les données");
			return false;
		}

empêcher la soumission de formulaire

Salut,

Ceci est l'illustration de ton cas :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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>empêcher la soumission de formulaire</title>
   <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <style type="text/css">
   </style>
</head>
<body>
  <form id="f" action="" method="post" onsubmit="return fn(this);">
    <input id="b1" type="submit" name="b" value="b1" />
  </form>
  <script type="text/javascript">
  <!--
  function fn(form) {
    alert(form);
    return false;
  }
  //-->
  </script>
</body>
</html>

Et ça fonctionne, j'aurais tendance à dire que l'erreur est ailleurs.

16/06/2009, 10h27
jean1190

J'ai essayé vos astuces, ça ne change rien.

Et je suis étonné de voir que le code de franculo_caoulene marche 8O
Mon formulaire ne contient pourtant que des input radio / text, des select etc...

Avant que j'enlève tout pour voir d'où vient l'erreur, vous n'avez pas une idée ? :mouarf:

Merci quand même !
16/06/2009, 10h28
franculo_caoulene

Citation:

Envoyé par jean1190

Avant que j'enlève tout pour voir d'où vient l'erreur, vous n'avez pas une idée ? :mouarf:

Nous ne sommes pas devins. Repartir de zéro est dans ton cas la meilleure façon de faire.
16/06/2009, 10h39
SpaceFrog

js est activé ??? :oops:
16/06/2009, 10h47
jean1190

Oui et je l'utilise un peu partout sur mon site pour Ajax.

"Nous ne sommes pas devins. Repartir de zéro est dans ton cas la meilleure façon de faire."
Si j'ai utilisé le smiley ":mouarf:", c'était justement pour montrer que j'avais bien compris que j'allais devoir m'y coller ;)

Merci en tout cas. Je reviendrais lorsque j'aurais de nouvelles informations !
16/06/2009, 10h58
Bovino

Citation:

Envoyé par jean1190

Oui et je l'utilise un peu partout sur mon site pour Ajax.

Et ton formulaire est généré avec Ajax ? :roll:

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
<!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>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<title>Questionnaire en ligne</title>
		<meta Name="description" Content="Questionnaire en ligne" />
		<meta Name="keywords" Content="Questionnaire congrès société clinique toxicologie" />
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href='style_main.css' />
		<script type = "text/javascript">
			function valider(monform)
			{
				alert("Saisissez les données");
				return false;
			}
 
		</script>
	</head>
 
	<body>
		<div id = "questionnaire">
			<form name="formulaire" id="formulaire" method="post" action="questionnaire.php" onsubmit="return valider(this);">
				<div id ="bouton"> 
					<input type="submit" name="valider" value="Valider le questionnaire" />
				</div>
			</form>
		</div>									
	</body>
</html>

J'ai tout enlevé, il ne reste plus que ça. Et ça ne marche toujours pas. Le formulaire est envoyé directement.
J'ai essayé une nouvelle fois d'enlever le return, d'ajouter this.form... Rien ne semble fonctionner.

Je tenais à préciser qu'en copiant collant le code de notre ami franculo, ça fonctionne.
Je ne vois franchement pas où est mon erreur.

16/06/2009, 10h59
jean1190

Citation:

Envoyé par Bovino

Et ton formulaire est généré avec Ajax ? :roll:

Absolument pas, c'est vraiment le formulaire "de base". C'est juste un questionnaire tout simple. Un document HTML, un script PHP pour remplir la base de données, et (j'aimerais) une fonction javascript pour vérifier que tous les champs sont bien remplis.
16/06/2009, 11h13
Bovino

Code:

<script type = "text/javascript">

Evite les espaces entre les attributs et leur valeur.

Code:

1 2 3 4 5 6 <form id="formulaire" method="post" action="questionnaire.php" onsubmit="return fn(this);"> ... function fn(form) { alert(form); return false; }
Ca marche !
Code:

1 2 3 4 5 6 <form id="formulaire" method="post" action="questionnaire.php" onsubmit="return valider(this);"> ... function valider(form) { alert(form); return false; }
Ca ne marche pas !

Voilà mes conclusions : je n'y comprends rien.
J'ai essayé plusieurs fois, et je confirme que le mot "valider" fait tout bugguer. J'ai essayé avec "tartanpion" ça marche :lol:

P-S: Merci Bovino, j'ai corrigé au passage !

16/06/2009, 11h17
franculo_caoulene

L'attribut name du bouton submit doit être différent du nom de la fonction.
16/06/2009, 14h02
jean1190

Bizarre qu'il y ait une corrélation entre les deux. Tu dis ça comme si c'était d'une logique évidente :oops:

ne pas nommer une fonction comme un élément de formulaire

Hé bien oui, avec un élément de formulaire et une fonction portant le même nom on obtiens ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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>ne pas nommer une fonction comme un élément de formulaire</title>
   <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <style type="text/css">
   </style>
</head>
<body>
  <form id="f" action="" method="post" onsubmit="alert(valider);return false;">
    <input id="b1" type="submit" name="valider" value="b1" />
  </form>
  <script type="text/javascript">
  <!--
  function valider() {
    alert("blah");
  }
  //-->
  </script>
</body>
</html>

L'alerte ne trouve pas la fonction, mais le bouton de soumission. Elle considère valider comme le raccourci de document.forms[0].valider, CQFD.

17/06/2009, 10h14
jean1190

Merci beaucoup ;)