Bonsoir à tous,
j'aurais besoin de votre aide, je tente de faire un système de login/inscription en mode popup,
en ce qui concerne mon login cela se passe bien mais mon formulaire d'inscription ne veut pas partir,
je suis partie de 2 script différents que je tente d'adapter à mon envie, je pense que c'est la que sa veut plus.
quand j'appuie sur le bouton pour valider mon formulaire d'inscription, rien ne se passe, comme si il n’était pas détecter.
Pouvez-vous m'aider ?
j'ai donc la présentation suivante pour les popup contenants mes formulaires
<div id="connexion_form">
<h3>Connexion</h3>
<h1>Restez scotché...</h1>
<div class="err" id="add_err"></div>
<form id="login_form" method="post" onsubmit="return false;">
<p>
<label for="login">Pseudo:</label>
<input type="text" placeholder="Entrez votre pseudo" id="user_name" name="user_name" required/>
<label for="mdp">Mot de passe:</label>
<input type="password" id="password" name="password" required/>
<label for="cnx_persistent">
<input type="checkbox" id="cnx_persistent" style="vertical-align: top;"/> Garder ma session active
</label>
<input type="submit" id="login" class="btn btn-primary" value="Connexion" />
<input type="button" id="cancel_hide" value="Cancel" />
</p>
<div id="status2">
Remplir tous les champs
</div>
</form>
<div id="newlogin">
<p><a id="inscription_a" href="#">Pour vous inscrire c'est ici</a></p>
<p><a id="oublie_a" href="#">Mot de passe oublié ?</a></p>
</div>
</div>
<div id="inscription_form">
<h1>Testez !</h1>
<h3>Je m'incris</h3>
<form id="register_form" >
<p>
<label for="pseudo">Pseudo:</label>
<input type="text" placeholder="Entrez votre pseudo" id="pseudo" name="pseudo" maxlength="16" required/>
<small id="output_checkuser"></small>
<label for="pass1">Mot de passe:</label>
<input type="password" id="pass1" name="pass1" required/>
<small id="output_pass1"></small>
<label for="pass2">Confirmer votre mot de passe:</label>
<input type="password" id="pass2" name="pass2" required/>
<small id="output_pass2"></small>
<label for="email">Adresse électronique:</label>
<input type="email" placeholder="[email protected]" id="email" name="email" required/>
<small id="output_email"></small>
<div id="status">
Remplir tous les champs
</div>
<input type="hidden" id="hash" name="hash" value="<?php echo $hash; ?>" />
<input type="submit" id="bRegister" class="btn btn-success" value="Inscription" />
<input type="button" id="cancel_hide2" value="Cancel" />
</p>
</form>
</div>
<div id="oublie_form">
<h3>Me renvoyer un mot de passe</h3>
<div class="err" id="add_err3"></div>
<div class="err" id="add_succes2"></div>
<form action="oublie.php">
<label for="email">Votre adresse email :</label>
<input type="text" id="email" name="email" />
<label></label><br/>
<input type="submit" id="oublie" value="Je suis tete en l'air" />
<input type="button" id="cancel_hide3" value="Cancel" />
</form>
</div>
<div id="shadow" class="popup"></div>
et cela pour ce qui est du script et ajax
<script type="text/javascript">
$(document).ready(function(){
$("#login_a").click(function(){
$("#shadow").fadeIn("normal");
$("#connexion_form").fadeIn("normal");
$("#user_name").focus();
});
$("#cancel_hide").click(function(){
$("#connexion_form").fadeOut("normal");
$("#shadow").fadeOut();
});
$("#login").click(function(){
username=$("#user_name").val();
password=$("#password").val();
$.ajax({
type: "POST",
url: "login.php",
data: "name="+username+"&pwd="+password,
success: function(html){
if(html=='true')
{
$("#connexion_form").fadeOut("normal");
$("#shadow").fadeOut();
$("#profile").html("<div id='connexion2'><nav class='cl-effect-1'><a href='logout.php' id='logout'>Déconnection</a><br /><a href='#'>Mon profil</a><br /><a href='#'>Ajoute ma photo</a></nav></div>");
}
else if(html=='true2')
{
$("#add_err").html("Votre compte n\'est pas actif, consultez le mail envoyé pour l\'activer.");
}
else
{
$("#add_err").html("Mauvais identifiants");
}
},
beforeSend:function()
{
$("#add_err").html("Loading...")
}
});
return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#oublie_a").click(function(){
$("#shadow").fadeIn("normal");
$("#connexion_form").fadeOut("normal");
$("#oublie_form").fadeIn("normal");
$("#email").focus();
});
$("#cancel_hide3").click(function(){
$("#oublie_form").fadeOut("normal");
$("#shadow").fadeOut();
});
$("#oublie").click(function(){
mail=$("#email").val();
$.ajax({
type: "POST",
url: "oublie.php",
data: "email="+mail,
success: function(html){
if(html=='true')
{
$("#add_succes2").html("Un email vous a été envoyé avec vos identifiants");
$('#shadow').delay(5000).fadeOut(200);
$('#oublie_form').delay(5000).fadeOut(200);
}
else
{
$("#add_err3").html("Cette adresse email ne correspond à aucun membre inscrit");
}
},
});
return false;
});
$("#register_form input").focus(function(){
$("#status").fadeOut(800);
});
$("#pseudo").keyup(function(){
//On vérifie si le pseudo est ok ou n'a pas été déjà pris
check_pseudo();
});
$("#pass1").keyup(function(){
//On vérifie si le mot de passe est ok
if($(this).val().length < 6){
$("#output_pass1").css("color", "red").html("<br/>Trop court (6 caractères minimum)");
} else if($("#pass2").val() != "" && $("#pass2").val() != $("#pass1").val()){
$("#output_pass1").html("<br/>Les deux mots de passe sont différents");
$("#output_pass2").html("<br/>Les deux mots de passe sont différents");
} else {
$("#output_pass1").html('<img src="images/form/check.png" class="small_image" alt="" />');
}
});
$("#pass2").keyup(function(){
//On vérifie si les mots de passe coïncident
check_password();
});
$("#email").keyup(function(){
//On vérifie si les mots de passe coïncident
check_email();
});
function check_pseudo(){
$.ajax({
type: "post",
url: "register.php",
data: {
'pseudo_check' : $("#pseudo").val()
},
success: function(data){
if(data == "success"){
$("#output_checkuser").html('<img src="images/form/check.png" class="small_image" alt="" />');
return true;
} else {
$("#output_checkuser").css("color", "red").html(data);
}
}
});
}
function check_password(){
$.ajax({
type: "post",
url: "register.php",
data: {
'pass1_check' : $("#pass1").val(),
'pass2_check' : $("#pass2").val()
},
success: function(data){
if(data == "success"){
$("#output_pass2").html('<img src="images/form/check.png" class="small_image" alt="" />');
$("#output_pass1").html('<img src="images/form/check.png" class="small_image" alt="" />');
} else {
$("#output_pass2").css("color", "red").html(data);
}
}
});
}
function check_email(){
$.ajax({
type: "post",
url: "register.php",
data: {
'email_check' : $("#email").val()
},
success: function(data){
if(data == "success"){
$("#output_email").html('<img src="images/form/check.png" class="small_image" alt="" />');
} else {
$("#output_email").css("color", "red").html(data);
}
}
});
}
$(document).ready(function(){
$("#inscription_a").click(function(){
$("#shadow").fadeIn("normal");
$("#connexion_form").fadeOut("normal");
$("#inscription_form").fadeIn("normal");
$("#user_name").focus();
});
});
//Traitement du formulaire d'inscription
$("#register_form").submit(function(){
var status = $("#status");
var pseudo = $("#pseudo").val();
var pass1 = $("#pass1").val();
var pass2 = $("#pass2").val();
var email = $("#email").val();
if(nom == "" || prenom == "" || pseudo == "" || pass1 == "" || pass2 == "" || email == "" ){
status.html("Veuillez remplir tous les champs").fadeIn(400);
} else if(pass1 != pass2) {
status.html("Les deux mots de passe sont différents").fadeIn(400);
} else {
$.ajax({
type: "post",
url: "register.php",
data: {
'pseudo' : pseudo,
'pass1' : pass1,
'pass2' : pass2,
'email' : email,
},
beforeSend: function(){
$("#bRegister").attr("value", "Traitement en cours...");
},
success: function(data){
if(data != "register_success"){
status.html(data).fadeIn(400);
$("#bRegister").attr("value", "Inscription");
$("#bRegister").addClass("btn-primary").css("color", "white");
} else {
$("#inscription_form").fadeOut();
$("#inscription_form2").html("<strong>Juste une dernière étape " + prenom + " " + nom + " !</strong><br/>Un lien d'activation de votre compte vient de vous être envoyé à l'adresse électronique indiquée lors de l'inscription.<br/>Veuillez tout simplement cliquer ce lien et vous serez définitivement membre du <strong>My PhotoBoothK</strong>.<br/><em>(Pensez à vérifier vos spams ou courriers indésirables, si vous ne voyez pas ce mail dans votre boîte de réception)</em><br/><br/>Une fois que ceci est fait, vous n'aurez plus qu'à vous connecter!<br/>Alors, on se dit à très bientôt ;) !").css("width", "inherit").fadeIn(400);
}
}
});
}
});
});
</script>
Bonsoir à tous,
j'aurais besoin de votre aide, je tente de faire un système de login/inscription en mode popup,
en ce qui concerne mon login cela se passe bien mais mon formulaire d'inscription ne veut pas partir,
je suis partie de 2 script différents que je tente d'adapter à mon envie, je pense que c'est la que sa veut plus.
quand j'appuie sur le bouton pour valider mon formulaire d'inscription, rien ne se passe, comme si il n’était pas détecter.
Pouvez-vous m'aider ?
j'ai donc la présentation suivante pour les popup contenants mes formulaires
[html]<div id="connexion_form">
<h3>Connexion</h3>
<h1>Restez scotché...</h1>
<div class="err" id="add_err"></div>
<form id="login_form" method="post" onsubmit="return false;">
<p>
<label for="login">Pseudo:</label>
<input type="text" placeholder="Entrez votre pseudo" id="user_name" name="user_name" required/>
<label for="mdp">Mot de passe:</label>
<input type="password" id="password" name="password" required/>
<label for="cnx_persistent">
<input type="checkbox" id="cnx_persistent" style="vertical-align: top;"/> Garder ma session active
</label>
<input type="submit" id="login" class="btn btn-primary" value="Connexion" />
<input type="button" id="cancel_hide" value="Cancel" />
</p>
<div id="status2">
Remplir tous les champs
</div>
</form>
<div id="newlogin">
<p><a id="inscription_a" href="#">Pour vous inscrire c'est ici</a></p>
<p><a id="oublie_a" href="#">Mot de passe oublié ?</a></p>
</div>
</div>
<div id="inscription_form">
<h1>Testez !</h1>
<h3>Je m'incris</h3>
<form id="register_form" >
<p>
<label for="pseudo">Pseudo:</label>
<input type="text" placeholder="Entrez votre pseudo" id="pseudo" name="pseudo" maxlength="16" required/>
<small id="output_checkuser"></small>
<label for="pass1">Mot de passe:</label>
<input type="password" id="pass1" name="pass1" required/>
<small id="output_pass1"></small>
<label for="pass2">Confirmer votre mot de passe:</label>
<input type="password" id="pass2" name="pass2" required/>
<small id="output_pass2"></small>
<label for="email">Adresse électronique:</label>
<input type="email" placeholder="
[email protected]" id="email" name="email" required/>
<small id="output_email"></small>
<div id="status">
Remplir tous les champs
</div>
<input type="hidden" id="hash" name="hash" value="<?php echo $hash; ?>" />
<input type="submit" id="bRegister" class="btn btn-success" value="Inscription" />
<input type="button" id="cancel_hide2" value="Cancel" />
</p>
</form>
</div>
<div id="oublie_form">
<h3>Me renvoyer un mot de passe</h3>
<div class="err" id="add_err3"></div>
<div class="err" id="add_succes2"></div>
<form action="oublie.php">
<label for="email">Votre adresse email :</label>
<input type="text" id="email" name="email" />
<label></label><br/>
<input type="submit" id="oublie" value="Je suis tete en l'air" />
<input type="button" id="cancel_hide3" value="Cancel" />
</form>
</div>
<div id="shadow" class="popup"></div>[/html]
et cela pour ce qui est du script et ajax
[html]<script type="text/javascript">
$(document).ready(function(){
$("#login_a").click(function(){
$("#shadow").fadeIn("normal");
$("#connexion_form").fadeIn("normal");
$("#user_name").focus();
});
$("#cancel_hide").click(function(){
$("#connexion_form").fadeOut("normal");
$("#shadow").fadeOut();
});
$("#login").click(function(){
username=$("#user_name").val();
password=$("#password").val();
$.ajax({
type: "POST",
url: "login.php",
data: "name="+username+"&pwd="+password,
success: function(html){
if(html=='true')
{
$("#connexion_form").fadeOut("normal");
$("#shadow").fadeOut();
$("#profile").html("<div id='connexion2'><nav class='cl-effect-1'><a href='logout.php' id='logout'>Déconnection</a><br /><a href='#'>Mon profil</a><br /><a href='#'>Ajoute ma photo</a></nav></div>");
}
else if(html=='true2')
{
$("#add_err").html("Votre compte n\'est pas actif, consultez le mail envoyé pour l\'activer.");
}
else
{
$("#add_err").html("Mauvais identifiants");
}
},
beforeSend:function()
{
$("#add_err").html("Loading...")
}
});
return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#oublie_a").click(function(){
$("#shadow").fadeIn("normal");
$("#connexion_form").fadeOut("normal");
$("#oublie_form").fadeIn("normal");
$("#email").focus();
});
$("#cancel_hide3").click(function(){
$("#oublie_form").fadeOut("normal");
$("#shadow").fadeOut();
});
$("#oublie").click(function(){
mail=$("#email").val();
$.ajax({
type: "POST",
url: "oublie.php",
data: "email="+mail,
success: function(html){
if(html=='true')
{
$("#add_succes2").html("Un email vous a été envoyé avec vos identifiants");
$('#shadow').delay(5000).fadeOut(200);
$('#oublie_form').delay(5000).fadeOut(200);
}
else
{
$("#add_err3").html("Cette adresse email ne correspond à aucun membre inscrit");
}
},
});
return false;
});
$("#register_form input").focus(function(){
$("#status").fadeOut(800);
});
$("#pseudo").keyup(function(){
//On vérifie si le pseudo est ok ou n'a pas été déjà pris
check_pseudo();
});
$("#pass1").keyup(function(){
//On vérifie si le mot de passe est ok
if($(this).val().length < 6){
$("#output_pass1").css("color", "red").html("<br/>Trop court (6 caractères minimum)");
} else if($("#pass2").val() != "" && $("#pass2").val() != $("#pass1").val()){
$("#output_pass1").html("<br/>Les deux mots de passe sont différents");
$("#output_pass2").html("<br/>Les deux mots de passe sont différents");
} else {
$("#output_pass1").html('<img src="images/form/check.png" class="small_image" alt="" />');
}
});
$("#pass2").keyup(function(){
//On vérifie si les mots de passe coïncident
check_password();
});
$("#email").keyup(function(){
//On vérifie si les mots de passe coïncident
check_email();
});
function check_pseudo(){
$.ajax({
type: "post",
url: "register.php",
data: {
'pseudo_check' : $("#pseudo").val()
},
success: function(data){
if(data == "success"){
$("#output_checkuser").html('<img src="images/form/check.png" class="small_image" alt="" />');
return true;
} else {
$("#output_checkuser").css("color", "red").html(data);
}
}
});
}
function check_password(){
$.ajax({
type: "post",
url: "register.php",
data: {
'pass1_check' : $("#pass1").val(),
'pass2_check' : $("#pass2").val()
},
success: function(data){
if(data == "success"){
$("#output_pass2").html('<img src="images/form/check.png" class="small_image" alt="" />');
$("#output_pass1").html('<img src="images/form/check.png" class="small_image" alt="" />');
} else {
$("#output_pass2").css("color", "red").html(data);
}
}
});
}
function check_email(){
$.ajax({
type: "post",
url: "register.php",
data: {
'email_check' : $("#email").val()
},
success: function(data){
if(data == "success"){
$("#output_email").html('<img src="images/form/check.png" class="small_image" alt="" />');
} else {
$("#output_email").css("color", "red").html(data);
}
}
});
}
$(document).ready(function(){
$("#inscription_a").click(function(){
$("#shadow").fadeIn("normal");
$("#connexion_form").fadeOut("normal");
$("#inscription_form").fadeIn("normal");
$("#user_name").focus();
});
});
//Traitement du formulaire d'inscription
$("#register_form").submit(function(){
var status = $("#status");
var pseudo = $("#pseudo").val();
var pass1 = $("#pass1").val();
var pass2 = $("#pass2").val();
var email = $("#email").val();
if(nom == "" || prenom == "" || pseudo == "" || pass1 == "" || pass2 == "" || email == "" ){
status.html("Veuillez remplir tous les champs").fadeIn(400);
} else if(pass1 != pass2) {
status.html("Les deux mots de passe sont différents").fadeIn(400);
} else {
$.ajax({
type: "post",
url: "register.php",
data: {
'pseudo' : pseudo,
'pass1' : pass1,
'pass2' : pass2,
'email' : email,
},
beforeSend: function(){
$("#bRegister").attr("value", "Traitement en cours...");
},
success: function(data){
if(data != "register_success"){
status.html(data).fadeIn(400);
$("#bRegister").attr("value", "Inscription");
$("#bRegister").addClass("btn-primary").css("color", "white");
} else {
$("#inscription_form").fadeOut();
$("#inscription_form2").html("<strong>Juste une dernière étape " + prenom + " " + nom + " !</strong><br/>Un lien d'activation de votre compte vient de vous être envoyé à l'adresse électronique indiquée lors de l'inscription.<br/>Veuillez tout simplement cliquer ce lien et vous serez définitivement membre du <strong>My PhotoBoothK</strong>.<br/><em>(Pensez à vérifier vos spams ou courriers indésirables, si vous ne voyez pas ce mail dans votre boîte de réception)</em><br/><br/>Une fois que ceci est fait, vous n'aurez plus qu'à vous connecter!<br/>Alors, on se dit à très bientôt ;) !").css("width", "inherit").fadeIn(400);
}
}
});
}
});
});
</script>[/html]
