htmlnode.jsexpress

Express cannot get the value from textarea


I have the following form that allows user to edit their content. The form has two input tags and one textarea tag.

I was expecting Express would return the value from the input and textarea, but the textarea was empty, leaving only the input tag value to return.

I tried to switch out the textarea tag with input, and it worked, but since the input tag is a single-line text tag, I want a multiple-line text tag to handle long paragraphs from the user.

Here is my code:

app.post("/editBlog", (req, res) => {
  // console.log(`Edit blog at index: ${editBlogIndex}`);
  const blogToEdit = posts[editBlogIndex];
  // console.log(blogToEdit);
  blogToEdit.fname = req.body["fullname"];
  blogToEdit.title = req.body["title"];
  blogToEdit.blogContent = req.body["content"];
  res.render("edit-blog.ejs", {
    posts: posts
  });
})

Here is the code from the express file:

<form action="/editBlog" method="post">
  <div class="form-group">
    <label for="fullname">名前:</label>
    <input type="text" id="fullname" name="fullname" placeholder="フルネーム" value="<%= blogEdit.fname %>"><br>
  </div>
  <div class="form-group">
    <label for="title">タイトル:</label>
    <input type="text" id="title" name="title" placeholder="投稿タイトル" value="<%= blogEdit.title %>"><br>
  </div>
  <div class="form-group">
    <label for="content">内容:</label>
    <textarea id="content" name="content" placeholder="投稿内容" value="<%= blogEdit.blogContent %>" style="height:200px"></textarea>
  </div>
  <div class="d-grid gap-2 col-6 mx-auto">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

How do I get express return the value from the textarea tag?


Solution

  • Textarea elements don't have a value attribute like regular input tags do. So in your case value="<%= blogEdit.blogContent %>" won't get sent across when your form does its POST request. You need specify the value content between the opening and closing textarea element for it to work correctly:

    <textarea id="content" name="content" placeholder="投稿内容" style="height:200px"><%= blogEdit.blogContent %></textarea>