I need to display some loading gif while form submission but, upon form submit do not refresh the page, just display a Thank You! message:
Currently, it's refresh the page by submit, and I don't wanted to refresh only display a message after submit.
Here's the code:
/* form hbs */
<form id="myForm" style="display:block" method="POST" role="form" class="form col-md-4 col-md-offset-4 col-xs-12">
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Your Name...">
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" name="email" placeholder="Email...">
</div>
<div class="form-group">
<input type="text" class="form-control" id="companyName" name="companyName" placeholder="Your Company Name...">
</div>
<div class="form-group">
<input type="text" class="form-control" id="message" name="message" placeholder="Your Message Here...">
</div>
{{!--onClick="hide();"--}}
<button type="submit" class="btn btn-primary" id="hide">Submit</button>
</form>
//in route index.js
/* GET Add Contact Us page. */
router.get('/ContactUs', function (req, res, next) {
res.render('ContactUs', {
title: 'Contact Us'
});
});
router.post('/ContactUs', function (req, res) {
var name = req.body.name;
var email = req.body.email;
var companyName = req.body.companyName;
var message = req.body.message;
var SQL = "INSERT INTO Contacts(name, email, companyName, message) VALUES($1, $2, $3, $4)";
//send the message to email
handleSayHello(req, res);
query(SQL, [name, email, companyName,message], res, function (json) {
res.render('ContactUs', {
title: 'Success!'
});
});
});
function query(sql, arr, hbsResponse, listener) {
pg.connect(process.env.DATABASE_URL, function (err, client, done) {
if (err) {
return hbsResponse.render('error', {
error: err,
message: err.message
});
}
client.query(sql, arr, function (err, result) {
done(); //close the connection
if (err) {
return hbsResponse.render('error', {
error: err,
message: err.message
});
}
listener(result);
});
});
}
How do I implement it via ajax that post the request without refresh the page and hide form (instead form after submit display another div?
Thank you in advance who that can helping me I will be very grateful!