CODEWITHSUNDEEP
javascriptnode.jsexpress
Josh
Josh

Reputation: 31

Data to server using node and javascript

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?

Upvotes: 0

Views: 55

Answers (2)

inf3rno
inf3rno

Reputation: 26147

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.

Upvotes: 0

Alex
Alex

Reputation: 38529

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)

Upvotes: 1

Related Questions