How to send parameters from a form using Express and Node.js

Question

Sorry for the English, i am Brazilian and I do not know how to write very well.

I am trying to send by post the data of a form using Express:

index.html

<form action="insert" method="post">
            <p><h4> Title </h4>   <input type="text" name="title" id="title" size="40" maxlength="30" placeholder="Name of task"/> </p> 

            <p><h4>Description</h4> <textarea name="description" id="description" cols="50" rows="3" placeholder="description of task"></textarea> </p> 

            <p> 
                <h4>Grade</h4>
                <input type="radio" name="urgency" value="2"> 2
                <input type="radio" name="urgency" value="1" checked> 1
                <input type="radio" name="urgency" value="0"> 0
            </p>

            <p> 
                <h4>How?</h4>
                <select name="taskType" id="select"> 
                    <option value="2"> N* </option> 
                    <option value="1"> Hour </option> 
                    <option value="0"> Minute </option> 
                </select>
                <input type="text" name="repeats" id="options" size="40" maxlength="5" placeholder="NX?"/> </p> 
            </p>

            <p><button type="submit"> Submit </button></p>
        </form>

app.js

const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const app = express();
app.use(bodyParser.urlencoded({ extended: true }))


const db = mysql.createConnection({
        host     : 'localhost',
        user     : 'root',
        password : '',
        database : 'metas'
});

db.connect( (err)  => {
        if(err) throw err;
        console.log('MySQL conected...');
});

app.get('/select', (req, res) => {
        let sql = "SELECT * FROM tasks";
        db.query(sql, (err, result) => {
                if(err) throw err;
                res.send(result);
        })
})

app.post('/insert', (req, res) => {
        let post = 
                {title: req.body.title, 
                description: req.body.description, 
                grau: req.body.urgency, 
                tipoRealizacao: req.body.taskType, 
                repeticoes: req.body.repeats
                }
        let sql = 'INSERT INTO tasks SET ?';
        let query = db.query(sql, post, (err, result) => {
                if(err) throw err;
                res.send("Post added");
        })
})


app.listen('3000', () => { console.log("Server initiated") } );

I am using mysql to store tasks, moreover I am using wampp on port 3306, but when I submit the form I have the error:

Not Found

The requested URL /MetaSite/public/insert was not found on this server.

Apache/2.4.35 (Win64) PHP/7.2.10 Server at localhost Port 80

index.html is in public folder and app.js in src.

Can anyone help me please? I do not know what I am doing wrong. Thank you.

You're posting to apache server, instead of the express application. also, the action should be: /insert instead of MetaSite/public/insert — Marcos Casagrande
– Marcos Casagrande, Commented Apr 5, 2019 at 16:38
@MarcosCasagrande is on the right track, I think. However, your api is on a different port. You need to specify the full URL with the port in you action as mentioned here — ChiralMichael
– ChiralMichael, Commented Apr 5, 2019 at 16:43

ca1c · Accepted Answer · 2019-04-05 16:43:31Z

1

It doesn't look like, based on your code, that your index.html is being hosted by the server javascript. In order for express to be able to handle a post request from that file, the file needs to be referenced and hosted by express. If this is what you are doing and you are just not showing it in your code please tell me but otherwise, this looks like your problem. The way you should do this is:

var path = require('path');

app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname + 'public/index.html'));
});

to host the index file at http://localhost:3000/.

answered Apr 5, 2019 at 16:43

ca1c

1,3031 gold badge12 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

ChiralMichael Over a year ago

This is inaccurate. HTML can be hosted separate from the API and often is in cloud deployments. This will undoubtedly complicate XSRF techniques, but the original posted isn't using them anyways.

ca1c Over a year ago

Yes, but just using a form action and not mentioning another server, like with axios, is not going to work unless the html and the javascript are on the same server.

ChiralMichael Over a year ago

The action method takes a full URL and it is entirely possible to post cross domains. stackoverflow.com/questions/11423682/cross-domain-form-posting. It is only when posting in JS (say, with axios) that you might have an issue (due to cross-origin policies)

ca1c Over a year ago

Correct, this program is capable of that, but is it using it? No. It is not mentioning another server, all it is doing is using a form action. There is no mention of another server in the frontend. Therefore, it is trying to create a post request to the server it is already on and does not share with the server javascript.

ChiralMichael Over a year ago

Correct. I just would not say, "you must host the html in express". You can host the html in express, and it would address the issue. You may also simply change the form action. If hosting static HTML in a separate app is a deliberate choice (Like I would do in an Amazon S3 deployment), then the form action can point to another domain and/or port.

|

Collectives™ on Stack Overflow

How to send parameters from a form using Express and Node.js

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related