I'm trying to send a simple form from my HTML page to my Node JS server. The problem is that: I have a field that needs to be incresed by the user, so I'm using an array to express it. Everything OK but the array field appears like a String inside my JSON Object on the Server.
Here is the output from the Server:
{
nomeEquipe: 'Team',
nomeLider: 'Team Lider',
emailEquipe: 'email#email.com',
matriculaLider: '10101010',
senhaLider: '001001001',
'part[0].nome': 'Partner',
'part[0].matricula': '666',
'part[0].email': '666#email.com'
}
I can't access the part Array. The part Array can be incresed...
index.ejs (The form and the script):
<form method="post" action="/cadastrar">
<input type="text" name="nomeEquipe" placeholder="Nome da Equipe"><br>
<input type="text" name="nomeLider" placeholder="Lider da Equipe"><br>
<input type="email" name="emailEquipe" placeholder="Email do Lider"><br>
<input type="number" name="matriculaLider" placeholder="Matricula do Lider"><br>
<input type="password" name="senhaLider" placeholder="Senha de Login"><br><br>
<input type="text" name="part[0].nome" placeholder="Nome do participante">
<input type="number" name="part[0].matricula" placeholder="Matricula do participante">
<input type="email" name="part[0].email" placeholder="Email do participante">
<div id="participante"></div>
<br>
<button type="button" onclick="addParticipante()">Adicionar</button>
<button type="button" onclick="delParticipante()">Remover</button>
<br><br>
<button type="submit">Cadastrar</button>
</form>
<script>
var cont = 1;
function addParticipante() {
var div = document.createElement('div');
div.className = 'participante';
div.innerHTML = '<input type="text" name="part['+cont+'].nome" placeholder="Nome do participante"><input type="number" name="part['+cont+'].matricula" placeholder="Matricula do participante"><input type="email" name="part['+cont+'].email" placeholder="Email do participante">';
document.getElementById('participante').appendChild(div);
cont++
}
function delParticipante() {
var select = document.getElementById('participante');
document.getElementById('participante').removeChild(select.lastChild);
cont--
}
</script>
The Server side (Routes):
var express = require('express');
var router = express.Router();
var equipe = require('./../models/Equipe')();
router.get('/', function(req, res, next) {
res.render('index', { title: 'Gincana' });
});
router.get('/cadastrar', (req, res, next) => {
equipe.find({}, (err, models) => {
if(err) console.log(err)
else res.json(models)
});
});
router.post('/cadastrar', validador, (req, res, next) => {
var model = req.body;
res.send(model);
});
function validador(req, res, next) {
var model = req.body;
console.log(model);
next()
}
module.exports = router;
Thanks a lot!
Change naming of your element. It should be part[][]
<input type="email" name="part[0][email]">
Than you will have array like
{part:[
0: {
nome: 'Partner',
matricula: '666',
email: '666#email.com'
}
]}
Related
I already created my model 'order'
I try to add new order into my mongodb, but keep showing this error,please help me! Thanks
I rely on the add_order.ejs to submit the form.
"ReferenceError: Cannot access 'order' before initialization"
I have the other two model 'recipe' and 'customer',but they worked! I don't understand why only
order has error?
order.js
const userSchema = new mongoose.Schema({
order_id :{
type: String,required : true
},
sum :{
type:Number,
required : true,
},
account :{
type :String,
required : true,
}
});
module.exports = mongoose.model('order',userSchema);
routes.js
const express = require('express');
const mongoose = require('mongoose');
const router = express.Router();
const customer = require('../models/customer');
const recipe = require('../models/recipe');
const multer = require('multer');
const { GridFSBucketReadStream } = require('mongodb');
const fs = require('fs');
const order = require('../models/order');
//insert an order into database route
router.post('/add_order', upload, (req,res) => {
const order = new order({
order_id : req.body.order_id,
sum : req.body.sum,
account : req.body.account,
});
order.save((err) => {
if(err){
res.json({message : err.message, type :'danger'});
}
else{
req.session.message={
type:'success',
message :'Customer added successfully!'
};
res.redirect("/");
}
})
})
add_order.ejs
<form action="/add_order" method="POST" id="add-form" enctype="multipart/form-data">
<div class="one_third first">
<label for="name">order_id <span>*</span></label>
<input type="text" name="order_id" placeholder="Enter order_id" size="22" required /></td>
</div>
<div class="one_third">
<label for="email">sum <span>*</span></label>
<input type="number" name="sum" placeholder="Enter sum" size="22" required>
</div>
<div class="one_third">
<label for="url">account <span>*</span></label>
<input type="text" name="account" placeholder="Enter account" size="22" required />
</div>
<input type="submit" name="submit" value="Add order" />
<input type="reset" name="reset" value="Reset Form">
</form>
You have a problem on this:
const order = require('../models/order');
//insert an order into database route
router.post('/add_order', upload, (req,res) => {
const order = new order**({ // <- you trying to change an immutable class definition
Class variable and instance variable needs to have different names.
Recommend you to change your class name to Order (with capital O):
const Order = require('../models/order');
then call your instance like this:
const order = new Order({ ... });
See more
Ive achieved a retrieve via http://localhost:3000/update2?buyerID=2299 which fetch the particular document.
When i press submit it redirects to the /orders page from where i can view all the records and there current fields.
If i change one the fields in retrieve and click submit it doesn't update the document Its the same as before.
1 of 5 JSON Documents- http://prntscr.com/dilrb0
JS FILE
router.get('/update2', function(req, res) {
var buyerID = req.query.buyerID;
if (!buyerID || !parseInt(buyerID)) {
res.render('error', {message: "You need to enter an ID to update a specific order", error:{status:"", stack: ""}});
} else {
mongoClient.connect(url, function (err, db) {
if (err) {
res.render('error', {message: "Failed to connect to MongoDB",error:{status:"", stack: ""}});
} else {
var WishList = db.collection('orders');
WishList.findOne({"buyerID": parseInt(buyerID)}, function(err, result) {
if (err || !result || result.length == 0) {
res.render('error', {message: "Failed to find order",error:{status:"", stack: ""}});
} else {
res.render('updateOrder2', {qs: result});
}
})
}
});
}
});
router.post('/update2', function(req, res) {
var buyerID = req.query.buyerID;
if (!buyerID || !parseInt(buyerID)) {
res.render('error', {message: "Failed to update order make sure the ID is current", error:{status:"", stack: ""}});
} else {
mongoClient.connect(url, function (err, db) {
if (err) {
res.render('error', {message: "Failed to connect to MongoDB", error:{status:"", stack: ""}});
} else {
var WishList = db.collection('orders');
var order = {
buyerID: req.body.buyerID,
gender: req.body.gender,
student: req.body.student,
pName: req.body.pName,
type: req.body.type,
purchaseDate: req.body.purchaseDate,
price: req.body.price,
sName: req.body.sName
};
console.log("Updating..", order)
WishList.updateOne({"buyerID": parseInt(buyerID)}, {$set: order}, function (err, result){
if (err) {
console.log("Cannot update", err)
} else {
console.log("Updated..", order)
res.redirect("/orders")
}
})
}
});
}
});
EJS
<!DOCTYPE html>
<html>
<head>
<title>Update Recipe</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<form name= "updateOrder" action="/updateOrder" method="POST">
User ID:<br>
<input type="text" name="buyerID" value = "<%=qs.buyerID%>" required ="required"><br>
Gender:<br>
<input type="text" name="gender" value = "<%=qs.gender%>" required ="required"><br>
Student?:<br>
<input type="text" name="student" value = "<%=qs.student%>" required ="required"><br>
Product ID:<br>
<input type="text" name="productID" value = "<%=qs.productID%>" required ="required"><br>
Product Name:<br>
<input type="text" name="pName" value = "<%=qs.pName%>" required ="required"><br>
Product Type:<br>
<input type="text" name="type" value = "<%=qs.type%>" required ="required"><br>
Date Purchased:<br>
<input type="text" name="purchaseDate" value = "<%=qs.purchaseDate%>" required ="required"><br>
Product Price:<br>
<input type="text" name="price" value = "<%=qs.price%>" required ="required"><br>
Seller Name:<br>
<input type="text" name="sName" value = "<%=qs.sName%>" required ="required"><br>
<br><br>
<input type="submit" value="Submit" />
</form>
</body>
</html>
I'm actually confused by the fact that you're still using req.query.buyerID instead of req.body.buyerID at the start of your .post() but that the code does apparently still reach res.redirect("/orders"); For starters, in your updateOne, try replacing parseInt(buyerID) with parseInt(order.buyerID) – Chris G 10 hours ago
i'm having problem implementing an update within my express application.
http://localhost:3000/update2?buyerID=2299
when i enter the link shown above it takes me to a form but its empty...
I want this form to be populated with the current values related to buyer ID document.
Can anyone see where i'm going wrong?
Thanks
json file
http://prntscr.com/dil1fj
js file
router.get('/update2', function(req, res) {
var buyerID = req.query.buyerID;
if (!buyerID || !parseInt(buyerID)) {
res.render('error', {message: "You need to enter an ID to update a specific order", error:{status:"", stack: ""}});
} else {
mongoClient.connect(url, function (err, db) {
if (err) {
res.render('error', {message: "Failed to connect to MongoDB",error:{status:"", stack: ""}});
} else {
var WishList = db.collection('orders');
WishList.findOne({"buyerID": parseInt(buyerID)}, function(err, result) {
if (err || !result || result.length == 0) {
res.render('error', {message: "Failed to find order",error:{status:"", stack: ""}});
} else {
res.render('updateOrder2', {updateOrder2: result, qs: req.query});
}
})
}
});
}
});
router.post('/update2', function(req, res) {
var buyerID = req.query.buyerID;
if (!buyerID || !parseInt(buyerID)) {
res.render('error', {message: "Failed to update order make sure the ID is current", error:{status:"", stack: ""}});
} else {
mongoClient.connect(url, function (err, db) {
if (err) {
res.render('error', {message: "Failed to connect to MongoDB", error:{status:"", stack: ""}});
} else {
var WishList = db.collection('orders');
var order = {
buyerID: req.body.buyerID,
gender: req.body.gender,
student: req.body.student,
pName: req.body.pName,
type: req.body.type,
purchaseDate: req.body.purchaseDate,
price: req.body.price,
sName: req.body.sName
};
console.log("Updating..", order)
WishList.updateOne({"buyerID": parseInt(buyerID)}, {$set: order}, function (err, result){
if (err) {
console.log("Cannot update", err)
} else {
console.log("Updated..", order)
res.redirect("/orders")
}
})
}
});
}
});
updateOrder2.ejs
<!DOCTYPE html>
<html>
<head>
<title>Update Recipe</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<form name= "updateOrder" action="/updateOrder" method="POST">
User ID:<br>
<input type="text" name="buyerID" value = <%=qs.buyerID%>/ required ="required"><br>
Gender:<br>
<input type="text" name="gender" value = <%=qs.gender%>/ required ="required"><br>
Student?:<br>
<input type="text" name="student" value = <%=qs.student%>/ required ="required"><br>
Product ID:<br>
<input type="text" name="productID" value = <%=qs.productID%>/ required ="required"><br>
Product Name:<br>
<input type="text" name="pName" value = <%=qs.pName%>/ required ="required"><br>
Product Type:<br>
<input type="text" name="type" value = <%=qs.type%>/ required ="required"><br>
Date Purchased:<br>
<input type="text" name="purchaseDate" value = <%=qs.purchaseDate%>/ required ="required"><br>
Product Price:<br>
<input type="text" name="price" value = <%=qs.price%>/ required ="required"><br>
Seller Name:<br>
<input type="text" name="sName" value = <%=qs.sName%>/ required ="required"><br>
<br><br>
<input type="submit" value="Submit" />
</form>
</body>
</html>
I've never used ejs, but I'm pretty sure you a) need to at put at least values that contain spaces in quotes and b) remove the slashes. Also, What do you see as source code? Does it contain "value ="? If so, what is inserted after that? Also, you're passing qs: req.query to the renderer. Shouldn't you pass qs: result?
Regarding the update, I'm guessing this var buyerID = req.query.buyerID; at the start of router.post('/update2' is the problem; you need to use req.body.buyerID. I recommend adding lots of console.log() commands to your code at crucial lines.
I'm guessing this var buyerID = req.query.buyerID; at the start of router.post('/update2' is the problem; you need to use req.body.buyerID. I recommend adding lots of console.log() commands to your code at crucial lines. – Chris G 4 mins ago
I am trying to do a Post request to my NodeJs server using PostMan and the terminal, but it seems the request never ends.
I have a website and a form, and I try to send the form by using Ajax. I do the same thing in other file except the fact that the other file does not contain a form and the post works.
This is my html form:
<div class="team">
<img class="teamInfo" src="images/leaderboard.png">
<p class= "createT"> Create a Team </p>
<p class= "chooseC"> Choose a Charity </p>
<p class= "enter"> Enter Team Member's Email</p>
<p class= "upload">Upload your Company<br>or Team's Logo</p>
<!-- added action tag solved the 405 error : "post method not allowed"-->
<form id="create_team_form" action="/" method="post">
<input class="teamName" type="text" id="teamName" name="teamName" size="25" maxlength="60" value="Team Name">
<input class="companyName" type="text" id="companyName" name="companyName" size="25" maxlength= "60" value="Company Name">
<input class="teamDescription" type="text" id="teamDescription" name="teamDescription" size="25" maxlength= "60" value="Team Description">
<input class= "email" type="text" id="email" name="email" size="25" maxlength= "60" value="emails">
<input class="searchCharity" type="text" id="charityName" name="charityID" size ="25" maxlength="60">
<p class="click"> Click the charity's name to select who your team will run for!</p>
<input class="greenButton" type="button" onclick="createTeam();" value="Create My Team!">
</form>
<img class="img-box" src="images/imgBox.png" alt=""/>
</div>
This is my javascript ajax to send the form to the server:
function createTeam(){
var teamN= document.getElementById("teamName").value;
var companyName =document.getElementById("companyName").value; //maybe not, tae it off.
var charityName = document.getElementById("charityName").value;
if((teamN.trim() === "") || (companyName.trim() === "") || (charityName.trim() === ""))
{
alert("You did not fill the team Name or companyName, Please enter with a name");
}else{
var sessionID = $.cookie("sessionID")
$.ajax({
type: "POST",
url: "http://xxx.xxxx.xxx.x:9000/team/?sessionID="+sessionID,
data: $("#create_team_form").serialize(),
success: function(msg) {
alert("team supposedly saved")
$.cookie("teamID",msg.teamID)
$.cookie("sessionID",sessionID)
//window.location.href='teamCreated.html'
}
});
}
}
It goes inside the if, but the else is just slow. I don't know if the data is being sent. I could not save a document so far in my mongodb.
This is my team.js in the server:
var express = require('express');
var sha1 = require('sha1');
var router = express.Router();
var sessionOBJ = require('./session');
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
router.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT, GET,POST");
});
var teamSchema = new Schema({
teamID: String,
teamName: String,
teamDescription: String,
teamAdminID: String,
teamLink: String,
charityID: String
});
var teamModel = mongoose.model('teams',teamSchema);
router.post('/', function (req, res){
log.d("Entrou no method post");
var sessionID = req.query.sessionID
var team = req.body;
var teamName = team.teamName;
var teamDescription = team.teamDescription;
var charityID = team.charityID;
var teamLink = team.teamLink;
sessionOBJ.isAuthorized(sessionID, function(sessionID){
log.d("Checking session to save team", sessionID);
var adminID = sessionID.userID;
var newTeam = new teamModel({
teamName: teamName,
teamDescription: teamDescription,
teamAdminID: adminID,
teamLink: teamLink,
charityID: charityID
});
newTeam.save(function(err, team){
if(err) return console.error(err);
res.send({"status" : "Created", "teamID" : team._id, "teamAdminID":team.teamAdminID });
log.d("Created Team ID", team._id)
log.d("XXXXXXX XXXXXX XXXXXXX Team Saved inside save method",team);
});
});
})
}
Does someone can see what I am doing wrong?
Thanks in advance.
After res.send() call res.end(). response.end tells the server that the entire message has been sent and can close the connection, otherwise, it'll wait for more data.
source:
https://nodejs.org/api/http.html#http_response_end_data_encoding_callback
Hi guys i ran into a problem that i don't understand why, it is very strange or maybe i write the code wrongly so i hope you guys can point out the mistake or enlighten me .
so i was trying to submit a form to my database and before submit the form the validate function will validate the data, if there's an error it will notify the user
when i click submit button the form cannot be submitted and nothing happened, no error in terminal , no error on console , nothing ( it looks like you click on <button> inside a form, while the form is expecting <input type="submit"> to submit the form>
here's the full code https://github.com/johnlim5847/form-test
App.js ( i think nothing wrong in here)
var express = require('express'),
app = express(),
http = require('http'),
path = require('path'),
MongoClient = require('mongodb').MongoClient,
routes = require('./routes'),
passport = require('passport');
MongoClient.connect('mongodb://localhost:27017/test', function(err, db) {
"use strict";
if(err) throw err;
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/public/views');
app.set('view engine', 'ejs');
app.use('/static', express.static(path.join(__dirname, 'public')));
app.use(express.cookieParser());
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.session({ secret: 'Super Duper Awesome Duck' }));
app.use(passport.initialize());
app.use(passport.session());
app.use(app.router);
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
routes(app, db);
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
});
routes/index.js
var SessionHandler = require('./session');
module.exports = exports = function(app, db) {
var sessionHandler = new SessionHandler(db);
app.use(sessionHandler.isLoggedInMiddleware);
// Signup form
app.post('/register', sessionHandler.handleSignup);
app.use(function (req,res) {
res.status(404).render('error', {
url: req.originalUrl
});
});
app.get('*',function(req, res){
res.render('master', { title: 'form' });
});
}
routes/session.js
var UsersDAO = require('../users').UsersDAO
, SessionsDAO = require('../sessions').SessionsDAO;
/* The SessionHandler must be constructed with a connected db */
function SessionHandler (db) {
"use strict";
var users = new UsersDAO(db);
var sessions = new SessionsDAO(db);
function validateSignup(publicUsername, password, confirmPassword, email, confirmEmail, errors) {
"use strict";
var USER_RE = /^[a-zA-Z0-9_-]{2,25}$/;
var PASS_RE = /^.{6,100}$/;
var EMAIL_RE = /^[\S]+#[\S]+\.[\S]+$/;
errors['publicUsername_error'] = "";
errors['password_error'] = "";
errors['confirmPassword_error'] = "";
errors['email_error'] = "";
errors['confirmEmail_error'] = "";
if (!USER_RE.test(publicUsername)) {
errors['publicUsername_error'] = "Try just letters and numbers, e.g: Ed, 69, Kelvin and etc";
return false;
}
if (!PASS_RE.test(password)) {
errors['password_error'] = "Password must be at least 6 characters long";
return false;
}
if (password != confirmPassword) {
errors['confirmPassword_error'] = "Password must match";
return false;
}
if (!EMAIL_RE.test(email)) {
errors['email_error'] = "Invalid email address";
return false;
}
if (email != confirmEmail) {
errors['confirmEmail_error'] = "Email must match";
return false;
}
return true;
}
this.handleSignup = function(req, res, next) {
"use strict";
var email = req.body.email,
confirmEmail = req.body.confirmEmail,
password = req.body.password,
confirmPassword = req.body.confirmPassword,
firstName = req.body.firstName,
lastName = req.body.lastName,
penName = req.body.penName,
publicUsername = req.body.publicUsername;
// set these up in case we have an error case
var errors = {'email': email,'publicUsername': publicUsername,'firstName': firstName,'lastName': lastName,'penName': penName}
if (validateSignup(publicUsername, password, confirmPassword, email, confirmEmail, errors)) {
users.addUser(email, password, firstName, lastName, penName, publicUsername, function(err, user) {
"use strict";
if (err) {
// this was a duplicate
if (err.code == '11000') {
errors['email_error'] = "Email already in use. Please choose another";
return res.render("register", errors);
}
// this was a different error
else {
return next(err);
}
}
sessions.startSession(user['_id'], function(err, session_id) {
"use strict";
if (err) return next(err);
res.cookie('session', session_id);
return res.redirect('/');
});
});
} else {
console.log("user did not validate");
return res.render("register", errors);
}
}
}
register.ejs
<div class="pure-u-1 text-center">
<form method="post" class="pure-form pure-form-aligned">
<fieldset>
<legend><h1 class="pure-splash-subhead midnightblue"><span class='lightblue'>Join</span> us today and start write things that <span class='maroon'>matter</span></h1>
</legend>
<p class="text-center red">{{email_error}}</p>
<div class="pure-control-group">
<label for="email">Email Address</label>
<input required name="email" class="pure-u-1-3" type="email" placeholder="Email Address">
</div>
<div class="pure-control-group">
<p class="text-center red">{{confirmEmail_error}}</p>
<label for="confirmEmail">Confirm Email Address</label>
<input required name="confirmEmail" class="pure-u-1-3" type="email" placeholder="Confirm Email Address">
</div>
<div class="pure-control-group">
<p class="text-center red">{{password_error}}</p>
<label for="password">Password</label>
<input required name="password" class="pure-u-1-3" type="password" placeholder="Password">
</div>
<div class="pure-control-group">
<p class="text-center red">{{confirmPassword_error}}</p>
<label for="confirmPassword">Confirm Password</label>
<input required name="confirmPassword" class="pure-u-1-3" type="password" placeholder="Confirm Password">
</div>
<br/>
<br/>
<div class="pure-control-group">
<label for="firstName">First Name</label>
<input required name="firstName" class="pure-u-1-3" type="text" placeholder="Your first name">
</div>
<div class="pure-control-group">
<label for="lastName">Last Name</label>
<input required name="lastName" class="pure-u-1-3" type="text" placeholder="and your last name">
</div>
<div class="pure-control-group">
<label for="penName"><abbr title="A pen name, nom de plume, or literary double, is a pseudonym adopted by an author. The author's real name may be known to only the publisher, or may come to be common knowledge.">Nom de plume</abbr></label>
<input required name="penName" class="pure-u-1-3" type="text" placeholder="Pen Name eg:J.R.R. Tolkien">
</div>
<div class="pure-control-group">
<label for="publicUsername">Public Username</label>
<input required name="publicUsername" class="pure-u-1-3" type="text">
<p class="text-center red">{{publicUsername_error}}</p>
</div>
<div class="pure-u-1 ">
<label for="conAndTerm" class="pure-checkbox">
<input id="conAndTerm" type="checkbox"> I've read the <a class='link blue'href="#">terms and conditions</a>
</label>
<br/>
<input type='submit'class="pure-button pure-button-secondary pure-u-1-3" value="Register">
<br/>
</div>
</fieldset>
</form>
</div>
i think it might be a silly mistake i hope there's nothing wrong with my HTML tag LOL
ok, so after short debugging session:
taken from Angular's docs
Since the role of forms in client-side Angular applications is
different than in classical roundtrip apps, it is desirable for the
browser not to translate the form submission into a full page reload
that sends the data to the server. Instead some javascript logic
should be triggered to handle the form submission in an
application-specific way.
For this reason, Angular prevents the default action (form submission
to the server) unless the element has an action attribute
specified.
so it seems like you did not provide proper handling for form submit :-)
so either provide one or add the 'action' attribute to the form - that should "fix" it
let me know if that makes sense to you.
You're missing the action attribute inside your form tag in register.ejs
It should be as following
<form method="post" action="/user/register" class="pure-form pure-form-aligned">
Now upon hitting "submit" a POST request will be generated and server shall look for a post type of route mentioned in action.
Another thing that's wrong with your code is ... you need to declare SessionHandler function using "exports" keyword as mentioned below.
exports.SessionHandler = async (req, res, next) => {
// Session handler with arrow function
}
OR
exports.SessionHandler = async function (req, res, next) {
// Session handler without arrow function
}
I believe you need a space so that type='submit'class becomes: type='submit' class.