Not able to update and delete data from mongoose - node.js

I am using ejs template, expressjs, and mongoose. not able to update existed data through form while click on edit button and as well not able to delete it . I want to delete when user click a button as well when user click on edit button it show form and allow him to edit. I already wrote get route , it is working fine.
**Update route:**
router.put('/success123' , function (req, res) {
// const id = req.params.id;
Campaign.findById(id)
.then(campaign => {
campaign.Title = req.body.title;
campaign.Description = req.body.Description;
campaign.save().then(updatePost => {
res.render('success123');
});
});
});
**Delete route**
router.delete ('/delete/:id' , function (req, res){
Campaign.findByIdAndDelete(req.params.id)
.then(deletedPost => {
res.render('success');
});
});
I am getting error and cant figure it out . Event it is not showing any error message in my console. both deleting and updating parts not working and i am able to success fully get route while user click on edit campaign button.
My ejs template for update : THIS IS MY EJS TEMPALTE WHERE I AM SENDING UPDATE INFORMATION THROUGH FORM
<div class="row p-4">
<div class="col-md-7">
<form action="/success123" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="title">Title</label>
<input type="text" value="<%=camplist.Title%>" class="form-control" name="title" id="title" placeholder="Enter The Title">
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea value="" name="description" id="description" class="form-control" placeholder="Enter your content here" rows="10"><%=camplist.Description%></textarea>
</div>
<div>
<input class="form-control" name="rules" type="hidden" placeholder="Enter The Title">
<textarea name="rules" id="editor"></textarea>
</textarea>
</div>
<div class="form-group">
<label for="file">Upload Your Banner Image </label>
<input type="file" class="form-control" id="file" name="uploadedFile" accept="image/jpeg, image/jpg, image/png, image/bmp">
</div>
<button class="btn btn-outline-success btn-lg" type="submit">Update Post</button>
</form>
I am getting error and cant figure it out . Event it is not showing any error message in my console. both deleting and updating parts not working and i am able to success fully get route while user click on edit campaign button.

Related

Undefined when trying to get data from form

