Send data to Node.js server from HTML form

Question

I'm learning Node.js.

I have this in my server:

var http = require("http");
var url = require("url");

http.createServer(function(request, response){
    response.writeHead(200, {"Content-Type":"text/plain"});
    var params = url.parse(request.url,true).query;

    console.log(params);

    var a = params.number1;
    var b = params.number2;

    var numA = new Number(a);
    var numB = new Number(b);

    var numOutput = new Number(numA + numB).toFixed(0);

    response.write(numOutput);
    response.end();
}).listen(10000);

An URL like this: localhost:10000/?number1=50000&number2=1 echoes 50001 on my browser, so it works.

Without using Express, I need to send those 2 params through a form using HTML.

How can this be achieved?

http://stackoverflow.com/questions/15568851/how-i-can-send-data-from-html-form-to-node-js-function — Andy897, Oct 09 '13 at 21:10
@Andy897 — already looked at that. However, my teacher doesn't want me to use Express. — Oscar Swanros, Oct 09 '13 at 21:12
http://stackoverflow.com/questions/8811213/how-to-post-a-form-from-html-into-node-js-file — Andy897, Oct 09 '13 at 21:13

score 5 · Answer 1 · answered Oct 09 '13 at 21:23

The simple answer is <form method="get">. The browser will turn the form data into query string parameters that you're already handling.

If you need to POST, HTML forms are posted as the request entity-body. In node, a ClientRequest (the request variable in your example) emits a data event every time a chunk of the body arrives at the server. You will not receive the entire body at once. You must buffer until you've received the entire body, then parse the data.

This is hard to get right because of things like chunked vs normal Transfer-Encoding and the different ways browsers can submit form data. I'd just use formidable (which is what Express uses behind the scenes anyway), or at least study how it handles form posts if you absolutely must implement your own. (And really, do this only for educational purposes – I can't stress enough that you should use formidable for anything that might end up in production.)

score 3 · Answer 2 · answered Oct 27 '14 at 21:02

Your jade form (assuming you're using express) should look like this:

form(action="/" method="post")
    input( name="whateverSearch" placeholder="search" autofocus)

Then to pass the newly submitted datapoint whateverSearch you use req.body to find it (see below). Here, I've taken the data point and logged it to the console, and then submitted it to the DOM, as well as the title for the page.

router.post('/', function(req, res) {
    whateverSearch = req.body.whateverSearch;
    console.log(whateverSearch);
    res.render('index', { title: 'MyApp', inputData: whateverSearch});
});

score 2 · Answer 3 · answered Oct 10 '13 at 01:30

I solved my problem this way:

sum.js:

var http = require("http");
var url = require("url");

http.createServer(function(request, response){
    response.writeHead(200, {"Content-Type":"text/plain"});
    var params = url.parse(request.url,true).query;

    console.log(params);

    var a = params.number1;
    var b = params.number2;

    var numA = new Number(a);
    var numB = new Number(b);

    var sum = new Number(numA + numB).toFixed(0);

    response.write(sum);
    response.end();
}).listen(10001);

Index.html:

<html>
    <head>
            <title> Pedir random </title>

            <script type="text/javascript">
                function operacion(){
                        var n1 = document.getElementById("num1").value;
                        var n2 = document.getElementById("num2").value;

                        location.href = "http://localhost:10001" + "?number1=" + n1 + "&number2=" + n2;
                }
            </script>

    </head>

    <body>
            <h1>Inserte dos números </h1>
            <form id="forma1"> 
                <input type="text" id="num1"></input>
                <input type="text" id="num2"></imput>
                <input type="button" onClick="operacion()" id="enviar" value="enviar"></input>
            </form>
    </body>

<html>

Don't know if it's the right way of doing it, but it solved my needs.

There's zero reason to use JavaScript in the browser like this. Change it to `
` and `` and you're done. — josh3736, Oct 10 '13 at 03:11

Send data to Node.js server from HTML form

3 Answers3

Linked