I'm using Node.Js and express framework for my application.
I build HTML forms and upon submitting I'm not able to receive my form data on API request.
My HTML:
<form method="post" action="/create">
<input type="text" name="user.name" />
<input type="text" name="user.email" />
<input type="text" name="user.address.city" />
<input type="text" name="user.address.land" />
<input type="submit" value="Submit">
</form>
JSON object should been obtained at my API:
{
"user": {
"name": "toto",
"email": "toto#mail.com",
"address": {
"city": "yyyyy",
"land": "zzzz"
}
}
}
How to do this with Node.js, Express 4 and is there another library for this?
You can prepare your own middleware that parses the incoming form data using body-parser's urlencoded() and turns it into a structured JSON:
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
function setDeepValue(path, obj, value) {
const tokens = path.split('.');
const last = tokens.pop();
for (const token of tokens) {
if (!obj.hasOwnProperty(token)) {
obj[token] = {};
}
obj = obj[token];
}
obj[last] = value;
}
app.use(bodyParser.urlencoded(), function(req, res, next) {
let obj = {};
for (const key in req.body) {
setDeepValue(key, obj, req.body[key]);
}
req.body = obj;
next();
});
app.post('/create', function(req, res) {
console.log(req.body)
})
In your HTML code you are posting to a create route.
So in express you need to create that route
const express = require('express')
const bodyParser = require('body-parser')
const app = express()
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))
app.post('/create', function(req, res) {
console.log('----- MY BODY -----')
console.log(req.body)
// do something more clever
res.send('We posted to this route')
})
First we require express, then we require body-parser and finally initialize our express app.
We then use the json middlewere of body-parser to parse the body so that we can easily access it in our handler.
We then define a route to '/create' that accepts posts request (remember that your form is posting to this location).
All that our handler does is to console.log the body of the request, and then shows the message We posted to this route
Follow this guide repository specially created to guide freshers nodejs-frontend-sample-for-freshers
EDIT:
You can use Ajax call to submit form this will also help in Single Page Application
Client-side JS:
function submit() {
// JavaScript uses `id` to fetch value
let email = $("#email").val(),
name = $("#name").val(),
city = $("#city").val(),
land = $("#land").val();
// Can validate each field here and show error like:
if ( validateEmail(email) ) {
$("#emailError").addClass("hide");
} else {
$("#emailError").removeClass("hide");
return;
}
// form request data, doing this will get you data in correct form at NodeJs API
let data = {
user: {
email,
name,
address: {
city,
land
}
}
};
$.ajax({
"url": "/create",
"method": "POST",
"data": data
})
.then( result => {
// On success empty all the input fields.
$("#email").val('');
$("#name").val('');
$("#city").val('');
$("#land").val('');
// Message to notify success submition
alert("Successfully added user.");
return;
})
.catch( err => {
// Notify in case some error occured
alert("An error occured.");
return;
});
}
// Validate Email based upon pattern
function validateEmail (email) {
if ( email && email.match(/^([A-z0-9_.]{2,})([#]{1})([A-z]{1,})([.]{1})([A-z.]{1,})*$/) ) {
return true;
}
return false;
}
HTML:
<form>
<input type="text" id="name" />
<input type="text" id="email" />
<span id="emailError" class="hide error">Valid Email Required</span>
<input type="text" id="city" />
<input type="text" id="land" />
<p onclick="submit()">Submit</p>
</form>
Would recommend you to use cors.js too like:
const cors = require('cors');
// Cross-Origin Resource Sharing
app.use(cors());
You can get object in two ways:
1: Using no extra module something like this
app.post('/create', function (request, response, next) {
let body = [];
request.on('error', (err) => {
console.error(err);
}).on('data', (chunk) => {
body.push(chunk);
}).on('end', () => {
body = Buffer.concat(body).toString();
console.log(body); // Your object
request.body = body; // Store object in request again
next();
});
}, (req, res) => {
console.log(req.body); // This will have your object
});
Using body-parser with express:
```
// configure the app to use bodyParser() to extract body from request.
// parse urlencoded types to JSON
app.use(bodyParser.urlencoded({
extended: true
}));
// parse various different custom JSON types as JSON
app.use(bodyParser.json({ type: 'application/*+json' }));
// parse some custom thing into a Buffer
app.use(bodyParser.raw({ type: 'application/vnd.custom-type' }));
// parse an HTML body into a string
app.use(bodyParser.text({ type: 'text/html' }));
app.post('/create', function (request, response, next) {
console.log(request.body); // `body-parser did what I did earlier`
});
```
Related
I made a simple nodejs server which serves a html page to the user.The page contains a input text box of userID. When the user presses the button submit, I take that userID entered by the user and put it in form Data and send it to my server function (submitForTest) through POST method.
Now, inside my function of nodejs which handles submitForTest, I tried to access the userID , but I was getting res.body as {} , so not able to figure out how to access userID here.
Can anyone please point what I need to get the userID at my node js code.
My HTML file :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<label>User ID</label>
<div>
<input type="text" id="userid" >
</div>
</div>
<div>
<div>
<button type="submit" onclick="submitForTest()">Submit</button>
</div>
</div>
<script type="text/javascript">
function submitForTest()
{
var userID = document.getElementById('userid').value;
let formData = new FormData();
formData.append("userID", userID);
//alert("hello");
fetch('http://MY-SERVER:3000/submitForTest', {method: "POST", body: formData});
}
</script>
</body>
</html>
My Node js file :
'use strict'
const fs = require("fs")
const express = require('express')
var path = require('path')
const app = express()
var bodyParser = require('body-parser')
app.use( bodyParser.json() ); // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({ // to support URL-encoded bodies
extended: true
}));
var jsonParser = bodyParser.json();
app.get('/',function(req,res) {
res.sendFile('small.html');
});
app.post('/submitForTest', function(req, res) {
//want to print userID here .. but the below is coming as {} here ..
console.log(req.body);
})
// Tell our app to listen on port 3000
app.listen(3000, function (err) {
if (err) {
throw err;
}
console.log('Server started on port 3000')
})
Please help.
Regards
The problem is FormData is sending body encoded as multipart/form-data. You'll have to add middleware able to handle multipart body format. Busboy or multer for example.
Example of using multer to upload a file and send userID field:
// --- form
<form action="/submitForTest" enctype="multipart/form-data" method="post">
<input type="file" name="uploaded_file">
<input type="text" name="userID">
<input type="submit" value="Submit">
</form>
// --- server
var multer = require('multer')
var upload = multer({ dest: './uploads/' }) // where the uploaded files will be stored
app.post('/submitForTest', upload.single('uploaded_file'), function (req, res) {
// req.file is the name of your file in the form above, here 'uploaded_file'
// req.body will hold the text fields, if there were any
console.log(req.file, req.body)
});
Or to send your data in urlencoded or json format. Something like that for json for example:
function submitForTest()
{
var userID = document.getElementById('userid').value;
fetch('http://MY-SERVER:3000/submitForTest', {
method: "POST",
headers: {
'Content-type': 'application/json',
},
body: JSON.stringify({ userID }),
});
}
I am trying to call enrollUser function on onclick event in index.html. enrollUser() is also defined in index.js. Still it giving me an error on onclick event.
Heres are codes for your reference. Let me what's wrong in these..
enrollUser.js
'use strict';
const FabricCAServices = require('fabric-ca-client');
const { Wallets } = require('fabric-network');
const fs = require('fs');
const yaml = require('js-yaml');
const path = require('path');
async function main(uname) {
try {
// load the network configuration
let connectionProfile = yaml.safeLoad(fs.readFileSync('../gateway/connection-uni.yaml', 'utf8'));
// Create a new CA client for interacting with the CA.
const caInfo = connectionProfile.certificateAuthorities['ca.uni.example.com'];
const caTLSCACerts = caInfo.tlsCACerts.pem;
const ca = new FabricCAServices(caInfo.url, { trustedRoots: caTLSCACerts, verify: false }, caInfo.caName);
console.log(`----------------- Creating ID for: ${uname} -----------------`)
//function body
}
module.exports.execute = main;
index.js
const express = require('express');
const app = express();
const cors = require('cors');
const port = 3000;
const enrollUser = require('./enrollUser');
app.use(cors());
app.use(express.json()); // for parsing application/json
app.use(express.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded
app.set('title', 'Educhain App');
app.get('/', function (req, res) {
res.sendFile( __dirname + "/" + "index.html" );
});
app.post('/enrollUser', (req, res) => {
enrollUser.execute(req.body.uname)
.then(() => {
console.log('User credentials added to wallet');
const result = {
status: 'success',
message: 'User credentials added to wallet',
uname: req.body.uname
};
res.json(result);
})
.catch((e) => {
const result = {
status: 'error',
message: 'Failed',
error: e
};
res.status(500).send(result);
});
});
app.listen(port, () => console.log(`Distributed Certification App listening on port ${port}!`));
index.html
<script type="text/javascript" src="./app.js"></script>
<input type="text" placeholder="Enter Username" name="uname" id="uname" required>
<button type="submit" id="enrollUser" onclick="enrollUser()">Login</button></div>
app.js
let enrollUser = () => {
const uname = document.getElementById('uname').value;
$.post('http://localhost:3000/enrollUser', {uname: uname})
.done((result) => {
console.log(result);
if (result.status === 'success') {
$(".studentTable tbody").append(
"<tr>" +
"<td>1</td>" +
"<td id='uname'>" + result.uname + "</td>" +
"</tr>"
);
} else {
$(".error-toast").toast('show');
}
})
.fail((xhr, status, error) => {
$(".error-toast").toast('show');
});
};
Also giving error to app.js in index.html--> GET http://localhost:3000/app.js net::ERR_ABORTED -- > 404 (Not Found)
Not getting any error on console, but it's on chrome developer tool. Please let me know what's missing.
I am using the same structure as this project https://github.com/avi-githb/Certification_Network_Hyperledger_fabric/tree/master/application
To make this work the way you explained in the comments you would need to run the server first. For you, this is the app.js file.
Make sure to have node installed and run this command in your project directory.
node index.js
You will know the server running by seeing a message with the port in the console.
Secondly, modify your HTML to contain a form, then pass the form on submitting to the endpoint enrollUser
<form action="http://localhost:3000/enrollUser" method="POST">
<input type="text" placeholder="Enter Username" name="uname" id="uname" required>
<button type="submit">Login</button>
</form>
This should work well for you, learn more about forms here.
So, I am using Node.js with express to run a server and make a calculator. After that, I downloaded body-parser, to get the access of the numbers the user inputs and use it to calculate the result, but for some reason whenever I try to log one of the numbers on console, just to make sure that it works, it doesn't get logged.
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.urlencoded({extended: true}));
app.get('/', (req, res) => {
res.sendFile(`${__dirname}/index.html`);
})
app.post('/', (req, res) => {
console.log(req.body);
res.send('Thanks for the information');
})
app.listen(3000, () => console.log('Server Started'));
Your form will look something like this
<form id="post-form" action="/your/post/url" method="POST">
<div class="form-control">
<label for="title">Number</label>
<input type="number" name="number" id="number">
</div>
<button type="submit">
Submit
</button>
</form>
Or in your script tag, you can do something like this.
with this approach, the form gets submitted without reload
// Note: Optional approach (without reloading the page)
// Just above HTML only code also works perfectly fine
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const number= document.getElementById('number')
document.getElementById('post-form').addEventListener('submit', (e) => {
e.preventDefault();
axios
.post('/your/post/url', { number: number.value })
.then((res) => {
//handle response here
})
.catch((err) => { //handle err here});
});
<script>
then in you express app you can do
app.post('/you/post/url/', (req,res,next) => {
// this is how you accces title from you form
// here title will hold value "Value Here"
const { number} = req.body
//calculate here
number = number * number + number
// then send the response
res.send(`calculated number: ${number}`)
});
I am a beginner to react and node and this will be a very basic problem.
I am creating a basic react fronted with a node backend. I setup mysql database connection and all set. I want to insert user details using /createUser api call to store data to database.
I run the server/app.js, react serve and index.js which contained my listener for /createUser.
When I input username,password using my form, empty req.body object will be returned in express.post method while I am expecting the username and password I entered.
In other case, when I start the listener, react front is not loading by giving the error below.
GET http://localhost:3000/%PUBLIC_URL%/manifest.json 404 (Not Found)
manifest.json:1 Manifest: Line: 1, column: 1, Unexpected token.
It seems like node component cannot access my manifest file. Am I correct?
index.js
const express = require('express');
const bodyParser = require('body-parser');
const store = require('./store');
const app = express();
app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json({ type: 'application/*+json' }));
app.use(bodyParser.json());
app.post('/createUser', (req, res) => {
console.log(req.body);
store
.createUser({
username: req.body.username,
password: req.body.password
})
.then(() => res.sendStatus(200))
})
app.listen(3001, () => {
console.log('Server running on http://localhost:3001')
})
login.js
import React, { Component } from 'react';
import classes from './Login.css';
function post (path, data) {
console.log(data);
return window.fetch(path, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
}
function handleLoginClick(e) {
e.preventDefault();
console.log('The link was clicked.');
const Login = document.querySelector('.Login');
const username = Login.querySelector('.username').value;
const password = Login.querySelector('.password').value;
post('/login', { username, password })
.then(({ status }) => {
if (status === 200) alert('login success')
else alert('login failed')
})
}
function handleSignupClick(e) {
e.preventDefault();
console.log('The link was clicked sign up.');
const CreateUser = document.querySelector('.CreateUser')
const username = CreateUser.querySelector('.username').value;
const password = CreateUser.querySelector('.password').value;
post('/createUser', { username, password })
}
class Login extends Component {
componentDidMount() {
}
componentWillUnmount() {
}
render() {
return (
<div>
<form className="Login">
<h1>Login</h1>
<input type="text" className="username" placeholder="username"/>
<input type="password" className="password" placeholder="password"/>
<input type="submit" value="Login" onClick={handleLoginClick}/>
</form>
<form className="CreateUser">
<h1>Create account</h1>
<input type="text" className="username" placeholder="username"/>
<input type="password" className="password" placeholder="password"/>
<input type="submit" value="Create" onClick={handleSignupClick}/>
</form>
</div>
);
}
}
export default Login;
What's wrong with my code? Can someone please explain me.
my code : https://github.com/indunie/tms2
Try to replace bodyParser configuration to following lines of code:
app.use(bodyParser.json({ limit: '100mb' }));
app.use(bodyParser.urlencoded({ limit: '100mb', extended: false }));
This might help you
solved [https://github.com/expressjs/express/issues/3881][1]
There are two solutions here:
Change the URL to http://localhost:3001/manifest.json to match how you have express.static setup.
Change express.static to app.use('/public', express.static('public')); such that http://localhost:3001/public/manifest.json will refer to the given file.
I've found docs teaching on how to implement Twilio on server-side using Node, however, I couldn't find an end-end example where I can send a SMS coming from my client app.
Can anyone tell me what the implementation would look like to send a post custom SMS from client to server?
Disclaimer my server file is named as app.js and my client file is named as index.js
**1- This is what I have currently setup on my app.js
const express = require('express');
const app = express();
const path = require('path');
const twilio = require('twilio');
const bodyParser = require('body-parser');
//JSON DATA
const guests= require('./public/data/Guests');
app.use(bodyParser.urlencoded({extended: false}));
app.use(express.static('public'));
//SET PORT
app.set("port", process.env.PORT || 3000);
//GET JSON DATA
app.get('/data', function(req, res) {
Promise.all([guests])//combine requests into one object
.then(([guests]) => {
res.send({guests});
});
});
//CATCHALL
app.get("/*", function(req,res){
let file = req.params[0] || "/views/index.html";
res.sendFile(path.join(__dirname, "/public/", file));
});
//LISTEN ON PORT
app.listen(app.get("port"), function(){
console.log("Listening on port: " , app.get("port"));
});
let client = new twilio('xxxxxxxxxx', 'xxxxxxxxxxxxx');
app.post('/sms', (request, result) => {
const message = request.body.message;
client.messages.create({
to: +1847820802492359,
from: +8475302725792530 ,
body: message
}).then(() => {
// message sent successfully, redirect to the home page.
res.redirect('/');
}).catch((err) => {
console.error(err);
res.sendStatus(400);
});
});
-2 am trying to process a dynamic message in my index.js. The code works on the DOM properly, it is just the SMS with Twilio that isn't posting the message to the server
$(function() {
$.ajax({
type: "GET",
url: "/data",
success: res => {
//console.log(res);
handleMessage(res);
},
error: err => console.log(err)
});
//message method
let handleMessage = (res) => {
const getFirstName = res.guests.map(name => name.firstName);
//populate drop-down select
let handleSelect = () => {
//adds first names to select dropDown
$.each(getFirstName, function(i, value) {
$('#selectName').append($('<option>').text(value).attr('value', value));
});
};
handleSelect();
let handleSubmit = () => {
$("#form").submit(function(e) {
e.preventDefault();
let name = $('#selectName').val();
let greetGuest = `Welcome ${name}!`;
console.log(greetGuest);
//append to Dom
$('.showMessage').append(`<div class="newMessage"><span>${greetGuest}</span></div>`);
});
};
handleSubmit()
};
});
-3 HTML form
<form id="form" action="/sms" method="POST">
<label>
<label for=selectName>Guest
<select id="selectName" class="select " name="sms">
</select>
</label>
</label>
<input type="submit" value="send" class="btn btn-success" />
</form>
Am I having an asynchronicity issue here?
Twilio developer evangelist here.
I can give you a basic example here, which should give you a good idea of how to achieve this. I'll start with the server side, which you already have the basics of.
Firstly, I would recommend you use a POST request rather than a GET, simply because GETs can be easily repeated by users or cached by proxies. I assume you are using Express as the web application server. You will also need the body-parser module to read the data that we send from the client side.
const Twilio = require('twilio');
const express = require('express');
const bodyParser = require('body-parser');
const app = new express();
app.use(bodyParser.urlencoded({extended: false}));
app.use(express.static('public'));
const twilio = new Twilio(YOUR_ACCOUNT_SID, YOUR_AUTH_TOKEN);
app.post('/messages', (request, result) => {
const message = request.body.message;
twilio.messages.create({
to: TO_NUMBER,
from: FROM_NUMBER,
body: message
}).then(() => {
// message sent successfully, redirect to the home page.
res.redirect('/');
}).catch((err) => {
console.error(err);
res.sendStatus(400);
});
});
app.listen(3000);
This sets up a server which is serving static files from a public directory and then has one endpoint, POST to /messages, that sends a message.
We now need to create the client side. I shall do this in HTML only for simplicity. You need a form that will POST to the /messages endpoint with, in this case, a single field for the message. I've included a textarea to write the message in and a button to submit the form. If you save this as index.html in the public directory where you run the application from then it should work.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Send a message!</title>
</head>
<body>
<h1>Send a message!</h1>
<form action="/messages" method="POST">
<label for="message">What would you like to send?</label>
<textarea name="message" id="message"></textarea>
<button type="submit">Send!</button>
</form>
</body>
</html>
Let me know if that helps at all.
Update
So you're looking to make the request to the server using Ajax so your page doesn't reload and you can display a different message. Your current form seems to have removed the message textarea that I added, I'll put it back in again. I assume you also want to send the message to whichever guest you are welcoming at the time, but I don't know how that works in your system, so I'm going to avoid that for now and hopefully you can sort it out.
So, if you update your form to something like this:
<form id="form" action="/sms" method="POST">
<label>
<label for=selectName>Guest
<select id="selectName" class="select " name="sms">
</select>
</label>
</label>
<label for="message">Message</label>
<textarea id="message" name="message"></textarea>
<input type="submit" value="send" class="btn btn-success" />
</form>
Then you need to add to your JavaScript a way to actually submit the form (since you are preventing the submission with e.preventDefault().
const $form = $('#form');
$form.submit(function(e) {
e.preventDefault();
let name = $('#selectName').val();
let greetGuest = `Welcome ${name}!`;
console.log(greetGuest);
$.ajax({
url: $form.attr('action'),
type: $form.attr('method'),
data: $form.serialize(),
success: function(data) {
console.log("The message has been sent");
},
error: function() {
console.error("The message couldn't be sent");
console.error(...arguments);
}
})
//append to Dom
$('.showMessage').append(
`<div class="newMessage"><span>${greetGuest}</span></div>`
);
});
In this case we are hooking into the callback for the submit event to make a new $.ajax request to the form's action, using the method (POST), and including the form data (which we get from $form.serialize()). We then setup success and error callbacks as you've done at the top of the function.
Let me know if this helps.