0

I need to transfer the data from the form to the server (created on the nodeJS express framework), for further use of the data from the forms. But the "send" button should send the user to another html page (I create a chat, the first html is registration, the second is the chat itself, with registration data). What should I specify in the action method in order to transfer data to the index.js server, but at the same time open an html page that is located on a different path.

index.html (registration):

<form action="/index" method="post" class="FORM">
        <label>Username</label><br>
        <input type="TEXT" class="CHECK" autocomplete="off" name="Username"/>
        <button type="submit" onclick="redirect()" class="BTN">Send</button>
    </form>

redirect() - initially, when there was no need to send to the server, redirected to the page with the chat (using window.location).

index.js

const express = require('express');
const app = express();
const db = require('./database/database'); 
const bodyParser = require('body-parser');
const http = require('http');
const server = http.createServer(app);
const {Server} = require('socket.io');
const io = new Server(server);

const port = 3000;
let id = 0;
let users = {};

const urlencodedParser = bodyParser.urlencoded({
    extended: false,
})
app.use(express.static(__dirname));
app.get('/index', (request, response ) => {
    response.sendFile(__dirname + '/index.html');
});
app.post('/index', urlencodedParser, function (
    request,
    response
) {
    if (!request.body) return response.sendStatus(400)
    console.log(request.body.Username)
})
io.on('connection', (socket) => {
.....
Rumeone
  • 1
  • 1
  • You should [learn how to use the label element properly](http://www.456bereastreet.com/archive/200711/use_the_label_element_to_make_your_html_forms_accessible/). Without a for attribute or a form control inside it, a label is useless. – Quentin Feb 09 '22 at 16:22
  • A form's `action` works exactly like a link's `href`; it specifies the URL the browser is going to request. Express allows you to a) process GET and POST requests differently and b) to send back whatever you like. Having said that, it's good practice to redirect after a POST request, because that way the request is gone and won't run again if the user happens to refresh. Just use `res.redirect('/chat');` for instance. Then add a route for that. –  Feb 09 '22 at 16:23
  • https://expressjs.com/en/4x/api.html#res.redirect –  Feb 09 '22 at 17:21

1 Answers1

0

The action should be the URL you want to send the form data to.

The end point in your Express code which matches that URL should be responsible for processing the submitting data and sending the response back to the browser.

Typically that response will be the HTML document you want to send back. You might want to issue a redirect response to tell the browser to make a second request to a different URL.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • If I understood you correctly, then on the server side I have to give a command that I need to redirect to another html page? How can this be done? – Rumeone Feb 09 '22 at 16:29
  • https://stackoverflow.com/questions/28352871/in-express-how-do-i-redirect-a-user-to-an-external-url – Quentin Feb 09 '22 at 16:30