Showing alert after reloading page

Question

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 protected]</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 protected]</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 1

There are a lot of ways to do it. An easy way to achieve this would be passing through a parameter in the URL and checking it on page load.

// Check the URL parameter on page load
$(function(){
    if(getUrlParameter('success') == '1') {
       bootstrap_alert.warning('Message has been sent.');
    }
});

// Set up the click event
$('#sentcontact').on('click', function(){
  if (true){
    var nextUrl = window.location.href;
    nextUrl += (nextUrl.indexOf('?') === -1 ? '?' : '&') + 'success=1'
    window.location = nextUrl;
  }
});

// Simple function to read parameters out of the URL
function getUrlParameter(name) {
    var url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

Answer 2

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