EJS: Trying to use PATCH method with html form

Question

I have just started learning Node.js.

I have this following code where I need to submit the form using patch method to update an existing record.

Language/Edit.ejs

<form action="//localhost:3000/languages/6343eb83340e657a0321a9cc" method="post">
    ...

    <div class="boxFooter grid gap-2">
        <input type="hidden" name="_method" value="patch">
        <button type="submit">Update</button>
    </div>
</form>

Router

...
Router.patch('languages/:id', validations, update);
...

Controller

import Model from '#Models/Language.js';

...

const update = async (req, res) => {
    try {
        const item = await Model.findByIdAndUpdate(req.params.id, {
            title: req.body.title,
            description: req.body.description,
            status: req.body.status,
        }, {
            new: true,
            runValidators: true
        });

        res.send(item);
    } catch (error) {
        return res.status(400).json('Sorry, we have an error.');
    }
};

But, I am getting this error always

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Error</title>
</head>
<body>
    <pre>Cannot POST /languages/6343eb83340e657a0321a9cc</pre>
</body>
</html>

I have also tried to use method="patch" instead of method="post" . But, the outcome is still the same.

However, I tried to run this url with postman and it worked flawlessly.

Answer 1

Here is the peace of code that solved my problem. However, I am not sure whether this is the right way or not.

What I did was that I changed the method to patch and submitted the form with ajax.

Here is my code:

<form action="//localhost:3000/languages/6343eb83340e657a0321a9cc" method="patch">
    ...

    <div class="boxFooter grid gap-2">
        <button type="submit">Update</button>
    </div>
</form>

<script type="text/javascript">
...

ajaxRequest({
    ...
    type: $('form').attr('method'),
    ...
})
</script>

...
const ajaxRequest = (params) => {
    return $.ajax($.extend(true, {
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        type: 'POST',
        url: '',
        data: {},
        cache: false,
        beforeSend: () => {},
        success: (response) => {},
        complete: (response) => {}
    }, params));
};
...

Is this the right way..?

EJS: Trying to use PATCH method with html form

Question

1 answers

solution1
0 ACCPTED 2022-10-13 05:11:23

EJS: Trying to use PATCH method with html form

Question

1 answers

solution1 0 ACCPTED 2022-10-13 05:11:23

solution1
0 ACCPTED 2022-10-13 05:11:23