Same code works fine with other application but for some reason won't work in this one
HTML:
<form action="/employees/add" method="POST" enctype="multipart/form-data" >
<div class="form-group">
<label for="first_name">First Name</label>
<input name="first_name" type="text" class="form-control" id="first_name" value="first_name"placeholder="Please enter your first name">
</div>
<div class="form-group">
<label for="last_name">Last Name</label>
<input name="last_name" type="text" class="form-control" id="last_name" value="last_name" placeholder="Please enter your last name">
</div>
</form>
Server.js
app.post('/employees/add', (req, res) => {
data.addEmployee(req.body).then(() =>{
console.log(req.body);
res.redirect('/employees')
});
Output:
Server running 8080
undefined
Of course, when I call addEmployee since req.body is undefined it won't do anything
I tried different app.use(express.static... ) but no luck and here how my folder looks like

Disabling Font Awesome Icon

I am building a search bar which I want to be disabled unless the user enters something. Appreciate any help to make this work.
This is my handlebars code:
<div class="searchWrapper">
<form action="/founduser" method="POST" class="searchBar">
<input type="hidden" id="groupid" name="groupid" value={{this.groupid}}>
<input type="text" name="searchBar" id="searchBar" placeholder="Enter the user's email ID"
value="{{this.term}}" />
{{!-- <i class="fas fa-search"></i>
<input type="submit" value="" id="submit"> --}}
<button type="submit" class="btn-search" id="user-search-btn"><span class="icon search"
disabled></span></button>
</form>
</div>
and I am running a JS check to alternate
const searchButton = document.getElementById('user-search-btn');
const check = () => {
if (searchButton !== "") {
searchButton.disabled = false
} else {
searchButton.disabled = true
}
}
searchButton.onkeyup = check
Where am I going wrong?
Sorry, I figured where I was going wrong. In my code I was checking if searchButton was empty, however what I should have done was to check the value inside the <input type="text" name="searchBar" id="searchBar" placeholder="Enter the user's email ID" value="{{this.term}}" />.

How do i create a get query in nodeJS based on information contained in checkboxes

I am trying to build an app that lets users find other users with a specific combination of skills. I ask the users to select which skills they are looking for via checkboxes but I'm not sure how to request for the status of that checkbox in my function.
My function currently is:
UserInfo.find()
.where('skill1').equals('')
.where('skill2').equals('')
.where('skill3').equals('')
.limit(10)
.then(function(doc) {
res.render('index', {items: doc});
});
It works properly if I set the equals('') to true or false but I'm not sure how to set it dynamically. My HTML code for the checkboxes is:
<form action="/getskills" method="get">
<div class="input">
<label for="skill1">Skill1</label>
<input type="checkbox" id="skill1" name="skill1" value="skill1"/>
</div>
<div class="input">
<label for="skill2">Skill2</label>
<input type="checkbox" id="skill2" name="skill2" value="skill2"/>
</div>
<div class="input">
<label for="skill3">Skill3</label>
<input type="checkbox" id="skill3" name="skill3" value="skill3"/>
</div>
FIND SKILL
</form>
How can I create and integrate a function to check the value of the checkbox and set the value of the required skill to either true or false?
Thanks in advance for your help.
The problem is that you are using an <a> element to perform the request to the server instead of <input type="submit">. Without a submit button, the elements on your form will not be submitted with the request. Modify your html to this
<form action="/getskills" method="get">
<div class="input">
<label for="skill1">Skill1</label>
<input type="checkbox" id="skill1" name="skill1" value="skill1" />
</div>
<div class="input">
<label for="skill2">Skill2</label>
<input type="checkbox" id="skill2" name="skill2" value="skill2" />
</div>
<div class="input">
<label for="skill3">Skill3</label>
<input type="checkbox" id="skill3" name="skill3" value="skill3" />
</div>
<input type="submit" value="FIND SKILL" />
</form>
then in your Node.js code (I assume you are using express), you can get the checkbox values as query parameters as follows:
//I'm assuming the req parameter is passed in to the express get() method
UserInfo.find()
.where('skill1').equals(req.query.skill1)
.where('skill2').equals(req.query.skill2)
.where('skill3').equals(req.query.skill3)
.limit(10)
.then(function(doc) {
res.render('index', {items: doc});
});

req.body returns empty object on put request

Im trying to update data by using put request
im using method-override package and multer for file upload
im not able to figure out what is causing the problem because
my post route is working fine where objects are getting stored in database from req.body fields and file is getting uploaded
this is my route:
app.put("/browse/:id", function(req, res){
console.log( req.body); // returns empty object
console.log( req.file); //undefined
})
this is the form
<form action="/browse/<%= book._id %>?_method=PUT" enctype="multipart/form-data" method="POST">
<input value="<%= book.image %>" type="file" name="image" >
<input value="<%= book.title %>" type="text" name="title" required>
<textarea name="desc">
<%= book.description %>
</textarea>
<button class="btn btn-success" type="submit"> Update </button>
</form>
Sorry, i guess just forgot to put the upload.single('image') method in there. That solved it for me.

passing get request from bootstrap button

How do I trigger a get request from a bootstrap button? I have the following code:
<form class="navbar-form navbar-right" role="form">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
<button type="submit" class="btn btn-warning" value="/signup" id="submit">Sign up</button>
</form>
and would like this button to perform a get request with the following value "signup"
I am using a MEAN stack and the routes are set up so when the app is accessed with the get value /signup it goes to the signup page. But I am not able to get the bootstrap 3 button to post a get a request.
On your form you will need the following two attributes:
Action = "{URL TO SEND THE FORM TO}"
Method = "{GET or POST}"
For a signup with a username and password you should really think about doing a POST request so the form element should look like (for a POST request):
<form action="/signup" method="POST" class="navbar-form navbar-right" role="form">
or for a get request:
<form action="/signup" method="GET" class="navbar-form navbar-right" role="form">

Resources