CODEWITHSUNDEEP
javascriptnode.jselectronejs
Arthur Isnt original
Arthur Isnt original

Reputation: 125

HTML input element returns blank spaces in EJS with electron

I was working on a project and ran into this problem.

I have a simple electron project with EJSE, and am loading in the main file like this.

mainWindow.loadURL("file://" + __dirname + "/public/app/index.ejs");

My index.ejs file is also very simple.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./assets/style.css" />
  </head>
  <body>
    <%- include ("./frame") %> <%- include ("./login") %>
    <script src="assets/scripts/buttonSscripts.js"></script>
    <script src="./assets/scripts/login.js"></script>
  </body>
</html>

Now, im trying to use fetch to send an API request, but it always says that the password and username is null,and when i try to console.log() their value, i just get spaces back. No text that was in the input element whatsoever.

My login.ejs file:

<div class="login-container">
  <div class="login-form">
    <div class="img-wrapper" style="text-align: center">
      <img
        src="./assets/asd.png"
        alt=""
        height="220"
        width="180
        "
      />
      <h1>Login in</h1>
    </div>
    <form>
      <input type="text" id="email" name="email" />
      <input type="text" id="password" name="password" />
      <button type="button" id="submitbtn">Submit</button>
    </form>

    <script src="./assets/scripts/login.js"></script>
  </div>
</div>

My login.js file:


const $ = require("jquery");

const loginbtn = document.getElementById("submitbtn");
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;

loginbtn.addEventListener("click", (e) => {
  console.log(email);
  fetch("http://localhost:8080/api/v1/auth/login/email", {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      email: email,
      password: password,
    }),
  })
    .then((response) => response.json())
    .then((responseJson) => console.log(responseJson));
});

Anyone has any ideas on how to fix this ?

Upvotes: 0

Views: 243

Answers (1)

Som Shekhar Mukherjee
Som Shekhar Mukherjee

Reputation: 8188

You should not get the value of email and password while selecting them but instead get the values inside the click listener. See the code below:

First Change: Remove .value while selecting the elements.

const email = document.getElementById("email");
const password = document.getElementById("password");

Second Change: Get the value inside the click listener.

body: JSON.stringify({
   email: email.value,
   password: password.value,
})

Full Code Below:

const $ = require("jquery");

const loginbtn = document.getElementById("submitbtn");
const email = document.getElementById("email");
const password = document.getElementById("password");

loginbtn.addEventListener("click", (e) => {
  console.log(email);
  fetch("http://localhost:8080/api/v1/auth/login/email", {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      email: email.value,
      password: password.value,
    }),
  })
    .then((response) => response.json())
    .then((responseJson) => console.log(responseJson));
});

Upvotes: 1

Related Questions