Reputation: 127

Go to a new html page when submitting a form

Im new to webapps and javascript and im trying to go to a thank you page when I submit a form. But it just goes to a empty page. Ive looked up how but nothing seeems to be working. I know it has to do something with my res.end(), because if I dont put that it just makes my index page continuously do the loading symbol.

Any suggestions would be great!!! thank you.

thankyou.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Thank you</title>
</head>
<body>
 <h1>Thank you!!!!!</h1>
</body>
</html>

my form section in my index.html

    <div class=container2>
            <form method="post" action="/thankyou.html" enctype="multipart/form-data" autocomplete="off" >
                <fieldset>
                    // all my inputs and selectors
                   <input type="submit" value="Submit">
                </fieldset>
            </form>
        </div>

part of my server.js(node)

var express = require('express');
var path = require('path');
var server = express();
var formidable = require("formidable");
var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
var xhr = new XMLHttpRequest();
var request = require("request");

server.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header('Access-Control-Allow-Methods','GET,PUT,POST,DELETE,OPTIONS');
    next();
});


var url = '*****************************';

var port = process.env.port || 63342;

// Define ./public as static
server.use(express.static(path.join(__dirname, 'public')));


server.post("/thankyou.html", function(req, res, next) {
    processFormFieldsIndividual(req, res);
});


//All POST's use processFormFieldsIndividual
//server.post('*', processFormFieldsIndividual);

server.listen(port, function () {

    console.log('listening on port ' + port);
});


function processFormFieldsIndividual(req, res) {
    // take the values from the form and store it to
    // the schema for patient.

    var form = new formidable.IncomingForm();
    form.on('field', function (field, value) {


        switch (field) {
            //puts values in json

    });

    form.on('end', function () {
        res.writeHead(200, {
            'content-type': 'text/plain'
        });

        // checks if the exists before it does a put or post.
        var exists = checkIfExist(schema.name.family, schema.birthDate);


        // if exists do a put
        if (exists) {
            res.end();
            xhr.open("PUT", url, true);
            xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && (xhr.status == 201 || xhr.status == 200)) {
                    console.log(xhr.responseText);
                }
                else
                    console.log(xhr.responseText);
            };
            xhr.send(JSON.stringify(schema));
        }
        // if doesn't exist do a post
        else {
            res.end();
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && (xhr.status == 201 || xhr.status == 200)) {
                    console.log(xhr.responseText);
                }
            };
            xhr.send(JSON.stringify(schema));
        }
        console.log(JSON.stringify(schema));
    });
    form.parse(req);
}

Upvotes: 0

Answers (3)

Sam kh

Reputation: 127

Thank you both of you! Both solution do work. Also make I had to move the thankyou.html to public folder(client side)

I had deleted

res.writeHead(200, {
            'content-type': 'text/plain'
        });

and all the

res.end();

SOLUTION

server.post("/process-form", function(req, res, next) {
    processFormFieldsIndividual(req, res);
    res.redirect('/thankyou.html')
});

index.html

<div class=container2>
            <form method="post" action="/process-form" enctype="multipart/form-data" autocomplete="off" >
                <fieldset>
                    // all my inputs and selectors
                   <input type="submit" value="Submit">
                </fieldset>
            </form>
        </div>

Upvotes: 0

m-a-r-c-e-l-i-n-o

Reputation: 2672

Based on the description and the code you posted, it appears as though you are over complicating things a bit. Why don't you try doing the following:

1) Have an endpoint just for processing the data, like so:

server.post('/process-form', function(req, res, next) {
    processFormFieldsIndividual(data);
});

2) Have an endpoint that you can redirect the user to afterwards, like so:

server.post('/process-form', function(req, res, next) {
    processFormFieldsIndividual(data);
    res.redirect('/thankyou.html');
});

If processFormFieldsIndividual is asynchronous, have it return a promise instead, that way you could do:

server.post('/process-form', function(req, res, next) {
    processFormFieldsIndividual(data).then(function () {
        res.redirect('/thankyou.html');
    });
});

I hope that helps!

Upvotes: 1

Robert Columbia

Reputation: 6418

You want to do a redirect after you are done processing. See this question: Nodejs - Redirect url . Just redirect to your desired success page.

If your success page is at forms/Congratulations.html, your redirect would look like this:

res.redirect('forms/Congratulations.html');

Remove your res.end() and put the redirect at the very end of your logic. You would have something that ends like this:

xhr.send(JSON.stringify(schema));
res.redirect('forms/Congratulations.html');

Upvotes: 2

Go to a new html page when submitting a form

Answers (3)

Related Questions