body-parser(node.js) not able to understand form POST using fetch browser api

Question

on sending form data using fetch api as 'application/x-www-form-urlencoded' from browser to nodejs server, body-parser at node.js server not showing data sent but some object that is not understandable.

Here is the html form code:

<body>
<form action="#" id="formToSubmit">
    <input type="text" name="name" value="xyz">
    <input type="text" name="phone" value="7777777777">
    <input type="submit" value="submit" onClick="submitForm()">
</form>

<script>
    function submitForm(){
        var form = new FormData(document.getElementById("formToSubmit"));
        fetch("http://localhost:8080/ppum", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'                 
            },
            body: form // problem is here
        })
        .then(res => res.json())
        .then(data => console.log(data));

    }
</script>

Here is the node server code for body parser:

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

Here is the output of "req.body" at server:

{"------WebKitFormBoundary5jfSRwRQ4GjgeApo\r\nContent-Disposition: form-data; name":"\"name\"\r\n\r\nxyz\r\n------WebKitFormBoundary5jfSRwRQ4GjgeApo\r\nContent-Disposition: form-data; name=\"phone\"\r\n\r\n7777777777\r\n------WebKitFormBoundary5jfSRwRQ4GjgeApo--\r\n"}

problem is how to send data as 'application/x-www-form-urlencoded' from client side.

why is the output like as shown and how to correct it.

Note:was previously using stackoverflow.com/a/37562814/3690154 and it workes. if you have some suggesting on how to convert FormData to something like in this answer that will be highly appreciated

@philipp body-parser is able to understand body like 'lorem=ipsum&name=binny' but not using FormData(). — devprashant, Jun 06 '17 at 11:09

score 1 · Answer 1 · answered Jun 06 '17 at 11:06

You have several problems.

Including your form data

new FormData("formToSubmit");

The argument you pass here needs to be a form. You are passing it a string.

new FormData(document.getElementById("formToSubmit"));

Content Type

Setting the Content-Type header manually won't cause fetch to encode the content in that format.

You are passing a FormData object, so the content will be encoded as a multipart request.

You need to use a body parser that can handle that format. See this question for the details of how to do that.

Submit buttons

Submit buttons submit forms.

You need to prevent the browser from leaving the page after starting the ajax request.

Using the 1990s style event binding you are using, you need to change:

onClick="submitForm()"

to

onclick="submitForm(); return false;"

You should switch to a modern method though.

was previously using https://stackoverflow.com/a/37562814/3690154 and it workes. if you have some suggesting on how to convert FormData to something like in this answer that will be highly appreciated. — devprashant, Jun 06 '17 at 11:25
this thing onclick="submitForm(); return false;" just owns me. Heads off buddy. — devprashant, Jun 06 '17 at 11:46

devprashant · Accepted Answer · 2017-06-12T08:07:34.967

Here, we are rebuilding formBody from FormData object:

<body>
<form action="#" id="formToSubmit">
    <input type="text" name="name" value="xyz">
    <input type="text" name="phone" value="7777777777">
    <input type="button" value="submit" onClick="submitForm()">
</form>

<script>
    function submitForm(){
        var form = new FormData(document.getElementById("formToSubmit"));
        var formBody = [];
        for ( var key of form.keys()){
            var encodedKey = encodeURIComponent(key);
            var encodedValue = encodeURIComponent(form.get(key));
            formBody.push(encodedKey + "=" + encodedValue);
        }
        formBody = formBody.join("&");
        fetch("http://localhost:8080/ppum", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'                 
            },
            body: formBody
        })
        .then(res => res.json())
        .then(data => console.log(data));

    }
</script>

Now body-parser is able to parse it correctly:

{"name":"xyz","phone":"7777777777"}

Also changed the type of submit button from 'submit' to 'button' as per Quentin suggested.

Note: You can also apply this answer https://stackoverflow.com/a/37562814/3690154

body-parser(node.js) not able to understand form POST using fetch browser api

2 Answers2

Including your form data

Content Type

Submit buttons