11548 sujets

JavaScript, DOM et API Web HTML5

Comportement du submit

Bonjour à vous,

Je souhaite afficher un message sur l'évènement "onsubmit" de mon formulaire. Sauf que le message n'est pas affiché avec la fonction alert(); mais avec une fonction "maison" (un DIV ayant le même comportement que la fonction alert() sauf que l'affichage est personnalisé).

Mon soucis est le suivant : avec la fonction alert(); il ne soumet pas mon formulaire tant que je n'ai pas cliqué sur "OK" (comportement correct) alors qu'avec mon DIV, il soumet directement mon formulaire (comportement incorrect).

Je ne sais pas comment m'y prendre pour ne pas soumettre directement mon formulaire lorsque j'affiche mon DIV. Mais qu'il soit soumis lorsque je valide le message de mon DIV.

Voici un exemple (extrêmement) simplifié de mon code :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Test</title>

		<script type="text/javascript">
			window.onload = function() {
				document.getElementById('id_form').onsubmit = function() {
					// Affichage d'un DIV
					document.getElementById('id_div').style.display = 'block';

					// Je voudrai empecher la soumission de mon formulaire
					return false;
				}
			
				document.getElementById('id_span').onclick = function() {
					alert('Maintenant, je voudrai que mon formulaire soit validé !');

					return true;
				}
			}
		</script>
	</head>
	<body>
		<form id="id_form" action="form.htm" method="post">
			<input type="hidden" name="cle" value="valeur">
			<input type="submit" value="Valider">
		</form>
		<div id="id_div" style="display: none;">
			<p>
				Affichage du DIV.
			</p>
			<p style="color: #00f;">
				<span id="id_span">Fermer le DIV</span>
			</p>
		</div>
	</body>
</html>
Merci d'avance pour votre aide !
Ceci devrait envoyer ton formulaire : 
document.getElementById('id_form').submit();

A placer où tu le souhaites...
tm
Merci, ça m'avait échappé ! Problème résolu... en partie !

Dans l'exemple que j'ai donné, pas de soucis ! Ca fonctionne très bien.

Par contre, dans mon vrai code, mon submit est de type image et je dois récupérer les coordonnées. En utilisant cette solution, les coordonnées de l'image ne sont plus envoyées...

Pour tester en récupérant le X et Y, voici le code ! Si on commente la fonction alert() et qu'on décommente l'affichage du DIV et le "return false" alors on a plus le X et Y du logo !
<?php
if(!empty($_POST)) {
	echo '<pre>';
	print_r($_POST);
	echo '</pre>';
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Test</title>

		<script type="text/javascript">
			window.onload = function() {
				document.getElementById('id_form').onsubmit = function() {
					alert('En affichant une alerte, je récupère les coordonnées X et Y du logo Alsacréations');

					/*
					// Affichage d'un DIV
					document.getElementById('id_div').style.display = 'block';

					// Je voudrai empecher la soumission de mon formulaire
					return false;
					*/
				}
			
				document.getElementById('id_span').onclick = function() {
					alert('En cliquant ici, je soumets mon formulaire !');

					document.getElementById('id_form').submit();
				}
			}
		</script>
	</head>
	<body>
		<form id="id_form" action="form.php" method="post">
			<input type="hidden" name="cle" value="valeur">
			<input type="image" src="http://www.alsacreations.com/css/img/logo-alsacreations-com.png" name="logo_alsacreations">
		</form>
		<div id="id_div" style="display: none;">
			<p>
				Affichage du DIV.
			</p>
			<p style="color: #00f;">
				<span id="id_span">Fermer le DIV</span>
			</p>
		</div>
	</body>
</html>
Alphonse a écrit :

Pour tester en récupérant le X et Y, voici le code ! Si on commente la fonction alert() et qu'on décommente l'affichage du DIV et le &quot;return false&quot; alors on a plus le X et Y du logo !


Bonjour,

cela est dû au fait que tu ne soumets plus ton formulaire en cliquant sur l'image mais en utilisant la fonction javascript submit.

Une solution ( pas très jolie... ) serait de setter une variable globale à " true " quand tu cliques sur le " OK " de ta div personnalisée puis de lancer l'évenement " click " sur l'input de type " image ".

Puis, dans la fonction que tu associes à l'évenement .onsubmit, de vérifier, si ta variable est à true, de bien submiter ton formulaire, et si ta variable est à false, de bien afficher ton div qui remplace l'alerte.

Je ne sais pas si cela fonctionnerait, puisque lorsque tu cliques sur un input de type image, c'est la position de ta souris qui est ressortie, donc, si tu lances cet évenement en javascript, je ne sais pas ce que cela donne.

Peut-être est-il possible, la première fois que tu cliques, de stocker ces positions et de les insérer dans des input hidden de ton formulaire, en javascript, afin de les récupérer quand celui-ci est soumis...
Modifié par n3k0 (11 May 2011 - 20:45)
Sujet clos
Aller à