thelastone thelastone - 13 days ago 6
Javascript Question

Showing alert after reloading page

I'm beginner just learn how to code, I try to make some notification after submitting form then reload page, will show alert-success bootstrap, this is the code

// Bootstrap alert
bootstrap_alert = function() {}
bootstrap_alert.warning = function(message){
$('#alert_placeholder').html('<div class="alert alert-success alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><span>'+message+'</span></div>').show(500).delay(3000).hide(500);
}

(function checkIfMsgSent() {
if (typeof localStorage !== 'undefined') {
var isMsgSent = JSON.parse(localStorage.getItem("messageSent")); // JSON.parse because we want a boolean

if (isMsgSent) {
alert('Message has been sent.');
// bootstrap_alert.warning('Message has been sent.');
}

localStorage.removeItem('messageSent');
} else {
// localStorage not defined
alert('Your browser in incompatible for some features in this website');
}
});

$('#sentcontact').on('click', function(){
if (typeof localStorage !== 'undefined') {
localStorage.setItem('messageSent', 'true');
} else {
// localStorage not defined
alert('Your browser in incompatible for some features in this website');
}

window.location.reload();
});


Update Javascript Use by Solution 2

<div class="container">
<div id="alert_placeholder"></div>
</div>

<section class="contact_us">
<div class="container">
<form action="vanilla-form-contact.php" method="post">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="control-group">
<label for="name" class="label-control">Name:</label>
<input type="text" class="form-control" name="name" id="name" placeholder="Your name..." required>
</div>
</div>

<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="control-group">
<label for="email" class="label-control">Email:</label>
<input type="email" class="form-control" name="email" id="email" placeholder="Your email..." required>
</div>
</div>

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="control-group">
<label for="subject" class="label-control">Subject:</label>
<input type="text" class="form-control" name="subject" id="subject" placeholder="Your subject..." required>
</div>
</div>

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="control-group">
<label for="message" class="label-control">Message:</label>
<textarea name="message" id="message" cols="30" rows="10" placeholder="Messages..." class="form-control" required></textarea>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<img class="img-responsive" src="img/icon/contact.png" alt="Contact Icon">
<div>
<p class="title_contact">Contact:</p>
<p class="contact_phone"><i class="fa fa-phone-square"></i> +000</p>
<p class="contact_email"><i class="fa fa-envelope"></i> email@email.com</p>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<img class="img-responsive" src="img/icon/support.png" alt="Contact Icon">
<div>
<p class="title_contact">Support:</p>
<p class="contact_phone"><i class="fa fa-envelope"></i> email@email.com</p>
<p class="contact_email"></p>
</div>
</div>
</div>
</div>
<button type="submit" class="btn-custom" data-dismiss="alert" id="sentcontact">Send It</button>
</form>


This is my html

An error always show up when page reloaded in contact

It always show up in my page each time I reload page, not after clicking submit button

But, when I run that code, it just showing the bootstrap_alert first then reload the page. How could I make it reload page first then showing up bootstrap_alert?

Answer

Solution 1

Modify href of the window when you programmatically reload, check for the hash fragment (onload) and decide to show the alert.

(function checkIfMsgSent() {
  var url = window.location.href;
  if ((/#message_sent/).test(url)) {
    alert('Message has been sent.');
    // bootstrap_alert.warning('Message has been sent.');
  }
})();

$('#sentcontact').on('click', function(){
  if (true){
    window.location = window.location.href + "#message_sent";
    window.location.reload();
  }
});

Solution 2

Using localStorage, but this won't work if browser doesn't support localStorage (almost all modern browsers do have it).

(function checkIfMsgSent() {
  if (typeof localStorage !== 'undefined') {
    var isMsgSent = JSON.parse(localStorage.getItem("messageSent")); // JSON.parse because we want a boolean

    if (isMsgSent) {
      alert('Message has been sent.');
      // bootstrap_alert.warning('Message has been sent.');
    }

    localStorage.removeItem('messageSent');
  } else {
    // localStorage not defined
    alert('Your browser in incompatible for some features in this website');
  }
})();

$('#sentcontact').on('click', function(){
  if (typeof localStorage !== 'undefined') {
    localStorage.setItem('messageSent', 'true');
  } else {
    // localStorage not defined
    alert('Your browser in incompatible for some features in this website');
  }

  window.location.reload();
});