I am trying to send data from html page to NodeJS server .
my html code is :
<body>
<nav>
<ul>
<li>
<a href="#" class="button add">Add Product</a>
<div class="dialog" style="display:none">
<div class="title">Add Product</div>
<form action="addevent" method="get">
<input id = "name" name="name" type="text" placeholder="Product Name"/>
<input name="code" type="text" placeholder="Product Code"/>
<input name="category" type="text" placeholder=" Category"/>
<input name="brand" type="text" placeholder="Brand"/>
<input type="submit" value="Ok"/>
</form>
</div>
</li>
<li class="radio">
<a href="#" class="button active"></a>
<a href="#" class="button"></a>
<a href="#" class="button"></a>
</li>
</ul>
</div>
</nav>
<p></p>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
and my server code is :
server.js
var express = require("express"),
app = express(),
bodyParser = require('body-parser'),
errorHandler = require('errorhandler'),
methodOverride = require('method-override'),
hostname = process.env.HOSTNAME || 'localhost',
port = parseInt(process.env.PORT, 10) || 4004,
publicDir = process.argv[2] || __dirname + '/public';
var exec = require('child_process').exec;
var fs = require('fs');
//Show homepage
app.get("/", function (req, res) {
res.redirect("/index.html");
});
app.get("/addevent", function (req, res){
res.send('You sent the name "' + req.body.name + '".');
});
//Search page
app.use(methodOverride());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(express.static(publicDir));
app.use(errorHandler({
dumpExceptions: true,
showStack: true
}));
console.log("Server showing %s listening at http://%s:%s", publicDir, hostname, port);
app.listen(port);
but it gives following error when i submit the form from html page !
Connect 500 TypeError: Cannot read property 'name' of undefined at app.use.bodyParser.urlencoded.extended (/home/shubham/Music/pricesync/server/server.js:17:45) at Layer.handle [as handle_request] (/home/shubham/Music/pricesync/server/node_modules/express/lib/router/layer.js:95:5) at next (/home/shubham/Music/pricesync/server/node_modules/express/lib/router/route.js:131:13) at Route.dispatch (/home/shubham/Music/pricesync/server/node_modules/express/lib/router/route.js:112:3) at Layer.handle [as handle_request] (/home/shubham/Music/pricesync/server/node_modules/express/lib/router/layer.js:95:5) at /home/shubham/Music/pricesync/server/node_modules/express/lib/router/index.js:277:22 at Function.process_params (/home/shubham/Music/pricesync/server/node_modules/express/lib/router/index.js:330:12) at next (/home/shubham/Music/pricesync/server/node_modules/express/lib/router/index.js:271:10) at expressInit (/home/shubham/Music/pricesync/server/node_modules/express/lib/middleware/init.js:33:5) at Layer.handle [as handle_request] (/home/shubham/Music/pricesync/server/node_modules/express/lib/router/layer.js:95:5)
In a GET HTTP request there is no req.body
that's why the undefined error. The values of the form fields will be passed as query string hence you need to read query string values from the req
object.
Try putting the routes below the middleware, and using the 'POST' http verb.
var express = require("express"),
app = express(),
bodyParser = require('body-parser'),
errorHandler = require('errorhandler'),
methodOverride = require('method-override'),
hostname = process.env.HOSTNAME || 'localhost',
port = parseInt(process.env.PORT, 10) || 4004,
publicDir = process.argv[2] || __dirname + '/public';
var exec = require('child_process').exec;
var fs = require('fs');
//Search page
app.use(methodOverride());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(express.static(publicDir));
//Show homepage
app.get("/", function (req, res) {
res.redirect("/index.html");
});
app.post("/addevent", function (req, res){
res.send('You sent the name "' + req.body.name + '".');
});
app.use(errorHandler({
dumpExceptions: true,
showStack: true
}));
console.log("Server showing %s listening at http://%s:%s", publicDir, hostname, port);
app.listen(port);
Make sure to change the form method to "post", as well.
In order to send data from an HTML form to server, best practice is to use POST method. Default encoding for form submission is:
Content-Type:application/x-www-form-urlencoded
In Express, you have used bodyParser middleware with json() method which does not work as the data you send is not JSON encoded.
You bodyParser needs to be before your route like this:
app.use(bodyParser.urlEncoded());
app.post("/addevent", function (req, res){
....
I recommend that you read beginners book
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.