Перейти на новую страницу html при отправке формы

Im new to webapps и javascript, и я пытаюсь перейти на страницу с благодарностью при отправке формы. Но он просто переходит на пустую страницу. Айв поднял глаза, но ничего не видно. Я знаю, что он должен что-то сделать с моим res.end(), потому что, если я не стану, это просто делает мою индексную страницу непрерывным символом загрузки.Перейти на новую страницу html при отправке формы

Любые предложения были бы замечательными !!! Спасибо.

thankyou.html

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

моей формы раздела в моей 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>

часть моего server.js (узла)

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); 
}

источник

2016-06-15 Sam kh

Вы хотите сделать перенаправлять после завершения обработки. См. Этот вопрос: Nodejs - Redirect url. Просто перейдите на страницу желаемого успеха.

Если страница успеха в формах/Congratulations.html, ваш редирект будет выглядеть следующим образом:

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

Удалите res.end() и поставить редирект на самом конце вашей логики. Вы бы что-то, что заканчивается так:

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

источник

2016-06-15 21:59:06

На основе описания и код, который вы в курсе, это выглядит как будто вы более усложнять вещи немного. Почему бы вам не попробовать делать следующее:

1) У конечной точки только для обработки данных, например, так:

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

2) Иметь конечную точку, вы можете перенаправить пользователя после этого, как так:

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

Если processFormFieldsIndividual асинхронный, которые он возвращает обещание вместо этого, таким образом вы могли бы сделать:

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

Надеюсь, это поможет!

источник

2016-06-15 22:06:09

Пожалуйста, обратите внимание на правильный ответ на этот ответ (нажав на серый галочку в левом верхнем углу этого сообщения), если это касается ваших проблем. –

Спасибо вам обоим! Оба решения работают. Также убедитесь, мне пришлось переместить thankyou.html в общую папку (на стороне клиента)

Я удалил

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

и все

res.end();

РЕШЕНИЕ

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

индекс .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>

источник

2016-06-15 22:35:35

Перейти на новую страницу html при отправке формы

ответ

Смежные вопросы