Javascript :Connect to login form with an API doesn't run

[mjandia]

I use javascript to connect to a login. I put console.log on the password and the email and apparently it recovers the password well but not the email and I don’t see where the problem comes from. I checked my email Id in the HTML and javascript code and nothing. Can you help me ? And tell me what’s wrong with my code. Thank you and good day

I changed getElementById by querySelector but nothing. My email Id is well written however everywhere. Here is the HTML

<form class="form" action="#" method="post">
                        <h3>Log In</h3>
                        <div class="input">
                            <label for="email">Email</label>
                            <input type="email" placeholder="Email" id="email">
                            <label for="password">Mot de passe</label>
                            <input type="password" placeholder="Mot de passe" id="password">
                            <input type="submit" value="Se connecter" id="submit">
                            <p id="errorMessage"></p>
                            <a class="link" href="#" >Mot de passe oublié</a>
                            <p id="erreur"></p>
                        </div>
                    </form>

Here is the javascript code

const submit = document.getElementById("submit");
 const errorMessage = document.getElementById("errorMessage");
 submit.addEventListener("click", (e) => {
    e.preventDefault();
    const email = document.querySelector("#email").value;
    const password = document.querySelector("#password").value;
    console.log("email: ", email);
    console.log("password: ", password);
    if (!email || !password) {
        document.getElementById("errorMessage").innerHTML = "Veuillez remplir tous les champs";
        return;
    }
    fetch("http://localhost:5678/api/users/login", {
            method: "POST",
            headers: {
                accept: "application/json",
                "Content-type": "application/json",
            },
            body: JSON.stringify({email: email, password: password}),
        })
        .then(authResponse => {
            console.log("authResponse: ", authResponse);
            if (authResponse.status === 200) {
                return authResponse.json();
            }
            else if (authResponse.status === 401) {
            errorMessage.textcontent = "Accès non autrorisé";
            }
            else if (authResponse.status === 404) {
            errorMessage.textcontent = "Utilisateur non trouvé";
            } else {
            errorMessage.textcontent = `Error: ${authResponse.status}`;
            }
            })
            .then(userData => {
                console.log("userData: ", userData);
                if (userData) {
                window.localStorage.setItem("userData", JSON.stringify(userData));
                window.location.replace = "admin.html";
            }
            })
            .catch(error => console.error(error));
        });

and the screeenshot of the console

[lasjorg]

It logs both the values for me.

I think we may need a bit more context and the rest of your code. If you can put it on GitHub or at least create a Codepen that shows the problem that would be helpful.

[mjandia]

Here is the github link : https://github.com/mjandia/Portfolio-architecte-sophie-bluel

[lasjorg]

You are using the email id twice on the same page. The id has to be unique.

Any DOM querying for the id will find the first instance of it and use that id. It will not look for a second element with the same id.

It will find this id

<form action="#" method="post">
	<label for="name">Nom</label>
	<input type="text" name="name" id="name">
	<label for="email">Email</label>
	<input type="email" name="email" id="email">
	<label for="message">Message</label>
	<textarea name="message" id="message" cols="30" rows="10"></textarea>
	<input type="submit" value="Envoyer">
</form>

And ignore this id

<form class="form" action="#" method="post" id="connect">
	<h3>Log In</h3>
	<div class="input">
		<label for="email">Email</label>
		<input type="email" placeholder="Email" id="email">
		<label for="password">Mot de passe</label>
		<input type="password" placeholder="Mot de passe" id="mdp">
		<input type="submit" value="Se connecter" id="submit">
		<a class="link" href="#" >Mot de passe oublié</a>
		<p id="body"></p>
		<p id="erreur"></p>
	</div>
</form>

I didn’t really look too much at it beyond that.

[mjandia]

it doesn’t work . thanks for your help

[lasjorg]

What doesn’t work?

Please explain what you did and update your code to reflect the changes.

---

To be clear. You can not have two forms with elements inside it using the same id value of email.

This selector…

document.querySelector('#email')

…will find the first element on the page with that id and will ignore all other elements with the same id.

[mjandia]

Sorry i’m a beginner. I solve the problem by adding in HTML id="email2" with my first code and adding email2 here : const email = document.querySelector("#email2").value;
Now it runs

[lasjorg]

No need to apologize. Good to hear you got it fixed.

You might want to use a more descriptive name, like email-reset or whatever you think is appropriate.

[mjandia]

thank you for the advice. Have a nice day