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, Apr 05 '19 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](https://stackoverflow.com/questions/13536112/change-html-post-port) — ChiralMichael, Apr 05 '19 at 16:43

score 1 · Answer 1 · answered Apr 05 '19 at 16:43

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 05 '19 at 16:43

ca1c

1,111
10
23

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. – ChiralMichael Apr 05 '19 at 16:47
1

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. – ca1c Apr 05 '19 at 16:48
The action method takes a full URL and it is entirely possible to post cross domains. https://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) – ChiralMichael Apr 05 '19 at 16:51
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. – ca1c Apr 05 '19 at 16:53
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. – ChiralMichael Apr 05 '19 at 16:58
I'm looking over this again and the presence of "public" in the path leads me to think this may not be a deliberate choice. I'm willing to bet there is an Apache instance happily serving all of the server code. I would love to see the result of GET /MetaSite/src/app.js . There's probably bigger issues afoot. Maybe only /public is open, but the site root appears to be incorrectly mounted regardless. – ChiralMichael Apr 05 '19 at 17:06

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

1 Answers1