Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Node.js - How to send data from html to express

this is form example in html:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS3 Contact Form</title> </head> <body> <div id="contact">     <h1>Send an email</h1>     <form action="/myaction" method="post">         <fieldset>             <label for="name">Name:</label>             <input type="text" id="name" name="name" placeholder="Enter your full name" />              <label for="email">Email:</label>             <input type="email" id="email" placeholder="Enter your email address" />              <label for="message">Message:</label>             <textarea id="message" placeholder="What's on your mind?"></textarea>              <input type="submit" value="Send message" />          </fieldset>     </form> </div> </body> </html> 

and this is node.js function that run on the server:

var sys = require('sys'),     http = require('http');     http.createServer(function (req, res) {             switch (req.url)                  case '/myaction':                         res.end(?????);                     break;             }     }).listen(8080); sys.puts('Server running at http://127.0.0.1:8080/'); 

I have 2 questions:

  1. How can I call myaction function in the node.js from the html page? Because the html file runs on port 80 and node.js on 8080 (when I try to move the node.js to port 80 it writes "// Unhandled 'error' event")
  2. In the node.js function where I put "?????" how can I get data from the html form. When I type req.html.body.name I don't get the data...
like image 372
royb Avatar asked Mar 22 '13 11:03

royb


People also ask

How do I send form data to express?

To get started with forms, we will first install the body-parser(for parsing JSON and url-encoded data) and multer(for parsing multipart/form data) middleware. var express = require('express'); var bodyParser = require('body-parser'); var multer = require('multer'); var upload = multer(); var app = express(); app.


2 Answers

Using http.createServer is very low-level and really not useful for creating web applications as-is.

A good framework to use on top of it is Express, and I would seriously suggest using it. You can install it using npm install express.

When you have, you can create a basic application to handle your form:

var express = require('express'); var bodyParser = require('body-parser'); var app     = express();  //Note that in version 4 of express, express.bodyParser() was //deprecated in favor of a separate 'body-parser' module. app.use(bodyParser.urlencoded({ extended: true }));   //app.use(express.bodyParser());  app.post('/myaction', function(req, res) {   res.send('You sent the name "' + req.body.name + '".'); });  app.listen(8080, function() {   console.log('Server running at http://127.0.0.1:8080/'); }); 

You can make your form point to it using:

<form action="http://127.0.0.1:8080/myaction" method="post"> 

The reason you can't run Node on port 80 is because there's already a process running on that port (which is serving your index.html). You could use Express to also serve static content, like index.html, using the express.static middleware.

like image 52
robertklep Avatar answered Oct 07 '22 19:10

robertklep


I'd like to expand on Obertklep's answer. In his example it is an NPM module called body-parser which is doing most of the work. Where he puts req.body.name, I believe he/she is using body-parser to get the contents of the name attribute(s) received when the form is submitted.

If you do not want to use Express, use querystring which is a built-in Node module. See the answers in the link below for an example of how to use querystring.

It might help to look at this answer, which is very similar to your quest.

like image 45
Programmerion Avatar answered Oct 07 '22 19:10

Programmerion