Variable POST vers popup modale ?
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:
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:
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:
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 !!!
