0

I am using Node JS and Express JS to make a form submission push data to the database.

This is my form

<form action="/pokedex/register/poke_submission" method="POST">
                <div>
                    <label for="name">Pokemon</label>
                    <input type="text" name="name" id="name" required />
                </div>
                <div>
                    <label for="number">Number</label>
                    <input type="text" name="number" id="number" required />
                </div>
                <div>
                    <label for="primaryType">Primary Type</label>
                    <input
                        type="text"
                        name="primaryType"
                        id="primaryType"
                        required
                    />
                </div>
                <div>
                    <label for="secondayType">Secondary Type</label>
                    <input type="text" name="secondayType" id="secondayType" />
                </div>

This is my POST API

app.post("/pokedex/register/poke_submission", async function (req, res) {
    const poke = new Pokemon({
        information: {
            name: req.body.name,
            dexNumber: req.body.dexNumber,
            primaryType: req.body.primaryType,
            secondaryType: req.body.secondaryType, // Not required
    });
    try {
        const newPokemon = await poke.save();
        res.send(newPokemon);
    } catch (err) {
        res.send(req.body);
        console.log(err);
    }
});

and I am using these two

app.use(express.urlencoded({ extended: true }));
app.use(express.json());

When I hit Submit, it sends me to /pokedex/register/poke_submission but with a 405 error.

Rednirug
  • 81
  • 6
  • You're using Express 4.16.1+, so you don't need body-parser, as mentioned in below answers. 405 error is method not allowed, can you double check in browser's Network tab that the path is the same as in Postman? – Silviu Burcea May 28 '21 at 07:36
  • @SilviuBurcea Yep actually that's the main thing I have been messing with. So far I've learned my Live Server was messing up the endpoint. I managed to submit the data, and it showed me the information I added in JSON. Only problem is it is still not interacting with my API so nothing is being pushed to the database. – Rednirug May 28 '21 at 08:06
  • @SilviuBurcea I tried going back to Postman to make sure the API still works. The data went through fine and posted in my database. – Rednirug May 28 '21 at 08:11
  • and the browser Network revealed the same API endpoint being called? – Silviu Burcea May 28 '21 at 09:06
  • Yeah. I decided to use the entire localhost url in the form "action" for now. It works as a temporary fix. Thank you for your help. – Rednirug May 28 '21 at 09:16
  • When you don't use localhost as URL, where is your app mounted? I'm asking this because if your app is mounted as `www.domain.com/app` your API responds to `www.domain.com/app/pokedex/register/poke_submission` and using `/pokedex/register/poke_submission` as form action will invoke `www.domain.com/pokedex/register/poke_submission`, which obviously is different. – Silviu Burcea May 28 '21 at 15:38
  • The app was running on the same port and shared the same root '/', but when the action added ```/pokedex/register/poke_submission``` it wouldn't work even though it would be ```localhost:####//pokedex/register/poke_submission```. My temporary fix was putting the entire localhost URL. It didn't change the URL in the browser which was still ```localhost:####//pokedex/register/poke_submission```, but it worked. I didn't want to use ```localhost:####//pokedex/register/poke_submission``` because I am not sure if it would work in production, so I was trying to see if there's a better way to do it. – Rednirug Jun 01 '21 at 22:30
  • that extra `/` might be important as it might be interpreted differently by browser and Postman. – Silviu Burcea Jun 02 '21 at 06:22

1 Answers1

0

It seems it should be as below in code:

var express = require('express')
var bodyParser = require('body-parser')

var app = express()

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json
app.use(bodyParser.json())
Rohit JP Singh
  • 1
  • 1
  • 2
  • When I try to use body parser it just tells me it is deprecated – Rednirug May 28 '21 at 05:51
  • I've tried using it again, but I get the same deprecation status for body parser saying "'bodyParser' is deprecated.ts(6385)" and the submission still directs me to the correct url, but with an http 405 error. – Rednirug May 28 '21 at 07:16
  • @Rednirug relevant: https://stackoverflow.com/a/24330353/1051677 – Silviu Burcea May 28 '21 at 07:17
  • Also found this: https://medium.com/@mmajdanski/express-body-parser-and-why-may-not-need-it-335803cd048c so I think you just need to set extended to false and use express.json and express.urlencoded. – Silviu Burcea May 28 '21 at 07:19
  • @SilviuBurcea I am using Express 4.17.1 which is why I am using ```express.json()``` and ```express.urlencoded()``` like that post says at the end. I tried following the steps for body parser as well, but VS Code just puts a line through it and tells me it is deprecated. – Rednirug May 28 '21 at 07:23
  • I had urlencoded set to true, but I changed it to false and the result is still the same – Rednirug May 28 '21 at 07:25