Develop Reference

Search bar using Express and Node in MVC model

I have made a search bar on the customers page of my website and whatever string the admin enters in the search bar will be sent as a get request, and based on the input I am trying to find all the data in MySQL db which contains the input string inside of the fullname field.
My website build as MVC model, using Express to display data and Node.js
This is my form
<form class="d-flex" method="GET">
<input class="form-control me-2 py-1" type="text" id="search" name="search" placeholder="Search customer name" aria-label="Search" value="<%= %>" />
<button class="btn btn-sm btn-secondary" type="submit">Search</button>
</form>
This is route in web.js file
router.get('/customer?search',authentication.handleAuthentication, authadmin.authAdmin,adminController.searchCustomer);
getCustomerByName() inside adminServices.js
let getCustomerByName = (name) => {
return new Promise(async (resolve, reject) => {
try {
let user = await db.User.find({ fullname: name });
if (user) {
console.log(user);
resolve(user);
} else {
resolve(user);
}
} catch (e) {
reject(e);
}
});
};
searchCustomer() inside adminController.js
let searchCustomer = async (req,res,next) =>{
let name = req.params.search;
let customer = await adminServices.getCustomerByName(name);
return res.render('admin/customer.ejs', {
customer: customer,
});
}
I had tried req.body.search / req.params.search / req.query but seem like it can't get the input.
The URL like this: http://localhost:8080/customer?search=mai. I couldn't find where is the problem because there is nothing show in the console. Are there any method I could try?

You need to add action tag to form element. Change route name to just customer and use req.query.search in controller.
router.get('/customer', authentication.handleAuthentication, authadmin.authAdmin, adminController.searchCustomer);
let searchCustomer = async(req, res, next) => {
let name = req.query.search; // change params to query
let customer = await adminServices.getCustomerByName(name);
return res.render('admin/customer.ejs', {
customer: customer,
});
}
<form class="d-flex" action="/customer" method="GET">
<input class="form-control me-2 py-1" type="text" id="search" name="search" placeholder="Search customer name" aria-label="Search" value="<%= %>" />
<button class="btn btn-sm btn-secondary" type="submit">Search</button>
</form>

Cannot POST / login.html

I'm having trouble sending data to the server using a form. I already made a register form that works just fine, and for the most part my client side javascript for the login form is very similar to the javascript for the register form, and I just can't figure out why it won't work. It just gives me "Cannot POST /login.html"
Here's the login form html:
<div class="loginTitle">
<h1>Login</h1>
</div>
<div class="loginFormLayout">
<form method=post id="loginForm">
<div class="loginFormText">
<label for="username">Username</label>
</div>
<div class="loginFormEntry">
<input type="text" placeholder="Enter Username" name="loginUsername" required>
</div>
<div class="loginFormText">
<label for="password">Password</label>
</div>
<div class="loginFormEntry">
<input type="password" placeholder="Enter Password" name=loginPassword required>
</div>
<button type="submit" class="loginButton">Log In</button>
</form>
</div>
And here's the client side javascript:
//Login as an existing user
const login = document.getElementsByClassName('loginButton');
const loginForm = document.getElementById('loginForm');
const loginURL = 'http://localhost:3000/loginUser';
loginForm.addEventListener('submit', (event) => {
event.preventDefault();
const formData = new FormData(loginForm);
let username = formData.get('loginUsername');
let password = formData.get('loginPassword');
loginForm.reset();
let user = { //Create a user object that will be sent to the backend and compared to the user database
username,
password
};
fetch(loginURL, { //Send the user object to the backend in JSON format to be checked against the database
method: 'POST',
body: JSON.stringify(user),
headers: {
'content-type': 'application/json'
}
})});
And the server side javascript for now, console logs are just to see if the info is getting up to the server
app.post('/loginUser', (req, res) => {
console.log(req.body.username);
console.log(req.body.password);
});
EDIT: I've also decided to post the info for my register form, which DOES work and uses similar logic to the login form. Maybe I'm missing something that isn't in the login logic
Register form html:
<div class="loginMenu">
<div class="loginTitle">
<h1>Register</h1>
</div>
<div id="registerWarning"></div>
<div class="loginFormLayout">
<form method="post" id="registerForm">
<div class="loginFormText">
<label for="username" id="newUsername">Username</label>
</div>
<div class="loginFormEntry">
<input type="text" placeholder="Create Username" name="username" required>
</div>
<div class="loginFormText">
<label for="password" id="newPassword">Password</label>
</div>
<div class="loginFormEntry">
<input type="password" placeholder="Create Password" name=password required>
</div>
<div class="loginFormText">
<label for="confirmPassword">Confirm Password</label>
</div>
<div class="loginFormEntry">
<input type="password" placeholder="Confirm Password" name="confirmPassword" required>
</div>
<button type="submit" class="registerButton">Register</button>
</form>
</div>
</div>
Register form client side javascript:
//Register a new user
const register = document.getElementsByClassName('registerButton');
const registerForm = document.getElementById('registerForm');
const registerURL = 'http://localhost:3000/createNewUser';
//When the user presses the register button, get the info from the form
registerForm.addEventListener('submit', (event) => {
event.preventDefault();
const formData = new FormData(registerForm);
let newUsername = formData.get('username');
let newPassword = formData.get('password');
let confirmPassword = formData.get('confirmPassword')
registerForm.reset();
//Make sure new password and confirm password are equal
if (newPassword == confirmPassword) {
if (newUsername != "" && newPassword != ""){ //Make sure user enters something for both fields
let newUser = { //Create an object to send to the back end
newUsername,
newPassword
};
fetch(registerURL, { //Send the newUser object to the backend in JSON format to be added to the database
method: 'POST',
body: JSON.stringify(newUser),
headers: {
'content-type': 'application/json'
}
});
}
}
else { //If newPassword and confirmPassword are not equal, ask the user to enter them correctly
const registerWarning = document.getElementById('registerWarning');
registerWarning.innerText = 'Password and Confirm Password do not match';
registerWarning.style.padding = "10px";
registerWarning.style.background = 'red';
};
});
Register form server-side javascript:
app.post('/createNewUser', (req, res) => {
let newUsername = req.body.newUsername;
let newPassword = req.body.newPassword;
let newUserData = 'INSERT INTO users (username, password) VALUES (?, ?)';//Use the question marks as placeholders
//Use bcrypt to hash the password before putting it in the database
bcrypt.hash(newPassword, saltRounds, function(err, hash) {
db.query(newUserData, [newUsername, hash], function(err, result) {
if (err) throw err;
console.log('New user registered');
});
});
});

