0

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?

2 Answers 2

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)
Sign up to request clarification or add additional context in comments.

6 Comments

how would i do it without body parser?
you wouldn't. not without re-writing body-parser. why would you need to?
see here - quora.com/…
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.
i don't get why you're using the function postData() - you don't need to do that... just post it as a form?
|
0

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.

1 Comment

it still outputs empty object for req.body

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.