How to stop user and show alert message if user by mistake click on link

Question

If the User is filling the form and by mistake then he clicks on any of the links from the header which can redirect to another page.

so I need to show an alert message before redirecting to another page.

Answer 1

You can declare a globale variable (attached to window ) that listen a form change , once changed set it to true ,

and in every link <a> (or header link depending on your selector ) click set a listener , that check this variable, if true , it'll popup a confirm message , otherwise leave the page directly

See below snippet :

window.alertOnClick = false;

$(function() {

  $("form").on("change", function() {
    console.log("change");
    window.alertOnClick = true
  });

  $("a").on("click", function(e) {
    //e.preventDefault();

    if (window.alertOnClick) {

      var confirmLeave = confirm("are you sur to leave this page !");
      confirmLeave ?
        "" : e.preventDefault();
    }
  })

})

ul li {
  display: inline;
  margin-left: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a href="https://www.google.com">googl</a></li>
  <li><a href="https://www.stackoverflow.com">stackoverfow</a></li>
  <li><a href="http://www.example.com">example</a></li>

</ul>


<form>
  name : <input type="text">
  <input type="radio" name="radio"> one
  <input type="radio" name="radio"> two


  <button type="button">submit </button>
  <form>

Answer 2

The kind of answer I was looking for I have found

Custom jquery plugin

jquery.are-you-sure.js is a custom jquery plugin so we need to add

  $('form').areYouSure();

But the problem with my form is that it updates some fields on load internally. so on user experience, even he doesn't change anything on the page and click on any header link, a pop message occurred by this plugin.

So finally I have found the solution, I need to trigger a call in the end or after initializing all form fields.

 $('#form').trigger('reinitialize.areYouSure');