Cannot POST form NodeJS Express - node.js

I have a form which dynamically adds user data from the user into a table.
This is the final form look
When one of these Use this account is pressed it shows, Cannot POST /like.
This is the form. I useEJS.
<form method="POST" autocomplete="off">
<div class = "form-group col-sm-12">
<label for="tagsarray">Enter Tags</label>
<input type="text" class="form-control" id="likes" name="likes" aria-placeholder="Enter tags seperated by a comma">
</div>
<div class="form-group col-sm-7">
<label for="numberoftimes">Enter Number of Actions</label>
<input type="text" class="form-control" id="action" name="action" aria-placeholder="Enter No. of Actions">
</div>
<% if (accounts) {%>
<table class = "striped">
<tbody>
<% accounts.forEach(accounts => { %>
<tr>
<td><%= accounts.title%></td>
<td><button type="submit" class = "btn btn-primary col-auto" >Use this account</button></td>
</tr>
</tr>
<%});%>
</tbody>
</table>
<%} else {%>
<p>You have no accounts added</p>
<% } %>
</form>
This is my controller.js
control.get('/like', async(req, res) => {
try{
const accounts = await account.find({user: req.user.id}).lean()
res.render("backend/like", {
name: req.user.name,
accounts
});
} catch(err) {
console.log(err)
}
});
control.post('/like/:id', getuserdata, (req, res, next) => {
try{
let title = res.accountuser.title;
let pass = res.accountuser.password;
let tags = req.body.likes;
let actions = req.body.action;
console.log(title, pass, tags, actions)
iglike(title, pass, tags, actions)
next();
res.redirect('/like')
}catch(err) {
console.log(err)
}
});
This does not catch any error and the console shows absolutely nothing. The only error is Cannot POST /like.
This is the getuserdata function for reference
async function getuserdata(req, res, next) {
let accountuser
try{
accountuser = await account.findById(req.params.id)
} catch(err) {
console.log(err)
}
res.accountuser = accountuser
next()
};
I have tried with a simple type=submit button with no href still shows the same error
Please help me solve this Cannot POST /like error.

You have to set a default action for your form, to make the route to work with post. If you use href it does a get by default.
To make a post in your route, you should remove the href and put an default action in your form.
<form method="POST" autocomplete="off" action="/like/<%= accounts._id%>">
Then in the line your have the submit button, remove the href (as it was moved to default action from form)
<td><button type="submit" class = "btn btn-primary col-auto" >Use this account</button></a></td>

/like is a GET request
for POST request you need to use
/like/1
where 1 can be any parameter

Related

Why isn't my title being inserted into my database?

I'm trying to insert the title from my input form into my caption column in my database and then display it with the post. The image and delete buttons display, however the title does not.
Here is my route in my server.js:
app.post('/newPost', isLoggedIn, uploads.single('inputFile'), (req, res) => {
console.log('On POST route');
// get an input from user
let file = req.file.path;
console.log(file);
cloudinary.uploader.upload(file, (result) => {
console.log(result);
db.post.create({
caption: req.body.title,
image_url: result.url,
userId: req.body.id
})
// Render result page with image
}).then((post) => res.render('index', { image: result.url }));
})
Here is my newPost.ejs which contains the form:
<div class="postSection">
<form action="/" method="POST" enctype="multipart/form-data">
<input type="title" placeholder="Write a Caption:" id="postText">
<input type="file" name="inputFile" id="inputFile">
<input type="submit" class="btn btn-primary" id="postSubmit" value="Post">
</form>
</div>
And, finally here is my index.ejs page in which it will display:
<div>
<% posts.forEach(function(post) { %>
<h1><%= post.caption %></h1>
<img class="images" width="700px" height="500px" src="<%= post.image_url %>" alt="uploaded image">
<form action="/<%= post.id %>?_method=DELETE" method="POST">
<input id="deleteButton" class="btn-danger" type="submit" value="Remove idea" >
</form>
<br>
<% }) %>
</div>
Can anyone spot why the title isn't being inserted into my database and also why it isn't displaying?
One option to debug is console.log the req.body and search for the text you sent as the title.
I think that the title is in req.body.postText or you should add a name tag to your title input and that will be the name in your req.body.
Let me know if this helps!

