11548 sujets

JavaScript, DOM et API Web HTML5

Soumettre un formulaire après un délais d'animation en jQuery

Bonjour,

Je cherche à créer un effet fadIn() en jQuery sur un formulaire avant l'envoie de celui par une méthode POST et le chargement de ma page.

En gros mon formulaire est comme ceci (simplifié):


<form action="" method="post">
	<input type="text" value="'.$var.'"/>
	<input type="submit" name="content" value="'.$var.'"/>';
</form>


Il y a du PHP dans mon code et plusieurs formulaires sur ma page. Le formulaire est placé sur la même page que le code PHP qui traite la variable $_POST qu'envoie le formulaire en question. Je veux que l'effet s'applique à tous les formulaires.

Donc en jQuery je fait ça :


var fadingBlocks = $('form');

fadingBlocks.each(function(e) {
	e.preventDefault();
	$(this).fadeOut(1000, function() {
		$(this).submit();
	});
});


Le petit problème, c'est que malgré le .submit() dans la fonction callback du fadeOut(), la variable $_POST n'est pas envoyée. La fonction e.preventDefault() ne semble pas se désactiver.

J'ai passé toute l'après-midi à chercher une solution. En vain... C'est pourtant un effet plutôt simple et courant sur la toile.. J'ai essayé de mettre l'évenement sur le bouton "submit" avec un :


$('monSubmit').on('click', function() {... mon code ...});


Rien n'y fait...

Si quelqu'un a une idée.. Merci à l'avance!!
Merci pour ta réponse Super Balou et pour le lien!!

Justement dans ce post de stackoverflow qui un très un bon forum au passage (et j'en ai fait un bon nombre de post aujourd'hui sur stackoverflow, sans vouloir faire rougir alsa creation Smiley lol ), les réponses qui ont été donné utilise la fonction
a écrit :
e.preventDefault()
que j'utilise pour bloquer l'envoie du formulaire le temps de l'animation (qui marche très bien au passage), ainsi que la fonction
a écrit :
.submit()
appliquée sur le sélecteur du formulaire, hors chez moi ça ne marche pas...

Le formulaire n'est pas envoyé et la page ne se recharge pas. Smiley confus

Je ne vois pas pourquoi...
Le this tout court ne fait pas la même chose que celui inclus dans un sélecteur jQuery (regarde attentivement la réponse sélectionnée il ne fait pas appel au sélecteur jQuery)
Alors, oui effectivement, le fait de préparer la variable en faisant :


var self = $(this);  // J'ai remplacé le 'this' du post stackoverflow par $(this) qui est la syntaxe jQuery


fait en sorte que le formulaire est bien soumis. Bravo !!

Le petit soucis que j'ai maintenant, c'est que l'effet n'est plus pris en compte.. la page se charge directement et aucun effet n'est visible...

Je rappelle mon code complet:



$('header nav form').each(function(e) {
	var self = $(this);
	e.preventDefault();
	self.fadeOut(1000, function() {
		self.submit();
	});
});


Y-t'il quelque chose qui manque ? Smiley confus
Idée bête, mais ceci :

$('header nav').on('submit', 'form', function(e) {
	var self = $(this);
	e.preventDefault();
	self.fadeOut(1000, function()
	{
	self.submit();
	});
});

Modifié par Super_baloo8 (27 Jan 2013 - 22:56)
Non, rien de plus en rajoutant
a écrit :
'form'
...

Je remet mon code car j'ai changé 2/3 trucs :



var fadingBlocks = $('#fadingBlocks');	// J'ai mis tous mes formulaires dans un <div>
var forms = $('header nav form');		// Je récupère mes formulaires dans un array

forms.each(function() {			// Je crée l'évement "on('submit')" sur chacun de mes formulaires
	$(this).on('submit', 'form', function(event) {
		var self = $(this);			// Je met le formulaire en question dans une variable
		event.preventDefault();			// Je désactive la soumission du formulaire
		fadingBlocks.fadeOut(1000, function() {		// Je crée l'effet et je soumet le formulaire
			self.submit();	
		});
	});
});
Sujet clos
Aller à