Remplacer un bloc par un autre avec la méthode load d'ajax
ameb2908
Messages postés
93
Date d'inscription
Statut
Membre
Dernière intervention
-
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
Bonjour, je voudrais remplacer le formulaire de connexion par celui d'inscription au clic sur le bouton s'inscrire
mais cela ne fonctionne pas.
loginCnx.php
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulaire de connexion & d'inscription</title>
<script src="https://use.fontawesome.com/d974f43f44.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrapper">
<main id="box">
<form id="signup" name="signupForm" action="" method="post">
<fieldset>
<legend><i class="fa fa-globe fa-4x" aria-hidden="true"></i></legend>
<h1>Se connecter</h1>
<p class="para"><label for="pseudo">Pseudo</label></p>
<p class="para para2">
<input type="text" id="pseudo" class="input" name="pseudoForm">
<label for="pseudo"><i class="fa fa-user fa-2x" aria-hidden="true"></i></label>
<span id="iconPseudo"></span>
</p>
<div id="errorPseudo"></div>
<p class="para"><label for="username">Email</label></p>
<p class="para para2">
<input type="email" id="username" class="input" name="usernameForm">
<label for="username"><i class="fa fa-envelope fa-2x" aria-hidden="true"></i></label>
<span id="iconEmail"></span>
</p>
<div id="errorEmail"></div>
<p class="para"><label for="userpass">Password</label></p>
<p class="para para2">
<input type="password" id="userpass" class="input" name="userpassForm">
<label for="userpass"><i class="fa fa-key fa-2x" aria-hidden="true"></i></label>
<span id="iconPass"></span>
</p>
<div id="errorPass"></div>
<input type="submit" name="submitForm" class="input" value="Se connecter">
<p id="register">Pas encore inscrit :</p><button id="bt">S'inscrire</button>
</fieldset>
</form>
</main>
</div>
<script src="js/jquery-3.6.3.js"></script>
<script src="js/process-auth-user.js"></script>
</body>
</html>
signupCnx.html
<form id="signup" name="signupForm" action="" method="post">
<fieldset>
<legend><i class="fa fa-globe fa-4x" aria-hidden="true"></i></legend>
<h1>Créer votre compte</h1>
<p class="para"><label for="pseudo">Pseudo</label></p>
<p class="para para2">
<input type="text" id="pseudo" class="input" name="pseudoForm">
<label for="pseudo"><i class="fa fa-user fa-2x" aria-hidden="true"></i></label>
<span id="iconPseudo"></span>
</p>
<div id="errorPseudo"></div>
<p class="para"><label for="username">Email</label></p>
<p class="para para2">
<input type="email" id="username" class="input" name="usernameForm">
<label for="username"><i class="fa fa-envelope fa-2x" aria-hidden="true"></i></label>
<span id="iconEmail"></span>
</p>
<div id="errorEmail"></div>
<p class="para"><label for="userpass">Password</label></p>
<p class="para para2">
<input type="password" id="userpass" class="input" name="userpassForm">
<label for="userpass"><i class="fa fa-key fa-2x" aria-hidden="true"></i></label>
<span id="iconPass"></span>
</p>
<div id="errorPass"></div>
<p class="para"><label for="userpass2">retype password</label></p>
<p class="para para2">
<input type="password" id="userpass2" class="input" name="userpass2Form">
<label for="userpass2"><i class="fa fa-key fa-2x" aria-hidden="true"></i></label>
<span id="iconPass2"></span>
</p>
<div id="errorPass2"></div>
<input type="submit" name="submitForm" class="input" value="S'inscrire">
<p id="connect">Déja inscrit :</p><button>Se connecter</button>
</fieldset>
</form>
js/process-auth-user.js
$(document).ready(function() {
$('#bt').click(function() {
$('#box').load('../signupCnx.php #signup', function() {
alert('Voici le formulaire d\'inscription');
});
});
});
Merci pour votre aide.
Windows / Chrome 109.0.0.0
A voir également:
- Remplacer un bloc par un autre avec la méthode load d'ajax
- Remplacer disque dur par ssd - Guide
- Remplacer un mot par un autre word - Guide
- Bloc-notes (windows) - Télécharger - Traitement de texte
- Quel site pour remplacer coco - Accueil - Réseaux sociaux
- Fermeture de Coco : les internautes à la recherche d'un remplaçant - Accueil - Réseaux sociaux
Hésites pas non plus à mettre une gestion d'erreur pour ton $load
$( "#success" ).load( "/signupCnx.html", function( response, status, xhr ) { if ( status == "error" ) { alert( xhr.status + " " + xhr.statusText ); } });