How to get a value from a form to make a query in AdonisJs?

I'm coding a search form to get some data from database
I don't know what am i doing wrong. The page just refreshes and nothing happens.
1- I have a form with a input called "term"
2- My route: Route.get('/telefone', 'TelefoneController.show')
MY CONTROLLER
async show ({ params, request, response, view }) {
const term = request.input('term');
const nome = await Telefone.query().where('atendente', 'LIKE',
'%'+term+'%').fetch()
console.log(nome);
return view.render('telefone', {
nome: nome,
})
}
MY HTML
<div class="container d-flex">
<form action="{{ route('/telefone')}}" method="get" class="col-sm-8">
<div class="form-group">
<label for="campotel">Buscar Nome</label>
<input type="text" name="term" class="form-control" id="campotel" placeholder="Digite o nome do funcionário">
</div>
<button type="submit" class="btn btn-success float-right">Buscar</button>
</form>
</div>
DB STRUCTURE
class TelefoneSchema extends Schema {
up () {
this.create('telefones', (table) => {
table.increments()
table.string('ramal')
table.string('voip')
table.string('atendente')
table.integer('id_departamento')
.unsigned()
.references('id')
.inTable('departamentos')
.onUpdate('CASCADE')
.onDelete('CASCADE')
table.integer('id_polo_telefone')
.unsigned()
.references('id')
.inTable('polos')
.onUpdate('CASCADE')
.onDelete('CASCADE')
table.timestamps()
})
}
down () {
this.drop('telefones')
}
}
module.exports = TelefoneSchema
page just refresh and nothing happens
I tried on my side without being able to reproduce the case.
But I have some information that might perhaps help you:
When the query returns no value the result is null. -> make sure your db have values
My test code (work fine):
My controller:
'use strict'
const Telefone = use('App/Models/Telefone')
class TelefoneController {
async show ({ params, request, response, view }) {
const term = request.input('term')
console.log(term)
const result = await Telefone.query().where('atendente', 'like',
'%'+term+'%').fetch()
const nome = result.toJSON()
console.log(nome) // Return JSON array
return view.render('welcome', {
nome: nome,
})
}
}
module.exports = TelefoneController
My schema (I don't use all your datas) :
class TelefoneSchema extends Schema {
up () {
this.create('telefones', (table) => {
table.increments()
table.string('ramal')
table.string('voip')
table.string('atendente')
table.timestamps()
})
}
down () {
this.drop('telefones')
}
}
My view :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Hello Adonis</title>
</head>
<body>
<h1>Ramal : {{ nome[0].ramal }}</h1>
<div class="container d-flex">
<form action="{{ route('/telefone')}}" method="get" class="col-sm-8">
<div class="form-group">
<label for="campotel">Buscar Nome</label>
<input type="text" name="term" class="form-control" id="campotel" placeholder="Digite o nome do funcionário">
</div>
<button type="submit" class="btn btn-success float-right">Buscar</button>
</form>
</div>
</body>
</html>
I hope it might help you a little bit.

Submitting a form results to a url segment undefined in NodeJs

I am setting up a simple form submission, when I submit the form the url becomes undefined
This is the view: http://localhost:3000/dashboard/tours/categories
router.get('/tours/categories', function (req, res) {
res.render('agents/tourcategories', {
page_link: 'wishlist'
});
});
This is the form:
<form method="POST" action="/dashboard/tours/categories" >
<div class="box_general padding_bottom">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Category Name</label>
<input type="text" name="categoryname" class="form-control" placeholder="e.g Hiking">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary pull-left" type="button" data-
dismiss="modal">Cancel</button>
<button id="" type="submit" class="btn btn-primary" >Save</a>
</div>
</form>
when I submit the form tne url changes to: `
http://localhost:3000/dashboard/tours/undefined
router.post('/tours/categories',function (req, res) {
console.log("We are here");
const category = new CategoriesDB({
categoryname: req.body.categoryname,
addedby: res.locals.useremail
});
// Save a Customer in the MongoDB
CategoriesDB.save(function (err) {
if(err){
console.log(err);
return;
}else{
res.redirect('/tours/categories');
}
})
});
I realy dont know where the undefined came from, I have checked everything seems to be okay. It keeps popping up in the url everythime i submit the form
`
From the snippets of the code you have posted, It might be because u have not used the middleware
router.all("/dashboard*");
But if u have used that and the GET request is working but not the POST then u will need to post more snippets of your code, mainly the middleware you defined to handle the routes

ReferenceError: product is not defined

I'm trying to fetch the data , but when i console it.I' getting the data but in rendering it's not working in front end its showing product is not defined.
app.get('/profile/profile/dashboard/update/:id',function (req,res,next) {
//console.log("hello "+req.params.id);
Product.findOne({_id: req.params.id}).then(product=>{
console.log("hello check please "+ product);
});
res.render('update.ejs',{ product: product });
});
update.ejs file
<% if (product._id) { %>
<tbody>
<td><input type="text" value="<%= product.name %>" required></td>
<td><input type="text" value="" required></td>
<td><input type="text" value="" required></td>
<td><input type="text" value="" required></td>
<td><input type="submit" class="btn btn-danger" value="submit"></td>
</tbody>
<% } %>
The problem is that you are trying to render the data before the findOne is finished. findOne is asynchronic function and that is why the log works for you.
Move res.render inside the then scope:
Product.findOne({_id: req.params.id}).then(product=>{
console.log("hello check please "+ product);
res.render('update.ejs',{ product: product });
});
Yes problem with your code is rendering is placed outside of the find one method. Put it inside the braces like.
app.get('/profile/profile/dashboard/update/:id',function (req,res,next) {
//console.log("hello "+req.params.id);
Product.findOne({_id: req.params.id}).then(product=>{
console.log("hello india "+ product);
res.render('update.ejs',{ product: product });
});
});

Can't update user model in express?

I'm trying to do a put request to update a user model but instead my router just sends another get request.
Here's my router
router.get('/update', isLoggedIn, function(req, res) {
res.render('update.ejs', {
user : req.user // get the user out of session and pass to template
});
});
router.put('/update', function(req, res) {
var username = req.body.username;
var profile_type = req.body.prof_type;
var pic = req.body.profile_pic;
var aboutme = req.body.whoami;
console.log(req.body.whoami);
User.findById(req.params.id,function(err, userup){
if (!userup)
return next(new Error("Couldn't load user"));
else {
userup.username = username;
userup.prof_type = profile_type;
userup.profile_pic = pic;
userup.whoami = aboutme;
userup.save(function(err) {
if (err)
console.log('error on update');
else
console.log('successful update');
});
}
});
res.redirect('/profile');
});
Here's my html input form
<form action="/update" method="put">
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" name="username">
</div>
<div class="form-group">
<h2> Pick a type of profile</h2>
<input type="radio" class="form-control" name="prof_type" value="true">Tutor<br>
<input type="radio" class="form-control" name="prof_type" value="false">Student
</div>
<div class="form-group">
<label>Link to profile picture</label>
<input type="text" class="form-control" name="profilepic">
</div>
<div class="form-group">
<label>About me</label>
<textarea name="whoami" class="form-control">Enter text here </textarea>
</div>
<button type="submit" class="btn btn-warning btn-lg">Update</button>
</form>
I've also tried changing them to be /update/:username, however, after I click the update button with the fields, I GET this address
http://localhost:3000/update?username=bob&prof_type=false&profilepic=bob&whoami=bob
Not sure why I'm not updating the model or even why it's not putting. Any help is much appreciated, thanks!
HTML only supports GET and POST requests. See the specification for details:
The method and formmethod content attributes are enumerated attributes
with the following keywords and states:
The keyword get, mapping to the state GET, indicating the HTTP GET
method. The keyword post, mapping to the state POST, indicating the
HTTP POST method. The invalid value default for these attributes is
the GET state. The missing value default for the method attribute is
also the GET state. (There is no missing value default for the
formmethod attribute.)
You can use the PUT method only with an ajax request. For example in jQuery:
$.ajax({
url: '/update',
type: 'PUT',
success: function(result) {
// Do something with the result
}
});

Resources