How to retrieve data from post request in javascript

Question

I have a form with two fields one is text field and another is select field. on submit i am posting the form. can someone tell me how to retrieve the form data in server using javasctipt.

<form id="createGameForm" action="/createGame" method="post" data-async>
    <div><label for="serverName">Server Name:</label><input type="text" id="serverName"                                 required>
    </div>
    <div>
        <label for="noOfPlayers">Number Of Players:</label>
        <select id="noOfPlayers" required>
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select>
    </div>
    <input type="submit" value="Create Server" aria-hidden="true" form="createGameForm"    class="btn>
</form>

Its an Express app.

app.post('/createGame', function (req, res) {
    //how to get data from req object.
    res.render('server.jade');
});

Do you mean you want to get the variables in the url? example.com/?id=123 — ndugger, Apr 22 '14 at 19:04
No. If it is a GET method it will send the variables in the URL. But I want it to be POST method. In POST method values won't be there in the URL. So, how can I get the values? — Hemanth S R, Apr 22 '14 at 19:07
I guess I'm not understanding the "retrieve the form data in server" part. Perhaps your question is not specific enough. Are you looking to fetch the data via a second Ajax request or read whatever is send backdown during the form post? — ming_codes, Apr 22 '14 at 19:22
I am looking to read whatever is sent back down during the form post. — Hemanth S R, Apr 22 '14 at 19:24

score 1 · Answer 1 · answered Apr 22 '14 at 19:37

1

You can use the body-parser middleware https://github.com/senchalabs/connect?source=c#middleware

Then do req.body for the post data.

answered Apr 22 '14 at 19:37

nowk

32,822
2
35
40

score 0 · Answer 2 · answered Apr 22 '14 at 19:10

0

For node.js there is at least busboy (and connect-busboy if you are using Express). I am also working on reformed which provides a layer on top of busboy.

answered Apr 22 '14 at 19:10

mscdex

104,356
15
192
153

score 0 · Answer 3 · edited May 23 '17 at 12:22

There are multiple ways to handle this depending on what you are looking for.

Method 1:

You can use JavaScript to cancel form submission, read input values from the form, then submit the form via Ajax post request.

$('form').submit(function(evt) {
    evt.preventDefault() // This cancels the form request.

    $.ajax({
        type: 'POST',
        url: evt.target.action,
        data: $(evt.target).serialize(),
        success: function(data) {
             // read data here
        }
    });
})

Method 2:

You can point your form to an invisible iframe then read it from the iframe.

<form id="createGameForm" action="/createGame" method="post" data-async target="my_iframe">
    ... snip ...
</form>

<iframe name="my_iframe" src="about:blank" style="visibility: hidden;"></iframe>

Then read it

$('iframe').load(function(evt) {
    var iframe = evt.target
      , doc = iframe.contentWindow.document || iframe.contentDocument || window.frames[iframe.id].document
      , responseText = doc.body.textContent
})

There's another question here that has more details: How do you post to an iframe?

A caveat of method 2 is that the browser is open to do stuff with it before you get to handle the content. You need to set the content-type header on your response to text/plain to prevent browser from messing with it.

Disclaimer: Above code is not tested.

score -1 · Answer 4 · edited Apr 15 '15 at 03:22

There are multiple ways to handle this depending on what you are looking for.

Method 1:

You can use JavaScript to cancel form submission, read input values from the form, then submit the form via Ajax post request.

$('form').submit(function(evt) {
    evt.preventDefault() // This cancels the form request.

$.ajax({
    type: 'POST',
    url: evt.target.action,
    data: $(evt.target).serialize(),
    success: function(data) {
         // read data here
       }
    });
})

Method 2:

You can point your form to an invisible iframe then read it from the iframe.

... snip ...

Then read it

$('iframe').load(function(evt) {
    var iframe = evt.target
      , doc = iframe.contentWindow.document || iframe.contentDocument || window.frames[iframe.id].document
      , responseText = doc.body.textContent
})

There's another question here that has more details: How do you post to an iframe?

A caveat of method 2 is that the browser is open to do stuff with it before you get to handle the content. You need to set the content-type header on your response to text/plain to prevent browser from messing with it.

Disclaimer: Above code is not tested.

above answer could works!

Please don't add "thanks" or "this answer worked" as answers. Invest some time in the site and you will gain sufficient [privileges](http://stackoverflow.com/privileges/vote-up) to upvote answers you like, which is the Stack Overflow way of saying thank you. — Nathan Tuggy, Apr 15 '15 at 01:48

How to retrieve data from post request in javascript

4 Answers4