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

Fermé

ameb2908 Messages postés 81 Date d'inscription jeudi 17 mars 2022 Statut Membre Dernière intervention 13 avril 2024 - 12 janv. 2023 à 18:53
jordane45 Messages postés 38150 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 29 avril 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:

Remplacer un bloc par un autre avec la méthode load d'ajax
Remplacer un mot par un autre word - Guide
Remplacer disque dur par ssd - Guide
Remplacer un visage sur une photo - Guide
Firefox couldn't load xpcom - Astuces et Solutions
Bloc note gratuit - Télécharger - Agendas & Calendriers

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38150 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 29 avril 2024 4 651
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. ...

jordane45 Messages postés 38150 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 29 avril 2024 4 651
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 );
  }
});

Discussions similaires

nom de metier

Remplacer espace par retour ligne sur txt ???

J'ai le message "coudn't load XPCOM."

Coudn't load XPCOM.

Remplacement du zero par une cellule vide !?

Discussions similaires

Newsletters