1

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!

Lukasz Re
  • 79
  • 1
  • 11
Haim Sabag
  • 133
  • 2
  • 12
  • http://stackoverflow.com/a/16419406/3928341 – nem035 Jan 15 '17 at 10:55
  • Thank you Lukasz, but there missing the server side implementation with the topic you addressed. How do I implement the request in the server side, for example submit will addressed the data into DB? – Haim Sabag Jan 15 '17 at 17:46
  • Go to the link.. You will find your answer... https://stackoverflow.com/a/24193246 – user706536 Jul 23 '18 at 18:48

0 Answers0