Data to server using node and javascript

Question

I have form on my page

    <form method="post" action="/data" onsubmit="return postData()">      
      <input type="password" name="passwd" placeholder="Password">     
      <input type="text" name ="name" placeholder="UserName">
      <input type="submit" class="btn btn-warning" value="Submit"/>
  </form>

function postData(){
    var form   = document.querySelector("form");
    var inputs = form.querySelectorAll('input');
    var data   = {}
          Array.prototype.forEach.call( inputs , function(x){
            if( x.type != 'submit')
                data[x.name] = x.value;
          })  
    var req = new XMLHttpRequest();
    req.open('POST' , form.action , true);
    req.send(JSON.stringify(data));

}

and my server

var express = require("express");
var app     = express();


app.get('/' , function( req, res ){
    res.sendfile("index.html");
})


app.post('/',function( req , res){
    console.log('got data ', req.body)
})
app.listen(8080)

It prints "got data" on post but it always write undefined for req.body where should be data i sent stored , why is this throwing undefined?

score 1 · Answer 1 · answered Aug 20 '16 at 22:21

1

You need to use the body-parser module

Install with

$ npm install body-parser

Then, change your app to

var express = require("express");
var app     = express();
var bodyParser = require('body-parser');

app.use(bodyParser.json()); // for parsing application/json
app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded

app.get('/' , function( req, res ){
    res.sendfile("index.html");
})

app.post('/',function( req , res){
    console.log('got data ', req.body)
})
app.listen(8080)

answered Aug 20 '16 at 22:21

Alex

37,502
51
204
332

how would i do it without body parser? – Josh Aug 20 '16 at 22:24
you wouldn't. not without re-writing body-parser. why would you need to? – Alex Aug 20 '16 at 22:25
see here - https://www.quora.com/What-exactly-does-body-parser-do-with-express-js-and-why-do-I-need-it – Alex Aug 20 '16 at 22:25
even with it , it just shows empty object instead of data , when i console log the data being post into the server , it shows correct data. – Josh Aug 20 '16 at 22:32
i don't get why you're using the function postData() - you don't need to do that... just post it as a form? – Alex Aug 20 '16 at 22:48
it does same thing. empty req.body object. – Josh Aug 20 '16 at 22:51

score 0 · Answer 2 · edited May 23 '17 at 11:51

There is no problem with your input data reader code in Chrome, MSIE, Firefox, but you forgot to add return false; so your code will navigate away by Chrome and MSIE.

<form method="post" action="/data" onsubmit="return postData()">      
  <input type="password" name="passwd" placeholder="Password">     
  <input type="text" name ="name" placeholder="UserName">
  <input type="submit" class="btn btn-warning" value="Submit"/>
</form>

<script>
function postData(e){
    var form   = document.querySelector("form");
    var inputs = form.querySelectorAll('input');
    var data   = {}
          Array.prototype.forEach.call( inputs , function(x){
            if( x.type != 'submit')
                data[x.name] = x.value;
          })  

    console.log(form.action, JSON.stringify(data))
    return false;
}

</script>

You don't have a content-type header either.

    <form method="post" action="/data" onsubmit="return postData()" enctype="application/x-www-form-urlencoded">      
      <input type="password" name="passwd" placeholder="Password">     
      <input type="text" name ="name" placeholder="UserName">
      <input type="submit" class="btn btn-warning" value="Submit"/>
  </form>

function postData(){
    var form   = document.querySelector("form");
    var inputs = form.querySelectorAll('input');
    var data   = {}
          Array.prototype.forEach.call( inputs , function(x){
            if( x.type != 'submit')
                data[x.name] = x.value;
          })  
    var req = new XMLHttpRequest();
    req.open('POST' , form.action , true);
    req.setRequestHeader("content-type", "text/json");
    req.send(JSON.stringify(data));

}

Still it won't work with express. At least according to this https://stackoverflow.com/a/9931478/607033 you need to write a custom middleware to access body content. I don't have time to investigate further, Alex is right, you should use the bodyParser.

it still outputs empty object for req.body – Josh Aug 21 '16 at 13:19 — Josh, Aug 21 '16 at 13:19

Data to server using node and javascript

2 Answers2