Arrêter le submit à la fermeture d'une lightbox

Version imprimable

Bonjour,

J'ai une lightbox (au style de Facebook) :P qui s'ouvre quand on clique sur Connexion.
Lorsqu'on clique sur le lien submit, un delay de 2000 m/s s'enchaine avant de lancer le submit.

Jusque là j'espère que c'est compréhensible :roll:

Ensuite j'aimerais quand un visiteur clique sur le lien submit, que pendant le delay, s'il ferme la lightbox, le formulaire ne s’envoie plus, et que donc il ne soit pas redirigé.

Vous pouvez voir le script sur : www.web-astronomie.com (Site en contruction)

Je précise que tout est en Jquery et voici le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
$(document).ready(function(){
			$('#load').hide(); //On cache l'image gif de chargement
            $("#loginbox").click(function () { 
				$("#dialog").fadeIn("fast"); //On ouvre la lightbox
            });
			$("#login").click(function () {
				$('#load').show(); //Au clic on affiche l'image gif
				setTimeout(function() {
					$('#form').submit(); //On envoie le formulaire au bout de 2 secondes
				}, 2000);
			});
            $("#close-dialog").click(function () {
				$("#dialog").fadeOut("fast"); //On ferme la lightbox
			});
});

Et voici le code du formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<form method="post" action="login.php" class="form-login" name="form_login" id="form">
<table>
<tr><td><label class="form_login_label">Nom d'utilisateur</label></td></tr>
<tr><td><input type="text" name="pseudo" class="form_login_input" maxlength="23" /></td></tr>
<tr><td><label class="form_login_label">Mot de passe</label></td></tr>
<tr><td><input type="password" name="password" class="form_login_input" maxlength="30" /></td></tr>
<tr><td><input type="checkbox" id="checkbox" name="check" class="checkbox" /><label class="check" for="checkbox">Rester connecté</label><label class="mdp">|&nbsp; <a href="index.php">Mot de passe perdu</a></label></td></tr>
<tr><td><a href="#" name="Submit" title="Connexion" class="login" id="login"></a>
<a href="register.php" title="Inscription" class="register"></a><img src="../images/loading.gif" id="load" alt="" class="loading" /></td></tr>
<tr><td><? echo $reponse; ?></td></tr>
</table>
</form>

J'espère que quelqu'un pourra trouver une solution pour moi :wow:

:merci:

Il faut affecter ton setTimeout() a une variable :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function(){
var timer;
			$('#load').hide(); //On cache l'image gif de chargement
            $("#loginbox").click(function () { 
				$("#dialog").fadeIn("fast"); //On ouvre la lightbox
            });
			$("#login").click(function () {
				$('#load').show(); //Au clic on affiche l'image gif
				timer = setTimeout(function() {
					$('#form').submit(); //On envoie le formulaire au bout de 2 secondes
				}, 2000);
			});
            $("#close-dialog").click(function () {
				$("#dialog").fadeOut("fast"); //On ferme la lightbox
if(timer) clearTimeout(timer);
			});
});

05/06/2012, 19h02
nico44530

Problème résolu

Merci beaucoup :ccool:

Loading avant l'affichage de la lightbox

Là c'est peut être un peu plus compliqué ce que je voudrais demander.

Toujours avec les codes ci-dessus, je souhaiterais un loading de ma lightbox avant son affichage, en Jquery si possible je pense que c'est faisable ;)

Voici le code de la lightbox avec un div "loading-dialog" dans lequel il y aura le contenu du chargement.

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
32
33
34
35
36
37
 
	<div id="dialog">
		<div class="content-generic-dialog">
			<div class="generic-dialog" style="width: 400px; margin-top: 250px;">
				<div class="container-dialog">
					<h2 class="titre-dialog">
						<span>Connexion</span>
					</h2>
					<div class="content-dialog">
						<div class="body-dialog">
							<div id="form_login">
								<form method="post" action="login.php" class="form-login" name="form_login" id="form">
									<table>
										<tr><td><label class="form_login_label">Nom d'utilisateur</label></td></tr>
										<tr><td><input type="text" name="pseudo" class="form_login_input" maxlength="23" /></td></tr>
										<tr><td><label class="form_login_label">Mot de passe</label></td></tr>
										<tr><td><input type="password" name="password" class="form_login_input" maxlength="30" /></td></tr>
										<tr><td><input type="checkbox" id="checkbox" name="check" class="checkbox" /><label class="check" for="checkbox">Rester connecté</label><label class="mdp">|&nbsp; <a href="index.php">Mot de passe perdu</a></label></td></tr>
										<tr><td><a href="#" name="Submit" title="Connexion" class="login" id="login"></a>
										<a href="register.php" title="Inscription" class="register"></a><img src="../images/loading.gif" id="load" alt="" class="loading" /></td></tr>
										<tr><td><? echo $reponse; ?></td></tr>
									</table>
								</form>
							</div>
						</div>
						<div class="footer-dialog">
							<div>
								<a href="#" title="Fermer" id="close-dialog" class="close"></a>
							</div>
						</div>
						<div class="loading-dialog">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

Merci d'avance