Discussion :

[elpatriota]

Bonjour a tous

Je galère avec Jquery !! cette fois j'ai voulu tester l'envoie de variable POST vers un popup modale que j'ai trouver sur le net en utilisant php.

En faite l'idée c'est de saisir le nom dans mon input et de l'afficher dans un popup quand je clique sur le lien submit du formulaire.

Le problème c'est que quand je clique sur le liens, la validation ne s'effectue pas, j'ai le popup mais pas la variable $nom, mais quand je clique sur la touche Enter puis sur le liens, la variable s'affiche dans le popup.

pour plus d'info, voici mon formulaire:

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
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script  type="text/javascript" src="js/forms.js"></script>
<link rel="stylesheet" type="text/css" href="test.css" />
<script type="text/javascript" src="script.js"></script>
<form method = "POST" name="form1" action=""> 
 
<input type="text" name="nom"/> <br>
 
<a href="#?w=500" rel="popup_name" class="poplight" "javascript:document.forms['form1'].nom;document.forms['form1'].submit();">submit</a><br>
</form>
 
<?php
include 'pop.php'; // le contenu de mon popup
?>

mon pop.php :

Code :

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

1
2
3
4
5
 
<div id="popup_name" class="popup_block">
<h2>Popup Test1</h2>
<p>Votre nom est : <?php  if (isset($_POST['nom'])) { $nom = $_POST['nom']; echo $nom; } ?></p>
</div>

et finalement mon JS :

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
 
 
$(document).ready(function() {
 
//Lorsque vous cliquez sur un lien de la classe poplight et que le href commence par #
$('a.poplight[href^=#]').click(function() {
	var popID = $(this).attr('rel'); //Trouver la pop-up correspondante
	var popURL = $(this).attr('href'); //Retrouver la largeur dans le href
 
	//Récupérer les variables depuis le lien
	var query= popURL.split('?');
	var dim= query[1].split('&');
	var popWidth = dim[0].split('=')[1]; //La première valeur du lien
 
	//Faire apparaitre la pop-up et ajouter le bouton de fermeture
	$('#' + popID).fadeIn().css({
		'width': Number(popWidth)
	})
	.prepend('');
 
	//Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
	var popMargTop = ($('#' + popID).height() + 80) / 2;
	var popMargLeft = ($('#' + popID).width() + 80) / 2;
 
	//On affecte le margin
	$('#' + popID).css({
		'margin-top' : -popMargTop,
		'margin-left' : -popMargLeft
	});
 
	//Effet fade-in du fond opaque
	$('body').append(''); //Ajout du fond opaque noir
	//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
	$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
 
	return false;
});
 
//Fermeture de la pop-up et du fond
$('a.close, #fade').live('click', function() { //Au clic sur le bouton ou sur le calque...
	$('#fade , .popup_block').fadeOut(function() {
		$('#fade, a.close').remove();  //...ils disparaissent ensemble
	});
	return false;
});	
 
});
});

Si quelqu'un a une idée

Merci !!!

[devyan]

Salut,

pour plus d'info, voici mon formulaire:

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
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script  type="text/javascript" src="js/forms.js"></script>
<link rel="stylesheet" type="text/css" href="test.css" />
<script type="text/javascript" src="script.js"></script>
<form method = "POST" name="form1" action=""> 
 
<input type="text" name="nom"/> <br>
 
<a href="#?w=500" rel="popup_name" class="poplight" "javascript:document.forms['form1'].nom;document.forms['form1'].submit();">submit</a><br>
</form>
 
<?php
include 'pop.php'; // le contenu de mon popup
?>

Il manque un nom d'attribut dans ton formulaire (entre "poplight" et "javascript...")

devyan

[elpatriota]

Merci yan,

J'ai essayé mais ça ne marche pas, pas de variable dans mon popup. En fait, je crois que c'est un problème de jQuery, il sélectionne directement la fonction qui va afficher le popup après avoir cliqué sur le lien "test" sans effectuer le submit(). A mon avis il faut lui rajouter une condition qui va permettre de valider et d'afficher le popup après, mais je ne sais pas comment.

[elpatriota]

pas possible d'envoyer même une variable GET genre ( #?w=500?id=1) vers se popup ?
je galère ! j'ai cherché partout sans succès

[danielhagnoul]

@devyan pense certainement à onclick=""

Code :

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

<a href="#?w=500" rel="popup_name" class="poplight" onclick="javascript:document.forms['form1'].nom;document.forms['form1'].submit();">submit</a>

[elpatriota]

merci daniel,

ça ne marche toujours pas, j'arrive a récupérer ma variable mais dans une autre page pas sur le popup, ce dernier ne s'ouvre plus il faut enlever le onclick pour que ça remarche, impossible de récupérer ma variable dans le popup modale