Bonjour à toutes et à tous,
Voila je rencontre un petit problème avec mon code.
Je vais essayer de vous expliquer clairement...
Une page contient une liste de produits.
<?php
echo "<p align='left'><label for='modalCheckCoeur'><a href='#?w=400&a=1' rel='popup_Coeur' class='poplightCoeur' ><img src='../img/c.png' width='30'></a></label> </p>";
echo"<br/>";
echo "<p align='left'><label for='modalCheckCoeur'><a href='#?w=400&a=2' rel='popup_Coeur' class='poplightCoeur' ><img src='../img/c.png' width='30'></a></label> </p>";
echo"<br/>";
echo "<p align='left'><label for='modalCheckCoeur'><a href='#?w=400&a=3' rel='popup_Coeur' class='poplightCoeur' ><img src='../img/c.png' width='30'></a></label> </p>";
?>
Lorsqu'on clique sur un de ces produits, une fenetre apparait et propose d'entrer un identifiant et un mot de passe pour sauvegarder un produit dans une table
fenêtre qui apparait :
<div id="popup_Coeur" class="popup_blockCoeur" >
<div id="infoCoeur" style="width:390; height:600" >
<form method="post" action="#" enctype="multipart/form-data">
<font face="verdana" color="#000087" >Votre courriel : </font>
<br/>
<input type="email" class="email" name="emailConnect" id="emailConnect" style="width:285px"/>
<br/>
<font face="verdana" color="#000087" >Votre mot de passe :</font>
<br/>
<input type="password" name="pd1" id="pd111" value="" size="27" maxlength="50" />
<br/>
<input type="submit" class="bouton_6" value="Sauvegarder le coeur" name="upload3" id="upload3"/><span class="error-message-avant-envois" style="display: none;"><font face="verdana" size="1">Oups !</font></span>
</form>
</div>
</div>
Cette fenêtre est ouverte lorsqu'on clique sur un lien qui correspond au produit avec ce code :
<script >
//Lorsque on clique sur un lien de la classe poplight et que le href commence par #
$('a.poplightCoeur[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
numeroannonce = dim[0].split('=')[2]; //recup numéro annonce
//Faire apparaitre la pop-up et ajouter le bouton de fermeture
$('#' + popID).fadeIn().css({
'width': Number(popWidth)
})
.prepend('<a href="#" class="close"><img src="../img/croix.png" class="btn_closeCoeur" title="Fermer" alt="Fermer" height="20" width="20"/></a>');
//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('<div id="fadeCoeur"></div>'); //Ajout du fond opaque noir
//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
$('#fadeCoeur').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
return false;
});
//Fermeture de la pop-up et du fond
$('a.close, #fadeCoeur').live('click', function() { //Au clic sur le bouton ou sur le calque...
$('#fadeCoeur , .popup_blockCoeur').fadeOut(function() {
$('#fadeCoeur, a.close').remove(); //...ils disparaissent ensemble
});
return false;
});
1er problème :
comment envoyer la variable qui contient le numero de produit
numeroannonce = dim[0].split('=')[2]; //recup numéro annonce
à php ?
2e probleme :
Je ne dois pas changer de page
<form method="post" action="#" enctype="multipart/form-data">
en pourtant il faudrais envoyer le mail / login, le mot de passe, et le numero de produit à une page qui s'appelle addcoeur avec ceci :
<script type="text/javascript">
$(function(){
$("#formcoupcoeur").submit(function(){
EmailDeConnection = $(this).find("input[name=emailConnect]").val();
MdpDeConnection = $(this).find("input[name=pd1]").val();
$.post("../php/addcoeur.php",{emailConnect: emailConnect, pd1: pd1, numeroannonce },function(data){
alert (data);
});
return false;
});
});
</script>
et voila tout le code en entier pour mieux se repérer...
<html>
<head>
<meta http-equiv="Content-Language" content="fr">
<meta http-equiv="Content-Type" content="text/html;">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../css/css.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="../css/Aristo/Aristo.css" />
<title>TEST</title>
<script type="text/javascript">
$(function(){
$("#formcoupcoeur").submit(function(){
EmailDeConnection = $(this).find("input[name=emailConnect]").val();
MdpDeConnection = $(this).find("input[name=pd1]").val();
$.post("../php/addcoeur.php",{emailConnect: emailConnect, pd1: pd1, numeroannonce },function(data){
alert (data);
});
return false;
});
});
</script>
</head>
<body bgcolor="#F7F7F7">
<?php
echo "<p align='left'><label for='modalCheckCoeur'><a href='#?w=400&a=1' rel='popup_Coeur' class='poplightCoeur' ><img src='../img/c.png' width='30'></a></label> </p>";
echo"<br/>";
echo "<p align='left'><label for='modalCheckCoeur'><a href='#?w=400&a=2' rel='popup_Coeur' class='poplightCoeur' ><img src='../img/c.png' width='30'></a></label> </p>";
echo"<br/>";
echo "<p align='left'><label for='modalCheckCoeur'><a href='#?w=400&a=3' rel='popup_Coeur' class='poplightCoeur' ><img src='../img/c.png' width='30'></a></label> </p>";
?>
<div id="popup_Coeur" class="popup_blockCoeur" >
<div id="infoCoeur" style="width:390; height:600" >
<form method="post" action="#" enctype="multipart/form-data">
<font face="verdana" color="#000087" >Votre courriel : </font>
<br/>
<input type="email" class="email" name="emailConnect" id="emailConnect" style="width:285px"/>
<br/>
<font face="verdana" color="#000087" >Votre mot de passe :</font>
<br/>
<input type="password" name="pd1" id="pd111" value="" size="27" maxlength="50" />
<br/>
<input type="submit" class="bouton_6" value="Sauvegarder le coeur" name="upload3" id="upload3"/><span class="error-message-avant-envois" style="display: none;"><font face="verdana" size="1">Oups !</font></span>
</form>
</div>
</div>
</body>
<script >
//Lorsque on clique sur un lien de la classe poplight et que le href commence par #
$('a.poplightCoeur[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
numeroannonce = dim[0].split('=')[2]; //recup numéro annonce
//Faire apparaitre la pop-up et ajouter le bouton de fermeture
$('#' + popID).fadeIn().css({
'width': Number(popWidth)
})
.prepend('<a href="#" class="close"><img src="../img/croix.png" class="btn_closeCoeur" title="Fermer" alt="Fermer" height="20" width="20"/></a>');
//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('<div id="fadeCoeur"></div>'); //Ajout du fond opaque noir
//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
$('#fadeCoeur').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
return false;
});
//Fermeture de la pop-up et du fond
$('a.close, #fadeCoeur').live('click', function() { //Au clic sur le bouton ou sur le calque...
$('#fadeCoeur , .popup_blockCoeur').fadeOut(function() {
$('#fadeCoeur, a.close').remove(); //...ils disparaissent ensemble
});
return false;
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</html>
J'ai vraiment essayé plein de truc mais je m'y connais pas assez hélas
Merci pour votre aide