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 38286 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 14 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:

Remplacer un bloc par un autre avec la méthode load d'ajax
Word remplacer un mot par un autre - Guide
Remplacer disque dur par ssd - Guide
Bloc note windows - Télécharger - Traitement de texte
Quel site pour remplacer coco - Accueil - Réseaux sociaux
Couldn't load xpcom ✓ - Forum Mozilla Firefox

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38286 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 14 novembre 2024 4 698
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 38286 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 14 novembre 2024 4 698
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

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

Coudn't load XPCOM.

Méssage Firefox ''Couldn't load XPCOM''

Réglage bios après "load optimized default"

Firefox ne marche plus : couldn't load XPCOM