Discussion :

[The_Miagiste]

Bonjour,

J'ai un formulaire : http://199.16.131.121/~mabtycom/contact.html

lors de l'envoie après validation) le code de la page "formulaire.php" s'exécute et me renvoie sur la page d’accueil.

Je souhaites donc affiché une fenêtre pop-up, après le click sur le button submit.

j'ai essayé de le faire avec cette exemple :
http://sohtanaka.developpez.com/tu [...] et-jquery/

ca marche sauf que la fenêtre s'affiche après le Click mais avant la validation et l'envoie du formulaire.


je voudrais savoir comment faire pour contrôler l'affichage de la fenêtre modal ou comment faire pour intégrer ce code dans ma page formulaire.php.


Merci d'avance pour votre aide.

[Vil'Coyote]

sans code je vais y allez un peut à l'aveugle mais bon ...
tu doit certainement utiliser un bouton de type "submit" pour l'envoi de ton formulaire. dans ce cas, il te faudrais utiliser un bouton de type "bouton" sur lequel tu ajoute l'action onclick de là tu pourras alors mettre un alert("affiche s'que tu veux"); form.submit();

[The_Miagiste]

ca ne marche pas en ajoutant le onclick, ni le onsubmit.


voila le code utilisé :


Code form :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<td><form id="formID"  method="post" action="formulaire.php">
 
	<span class="text_1" style="height:11 ">Votre Nom:</span><br>
	<input value="" class="validate[required,custom[noSpecialCaracters],length[0,20]]text-input"  type="text" name="nom" id="user" style="height:20px; width: 185px; color: #666666; border : 1px solid #666666; background-color: #2B2B2B; line-height: 2px;"/>
 
	<span class="text_1" style="height:11 ">Votre E-mail</span><br>
	<input value="" class="validate[required,custom[email]] text-input"  type="text" name="email" id="user" style="height:20px; width: 185px; color: #666666; background-color: #2B2B2B; line-height: 12px; border : 1px solid #666666;"/>
 
	<span class="text_1" style="height:11 ">Votre Message</span><br>
	<textarea value="" class="validate[required,length[6,300]] text-input"id="user"   name="message" style="background-color:#2B2B2B; width: 185px; color: #666666; height: 144px; border : 1px solid #666666;"/> </textarea>                         
 
 
 
	<a href="#?w=500" rel="popup_name" class="poplight"><input class="submit" type="submit" value="Valider & Envoyer "/></a><img src="images/mail2-send-icon.png" alt= "n" width="25" height="24" align="absmiddle" border="0">                                
</form>

code java script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
38
39
40
41
42
43
44
45
46
47
48
<script type="text/javascript">
$(document).ready(function(){
 
 
	//When you click on a link with class of poplight and the href starts with a # 
	$('a.poplight[href^=#]').click(function() {
		var popID = $(this).attr('rel'); //Get Popup Name
		var popURL = $(this).attr('href'); //Get Popup href to define size
 
		//Pull Query & Variables from href URL
		var query= popURL.split('?');
		var dim= query[1].split('&');
		var popWidth = dim[0].split('=')[1]; //Gets the first query string value
 
		//Fade in the Popup and add close button
		$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
 
		//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
		var popMargTop = ($('#' + popID).height() + 80) / 2;
		var popMargLeft = ($('#' + popID).width() + 80) / 2;
 
		//Apply Margin to Popup
		$('#' + popID).css({ 
			'margin-top' : -popMargTop,
			'margin-left' : -popMargLeft
		});
 
		//Fade in Background
		$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
		$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 
 
		return false;
	});
 
 
	//Close Popups and Fade Layer
	$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
	  	$('#fade , .popup_block').fadeOut(function() {
			$('#fade, a.close').remove();  
	}); //fade them both out
 
		return false;
	});
 
 
});
 
</script>

[SpaceFrog]

heu si tu mets ton input type submit dans une balise a ....

[The_Miagiste]

euuuuuh oui.... ?

[SpaceFrog]

c'est le href de la balise a qui l'emporte est recharge ta page

si c'est juste pour avoir le curseur sous forme de main, vire la balise a et colle un style cursor:pointer

sinon mets un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onclick="return false;"

sur ta balise a afin d'inhiber le href