Go to a new html page when submitting a form
Question
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);
}
3 answers
solution1
2 2016-06-15 21:59:06
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');
solution2
1 2016-06-15 22:06:09
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!
solution3
0 2016-06-15 22:35:35
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.