Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – program redirects to another page, but its html is not showing up. program says 'cannot GET /page'

A newbie in Express + Nodejs here. My program is trying to redirect a user from the home page to a registration page. I added the a href attribute to one of my buttons to do that:

<div class="button1">
        <div class="icon">
         <i class="fa-solid fa-user-plus fa-xl" style="color: #ffffff; margin-right:10px;"></i>
        </div>
        <div class="button-content">
         <h3 class="buttonl"><a href="acc_id.js">Get Account ID</a></h3>
       </div>
</div>

And I also added this to my index.js file:

app.get("/", (req, res) => {
  res.render("acc_id");
});

However, although the tab is redirecting, the program is not displaying the html page inside acc_id.js. I am getting the response ‘cannot GET /acc_id.js’.

here’s the acc_id file too:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Responsive Registration Form</title>
    <meta name="viewport" content="width=device-width,
      initial-scale=1.0"/>
    <link rel="stylesheet" href="/css/forms.css"/>
  </head>
  <body>
    <div class="container">
      <h1 class="form-title">Registration</h1>
      <form action="#">
        <div class="main-user-info">
          <div class="user-input-box">
            <label for="fullName">Full Name</label>
            <input type="text"
                    id="fullName"
                    name="fullName"
                    placeholder="Enter Full Name"/>
          </div>
          <div class="user-input-box">
            <label for="email">Email</label>
            <input type="email"
                    id="email"
                    name="email"
                    placeholder="Enter Email"/>
          </div>
          <div class="role">
            <label for="role">Are you a student or a teacher?</label>
                 <select name="Position" id="position" required>
                 <option value="student">Student</option>
                 <option value="teacher">Teacher</option>
                </select>
          </div>
          <div class="Strand">
            <label for="strand">Strand:</label>
                <select name="Strand" id="Strand" placeholder="Strand"required>
                <option value="abm">ABM</option>
                <option value="sc">ESTEM-C</option>
                <option value="se">ESTEM-E</option>
                <option value="sh">ESTEM-H</option>
                <option value="HUMSS">HUMSS</option>
                <option value="tvl">TVL</option>
                <option value="N/A">N/A (For teachers)</option>
                </select>
          </div>
          <div class="Class number">
            <label for="classnum">Class Number</label>
            <input type="number"
                    id="cnum"
                    name=""
                    placeholder="Enter Class Number"/>
          </div>
          <div class="user-input-box">
            <label for="idNumber">ID Number</label>
            <input type="Number"
                    id="idNum"
                    name="phoneNumber"
                    placeholder="Enter ID Number"/>
          </div>
          <div class="user-input-box">
            <label for="password">Password</label>
            <input type="password"
                    id="password"
                    name="password"
                    placeholder="Enter Password"/>
          </div>
          <div class="user-input-box">
            <label for="confirmPassword">Confirm Password</label>
            <input type="password"
                    id="confirmPassword"
                    name="confirmPassword"
                    placeholder="Confirm Password"/>
          </div>
        </div>
        </div>
        <div class="form-submit-btn">
          <input type="submit" value="Register">
        </div>
      </form>
    </div>
  </body>
</html>

I have been trying to restructure the file/folder structure, like adding/removing acc_id.ejs inside the views folder, as well as adding it as a .js file inside the root, but nothing happens. I would also appreciate if someone can clarify where I should put pages that have forms to be filled by the user; based on what i read they should be in views folder, but at the same time I am confused as I have read that ‘layouts’ should be inside this folder, but I am not sure what exactly these layouts are.

Tags:

2

Answers


  1. 0

    This is a detailed answer to the question or the issue. A short answer is also posted.

    The href needs to be given with a route path and this route path must be provided with a route handler as normally it is done.

    index.html

    <h3 class="buttonl"><a href="/regform">Get Account ID</a></h3>

    regform route handler

    server.js

    app.get('/regform', (req, res) => {
  let fileName = 'reg.html';
  res.sendFile(fileName, options, function (err) {
    if (err) {
      next(err);
    } else {
      console.log('Sent:', fileName);
    }
  });
});

    Please also note what is to be served from this route path is the normal html file. The reg.htm referenced in the code is an equivalent to your acc_id.js

    Now regarding the directory structure, it can be plain or nested. The point is sendFile needs to have the static path, which is provided as below. In this case the directory structure is kept plain – no nesting.

    server.js

    var options = {
  root: path.join(__dirname, './'),
  dotfiles: 'deny',
  headers: {
    'x-timestamp': Date.now(),
    'x-sent': true,
  },
};

    Just for reference, this is the root route handler.

    server.js

    app.get('/', function (req, res, next) {
  let fileName = 'index.html';
  res.sendFile(fileName, options, function (err) {
    if (err) {
      next(err);
    } else {
      console.log('Sent:', fileName);
    }
  });
});
    Login or Signup to reply.
  2. 0

    This is a very short answer to the question or the issue. A detailed answer is also posted.

    Quoted from ExpressJS documentation. For more, please refer the link below.

    How do I render plain HTML? You don’t! There’s no need to “render”
    HTML with the res.render() function. If you have a specific file, use the res.sendFile() function.

    Rendering an HTML Template file is another programming area wherein res.render is used. However in your case it is a plain HTML, therefore sendFile would do the job. For more about Rendering HTML template, please refer to the link below.

    FAQ ExpressJS

    Using template engines with Express

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search