I figured it out, thanks to #Rocky Sims for the help.
Basically, the register form doesn't exist on the login html page, which was throwing an error up about how that doesn't exist before it could even get to the login code. So I just had to make seperate register.js and login.js files, as the issue was due to them being in the same file.

Try wrapping your form method (post) in quotes ('') like so <form method='post' id="loginForm">
Also the value for the name attribute for your password input should by in quotes. Like so <input type="password" placeholder="Enter Password" name='password' required>

I think the problem is that you haven't told the server what to send back to the client when the POST /loginUser endpoint gets called. Try adding res.sendStatus(200); at the end of your POST /loginUser handler function (so right after console.log(req.body.password);).

Sending array field between HTML and Node JS

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'
}
]}

How to submit form only if condition is true

I'm trying to implement authentification system with express + node js. So far it's been good, but now I see that even when I refresh the page, the form submits to the server. This is how my code looks like:
Client side:
submit(e) {
let data = this.state; /// object with user's informations
e.preventDefault()
validate.form(this.state.username, this.state.email, this.state.password, this.state.confirm) // this returns true if everything is fine or returns the error string!
}
render() {
return (<div>
<form action="/login" onSubmit = {this.submit} method="post">
<p>Username:</p>
<input type="text" onChange = {this.getData} name="username" value = {this.state.username} />
<p>Email</p>
<input type="text" onChange={this.getData} name = "email" value = {this.state.email} />
<p>Password</p>
<input type="text" onChange={this.getData} name = "password" value = {this.state.password} />
<p>Confirm Password</p>
<input type="text" onChange={this.getData} name = "confirm" value = {this.state.confirm} />
<br/> <br/>
<input type="Submit" value='Submit' /> ///this is not working!
</form>
</div>)
}
Server side:
app.post('/login',(req, res) => {
console.log(req.body)
res.sendFile(__dirname + '/src/index.html')
db.query('INSERT INTO users SET ?', req.body, (err, res) => console.log("done!"))
})
TL;DR I'm looking to submit the form only if validate.form(username, email, password, confirm) returns true. I'm using bodyParser as module to parse the json!

Assuming that form.validate() is synchronous, you should call preventDefault only if form.validate() returns the error string.
submitForm(e) { // avoid to use 'submit' as method name
let data = this.state; /// object with user's informations
let formValid = validate.form(this.state.username, this.state.email, this.state.password, this.state.confirm);
if(formValid !== true) {
e.preventDefault()
}
// else, if formValid is true, the default behaviour will be executed.
}

Super slow post request to NodeJS server

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