Remplacer un bloc par un autre avec la méthode load d'ajax

Fermé
ameb2908 Messages postés 87 Date d'inscription jeudi 17 mars 2022 Statut Membre Dernière intervention 14 novembre 2024 - 12 janv. 2023 à 18:53
jordane45 Messages postés 38305 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 novembre 2024 - 13 janv. 2023 à 08:55

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 &amp; 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:

1 réponse

jordane45 Messages postés 38305 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 novembre 2024 4 705
Modifié le 13 janv. 2023 à 06:46

Bonjour

Deja, tu cherches a loader le fichier 

signupCnx.php alors que tu nous dis que ton fichier se nomme signupCnx.html. ...


0
jordane45 Messages postés 38305 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 novembre 2024 4 705
13 janv. 2023 à 08:55

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 );
  }
});
0