How to pass information from javascript to express to use it as a default value?-CodePudding

So basically im using express, mongodb for the database, and ejs. I'm creating a form which can be submited to add a new article for a blog. If the form is missing information, the website is supposed to redirect back to the page whilst keeping the information in the boxes where they were. I've tried doing this however an error appears : "article is not defined" as if the data wasnt being sent to the page. So does anyone know how to fix this issue?

Here is my article.js file which is used to create new articles :

const express = require('express');
const Article = require('./../models/article')
const router =  express.Router();

module.exports = router

router.get('/new', (req, res) => {
  res.render('articles/new')
});

router.get('/:id', (req, res) => {

});

router.post('/', async (req, res) => {
  const article = new Article({
    title: req.body.title,
    description: req.body.description,
    markdown: req.body.markdown
  });
  try {
    article = await article.save()
    res.redirect(`/articles/${article.id}`);
  } catch (e) {
    res.render('articles/new', { article: article })
  }
});

Here is my new.ejs file which is used to display the form to create the article :

<!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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Blog</title>
</head>
<body>
  <div >
    <h1 >New Article</h1>

    <form action="/articles" method="POST">
      <%- include('_form_fields') %>
    </form>
  </div>
</body>
</html>

And here is my _form_fields.ejs file which is used as a template for the form :

<div >
  <label for="title">Title</label>
  <input required value="<%= article.title %>" type="text" name="title" id="title" >
</div>
<div >
  <label for="description">Description</label>
  <textarea name="description" id="description" ><%= article.description %></textarea>
</div>
<div >
  <label for="markdown">Markdown</label>
  <textarea required name="markdown" id="markdown" ><%= article.markdown %></textarea>
</div>

<a href="/" >Cancel</a>
<button type="submit" >Save</button>

For a bit more context information, the error happened after I added: value="<%= article.title %>" to the _form_fields.ejs file. I can help explain and send additional code snippets if needed. Thank you for your time.

CodePudding user response：

One coding error I see is that you do this:

const article = new Article({
    title: req.body.title,
    description: req.body.description,
    markdown: req.body.markdown
});

And, then later in the same function, you do this:

article = await article.save()

But, you can't reassign to article because it is const. That will throw an exception every time and then go to your catch block.

I'm not sure you really even need to reassign article at all, but if you do, then change:

const article = new Article(...);

to this:

let article = new Article(...);

FYI, errors like this are why you should always console.log(err) in a catch block so you can see exactly what error was thrown as it can sometimes be something you aren't expecting and don't think about when debugging.