How to alert user that is leaving a page without saving the info

Question

I did a small table thats ask for product name and product # my question how can I alert the user that he is leaving the page without saving the information.

<form action="index.php" method="post">
<input type="text" name="pnumber" value="" placeholder="Product Number...."/> 
<input type="text" name="pname"   placeholder="Product Name...." /> <br>
<button id="save">save</button>
</form>

http://www.bitnative.com/2013/08/19/warn-users-of-unsaved-changes-with-jquery/ has some very good ideas for this. — Lee S, May 22 '14 at 00:16

score 1 · Answer 1 · answered May 22 '14 at 00:16

1

Modern browsers support the window.onbeforeunload event which you can trap to offer this kind of functionality.

answered May 22 '14 at 00:16

Drew Noakes

300,895
165
679
742

score 1 · Answer 2 · answered May 22 '14 at 00:18

One approach: checking if the fields are empty

$(window).unload(function() {
    var pnumber = $("input[name=pnumber]").val();
    var pname = $("input[name=pname]").val();



  if(pnumber==="" || pname==="")
   {
     alert("Please fill the form");
     return false;   
   }
});

Another : have a global flag to chec

var saved = false; // global variable

$("#save").click(function() {
   saved = true;
});

$(window).unload(function() {
    if(saved==false)
   {
     alert("Please fill the form");   
     return false;
   } 
});

How to alert user that is leaving a page without saving the info

2 Answers2