So, I am making a login form and I have already implemented the fetch API

const form = {
    email: document.querySelector("#signin-email"),
    password: document.querySelector("#signin-password"),
    submit: document.querySelector("#signin-btn-submit"),
    messages:document.getElementById("form-messages")
};
let button = form.submit.addEventListener("click", (e)=> {
    e.preventDefault();
    const login = '';

    fetch(login, {
          method: "POST",
          headers: {
            Accept: "application/json, text/plain, */*",
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            email: form.email.value,
            password: form.password.value,
          }),
        })
          .then((response) => response.json())
          .then((data) => console.log(data))
          .catch((err) => {
            console.log(err);
           });
    
    
});

So, I am making a login form and I have already implemented the fetch API

const form = {
    email: document.querySelector("#signin-email"),
    password: document.querySelector("#signin-password"),
    submit: document.querySelector("#signin-btn-submit"),
    messages:document.getElementById("form-messages")
};
let button = form.submit.addEventListener("click", (e)=> {
    e.preventDefault();
    const login = 'https://ffcc-app.herokuapp./user/login';

    fetch(login, {
          method: "POST",
          headers: {
            Accept: "application/json, text/plain, */*",
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            email: form.email.value,
            password: form.password.value,
          }),
        })
          .then((response) => response.json())
          .then((data) => console.log(data))
          .catch((err) => {
            console.log(err);
           });
    
    
});

I am also getting the desired output:

The problem is I have to redirect to the main page when 'login successful' else I have to display a message saying 'user does not exist'. how should I do that? What else should I add to my code?

• javascript
• ajax
• fetch-api

Share Improve this question Follow edited Jul 15, 2021 at 9:46 Ajay2707 5,80866 gold badges4343 silver badges5959 bronze badges asked Jul 15, 2021 at 6:45 Sidharth MishraSidharth Mishra 1511 gold badge22 silver badges44 bronze badges 3

• You can redirect in JS using window.location = '/some/path'. – Lekhnath Commented Jul 15, 2021 at 6:47
• You can display error messages from catch block. form.messages.innerHTML = err.message – Lekhnath Commented Jul 15, 2021 at 6:49
• Yes, i want to redirect but only when correct username and password is entered. Else i want to stay on the same page. So how should i write that if condition? – Sidharth Mishra Commented Jul 15, 2021 at 6:57

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

const form = {
  email: document.querySelector("#signin-email"),
  password: document.querySelector("#signin-password"),
  submit: document.querySelector("#signin-btn-submit"),
  messages: document.getElementById("form-messages"),
};
let button = form.submit.addEventListener("click", (e) => {
  e.preventDefault();
  const login = "https://ffcc-app.herokuapp./user/login";

  fetch(login, {
    method: "POST",
    headers: {
      Accept: "application/json, text/plain, */*",
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      email: form.email.value,
      password: form.password.value,
    }),
  })
    .then((response) => response.json())
    .then((data) => {
      console.log(data);
      // code here //
      if (data.error) {
        alert("Error Password or Username"); /*displays error message*/
      } else {
        window.open(
          "target.html"
        ); /*opens the target page while Id & password matches*/
      }
    })
    .catch((err) => {
      console.log(err);
    });
});

login sucess and error handled by data.error as mentioned in your screenshot