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?
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>