am new to nodeJS am trying to post the collection when the button is been clicked, i don't is posting because am getting an error:undefined, when i console the req.body please what am doing wrong here. is there something am not doing
Here's my code.
//create.ejs file
<form action="/blogs" method="post">
<div>
<label>Title</label>
<input name="title" type="text"/>
</div>
<div>
<label>Content header</label>
<input name="content" type="text"/>
</div>
<div>
<label>Content Body</label>
<textarea name="body"></textarea>
</div>
<div class="button">
<button>Post content</button>
</div>
</form>
//app.js file
const express = require("express")
const app = express()
const mongoose = require("mongoose")
const Schema = mongoose.Schema;
const BlogPost = new Schema({
title:{
type: String,
required: true
},
content: {
type: String,
required: true
},
body: {
type: String,
required: true
}
})
const Blog = mongoose.model("Blog", BlogPost)
module.exports = Blog;
app.post("/blogs", (req, res) => {
const blogs = new Blog({
title:req.body.title,
content: req.body.content,
body: req.body.body,
})
blogs.save()
.then(result => console.log(result))
.catch(err => console.log(err))
})
You must write
<input type="submit" name="Post content" value="Post content">
instead of this Post content
In the button element add
<button type="submit">Post content</button>
I forget to add urlencoded method.
app.use(express.urlencoded({ extended: true }))
Related
i'm trying to make an update functionality but it doesn't update the model :( First i make a get request to get the data from the server and populate it in form(handlebars)
so, here's the router:
router.get('/edit/:id', async (req, res) => {
const warum = await Warum.findById(req.params.id)
res.render('edit', warum);
});
router.post('/edit/:id', (req, res) => {
return Warum.findOneAndUpdate(req.params.id, { new: true }, {
title: req.body.title,
description: req.body.description,
})
.then(() => {
res.redirect('/warum');
})
.catch((err) => {
console.log(err);
});
});
that's the form:
<form method="post">
<h2>Beitrag bearbeiten</h2>
<ul class="noBullet">
<li>
<label for="title">Titel:</label>
<input type="text" name="title" value="{{title}}" />
</li>
<li>
<label for="description">Beschreibung:</label>
<textarea class="texterea" name="description">
{{description}}
</textarea>
</li>
<div>
<button class="login-button">save</button>
</div>
</ul>
</form>
and that's the schema:
const mongoose = require('mongoose')
const WarumSchema = new mongoose.Schema({
title: String,
description: String,
});
const Warum = mongoose.model('Warumschema', WarumSchema);
module.exports = Warum;
I tried to change the route from post to put, but then it says 404. After clicking the save button it just redirects me, but the result is not edited.
NextJS Code:
const Home: NextPage = () => {
return (
<div className={styles.container}>
<form action="http://localhost:2000/register" method="post">
<label htmlFor="name">Name:</label>
<input type="text" id="first" name="first" />
<label htmlFor="email">Email</label>
<input type="text" id="last" name="last" />
<button type="submit">Submit</button>
</form>
</div>
)
}
Express Code:
router.post('/register', async (req: Request, res: Response) => {
const user = await User.create({
name: req.body.name,
email: req.body.email,
});
return res.status(200).json(user);
});
The schema for that is:
import mongoose from 'mongoose'
const userSchema = new mongoose.Schema({
name: String,
email: String,
});
export const User = mongoose.model('User', userSchema);
When I enter name + email, its only saving the _id, nothing else, why?
I have a checkout page for a store that has some inputs such as address, name, etc. I also want to upload the cart info to the mongodb as well, but it's not working. The cart info comes from redux using the useSelector from redux, but I can't put that function into server.js. Does anyone have any tips? I have provided the schema below as well.
Server.js
require('dotenv').config();
const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const connectDB = require('./config/db');
const productRoutes = require('./routes/productRoutes');
const CustomerInfo = require("./models/customerInfo");
connectDB();
const app = express();
app.use(express.json());
app.use('/api/products', productRoutes);
const PORT = process.env.PORT || 5000;
app.use(bodyParser.urlencoded({extended: true}));
//app.post
app.post ("/", function(req, res) {
let newCustomerInfo = new CustomerInfo({
fname: req.body.firstName,
lname: req.body.lastName,
email: req.body.email,
phone: req.body.phoneNumber,
address: req.body.address,
city: req.body.city,
district: req.body.district,
section: req.body.section,
confirmCode: req.body.confirmCode,
comments: req.body.extraInfo,
cartItems: req.body.cartcount
});
newCustomerInfo.save();
res.redirect("/");
})
app.listen(PORT, () => console.log(`Server Running on port ${PORT}`))
CheckoutScreen.js
import './CheckoutScreen.css';
import { useDispatch, useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
// Components
import CartItem from '../components/CartItem';
const CheckoutScreen = () => {
const cart = useSelector(state => state.cart);
const { cartItems } = cart;
const getCartCount = () => {
return cartItems.reduce((qty, item) => Number(item.qty) + qty, 0)
};
const getCartSubTotal = () => {
return cartItems.reduce((price, item) => item.price * item.qty + price, 0)
};
return (
<div className="checkoutscreen">
<div className="checkout__left">
<body>
<form className="checkout-form" method="post" action="/">
<label className="input">
<input type="text" name="firstName" required/>
<span className="placeholder">First Name</span>
</label>
<label className="input">
<input type="text" name="lastName" required/>
<span className="placeholder">Last Name</span>
</label>
<label className="input">
<input type="text" name="email" required/>
<span className="placeholder">Email</span>
</label>
<label className="input">
<input type="text" name="phoneNumber" required/>
<span className="placeholder">Phone Number</span>
</label>
<label className="input">
<input type="text" name="address" required/>
<span className="placeholder">Address</span>
</label>
<label className="input">
<input type="text" name="city" required/>
<span className="placeholder">City</span>
</label>
<label className="input">
<input type="text" name="district" required/>
<span className="placeholder">District</span>
</label>
<label className="input">
<input type="text" name="section" required/>
<span className="placeholder">Section</span>
</label>
<label className="input">
<input type="text" name="confirmCode" required/>
<span className="placeholder">Confirmation Code</span>
</label>
<label className="input">
<input type="text" name="extraInfo" required/>
<span className="placeholder">Details/Comments</span>
</label>
<p className="cartcount">{getCartCount()}</p>
<button>Submit</button>
</form>
</body>
</div>
<div className ="checkout__right">
<div className="checkout__info">
<p>Subtotal ({getCartCount()}) items</p>
<p>${getCartSubTotal().toFixed(2)}</p>
</div>
</div>
</div>
)
};
export default CheckoutScreen;
customerInfo.js
const mongoose = require("mongoose");
const customerInfoSchema = new mongoose.Schema ({
fname: {
type: String,
required: true
},
lname: {
type: String,
required: true
},
email: {
type: String,
required: true
},
phone: {
type: String,
required: true
},
address: {
type: String,
required: true
},
city: {
type: String,
required: true
},
district: {
type: String,
required: true
},
section: {
type: String,
required: true
},
confirmCode: {
type: String,
required: true
},
comments: {
type: String,
required: false
},
cartItems: {
type: Number,
required: true
}
});
const customerInfo = mongoose.model('Customer Info', customerInfoSchema);
module.exports = customerInfo;
You need to call your API in Server.js. To call the API you need to submit the form and handle the form submission by handleSubmit method on form onSubmit event. In handleSubmit method you need to call checkout action and pass the cart object. The CheckoutAction need to use redux-thunk to call server api asynchronously (side effect with middleware). Once the response back you can return the state by dispatching to CheckoutReducer
CheckoutScreen.js
import { Checkout } from '../action/checkoutAction'
const dispatch = useDispatch();
...........
const handleCheckout = e => {
e.preventDefault();
dispatch(Checkout({ type:'CHECKOUT', payload:cart }));
}
......
<form className="checkout-form" method="post" action="/" onSubmit={e => handleCheckout(e)}>
CheckoutAction.js
export const Checkout = data => async dispatch => {
let response = await axios.post(server_api_url, data);
dispatch({ type: 'checkout_success', payload:response.data}); //to checkout reducer
}
When I submit my form I get the following error: Error [ValidationError]: System validation failed: lastName: Path lastName is required., firstName: Path firstName is required.
I'm not sure what's causing this, when I console.log(formData) I get the data I submitted into the form.
App.js
const express = require('express')
const app = express();
const mongoose = require('mongoose');
const dotenv = require ('dotenv/config');
const System = require('./models/System');
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.get('/', (req,res) => {
res.render('index.ejs');
});
app.post('/post-feedback', (req, res) => {
const formData = {
firstame: req.body.firstName,
lastname: req.body.lastName,
assetTag: req.body.assetTag
}
const system = new System(formData);
system.save()
.then(result => {
console.log(result);
})
.catch(err => {
console.log(err);
});
});
Model:
const mongoose = require('mongoose');
var SystemSchema = new mongoose.Schema({
firstName: {
type: String,
required: true
},
lastName: {
type: String,
required: true
},
assetTag: {
type: Number,
required: true
}
});
module.exports = mongoose.model('System', SystemSchema);
Form:
<form action="/post-feedback" method="POST">
<div class="form-group">
<label for="firstName">First Name: </label>
<input type="text" class="form-control" id="firstName" name="firstName">
</div>
<div class="form-group">
<label for="lastName">Last Name: </label>
<input type="text" class="form-control" id="lastName" name="lastName">
</div>
<div class="form-group">
<label for="assetNum">Asset Tag: </label>
<input type="text" class="form-control" id="assetTag" name="assetTag">
</div>
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
</form>
The only one reason why you got some error it's because you're typo on your formData. It must be firstName and lastName, make sure it same with your Schema field and then Make Sure your assetTag is a number, because your Schema type is number.
You can try with this code below:
app.post('/post-feedback', (req, res) => {
const formData = {
// you're typo here: firstame
firstName: req.body.firstName,
// you're typo here: lastname
lastName: req.body.lastName,
// must be number
assetTag: parseInt(req.body.assetTag);
}
const system = new System(formData);
system.save()
.then(result => {
console.log(result);
})
.catch(err => {
console.log(err);
});
});
I hope it can help you.
app.post('/post-feedback', (req, res) => {
const system = new System(req.body);
system.save()
.then(result => {
console.log(result);
})
.catch(err => {
console.log(err);
});
});
i think above code should be work.
Basically i have 2 sections. First is category and second is essay. The categories are added in mongoose schema and then the categories are being rendered to add essay in a specific category section. Now when i choose a specific category i also want the id of that category to store in essay schema but cant do so. Any help is appreciated
I have tried mongoose populate and schema.types.object method but aint
working for me.
// Loading essay model
require("../models/essay");
const essay = mongoose.model("essay");
// Loading category model
require("../models/category");
const category = mongoose.model("category");
// Essay processing form
router.get("/addessay", ensureAuthenticated, (req, res) => {
res.header(
"Cache-Control",
"no-cache, private, no-store, must-revalidate,max-stale=0, post-check=0,
pre-check=0"
);
category.find({}).then(category => {
res.render("addessay", {
category: category
});
});
});
// Post route to store essay in db
router.post("/essay/add", ensureAuthenticated, (req, res) => {
res.header(
"Cache-Control",
"no-cache, private, no-store, must-revalidate,max-stale=0, post-check=0, pre-check=0"
);
const newEssay = {
cat: req.body.category,
catg: req.body.categoryg,
body: req.body.body,
bodygreece: req.body.bodyg
};
new essay(newEssay).save().then(essay => {
req.flash("success_msg", "Essay Succesfully added");
res.redirect("/");
});
});
//Category Schema
const mongoose = require("mongoose");
const Schema = mongoose.Schema;
// creating the schema
const categorySchema = new Schema({
category: {
type: String,
required: true
},
categorygreece: {
type: String,
required: true
},
date: {
type: Date,
default: Date.now
}
});
mongoose.model("category", categorySchema);
//Essay Schema
const mongoose = require("mongoose");
const Schema = mongoose.Schema;
// creating the schema
const EssaySchema = new Schema({
cat: {
type: String,
required: true
},
catg: {
type: String,
required: true
},
body: {
type: String,
required: true
},
bodygreece: {
type: String,
required: true
},
date: {
type: Date,
default: Date.now
}
});
mongoose.model("essay", EssaySchema);
//Handlebar template (Essay adding form)
<main class="page-content my-5">
<div class="row">
<div class="col-md-6 offset-3">
<h3 class="my-5">Add Your your Essays .!</h3>
</div>
</div>
<div class="row">
<div class="col">
<form action="/essay/add" method="POST">
<div class="form-group">
<select class="categorys form-control mt-4" name="category">
{{#each category}}
<option value="{{id}}">{{category}}
</option>
{{/each}}
</select>
</div>
<div class="form-group">
<select class="categorys form-control mt-4" name="categoryg">
{{#each category}}
<option value="{{id}}">{{categorygreece}}
</option>
{{/each}}
</select>
</div>
<div class="form-group">
<h5 class="mb-3">Tell us your Essay in English!</h5>
<script src="https://cdn.ckeditor.com/4.11.4/standard/ckeditor.js"></script>
<textarea name="body" id="body-text" cols="30" rows="5" class="form-control"
placeholder="English Essay"></textarea>
<script>
CKEDITOR.replace('body');
</script>
</div>
<div class="form-group">
<h5 class="mb-3">Tell us your Essay in Greece!</h5>
<script src="https://cdn.ckeditor.com/4.11.4/standard/ckeditor.js"></script>
<textarea name="bodyg" id="body-text-2" cols="30" rows="5" class="form-control"
placeholder="Greece Essay"></textarea>
<script>
CKEDITOR.replace('bodyg');
</script>
</div>
<div class="form-group">
<input type="submit" value="SUBMIT" class="form-control btn btn-outline-dark btn-sm">
</div>
</form>
</div>
</div>
</main>
So when from options i choose a category i also want the categorys id and have to store that in essay schema.