CODEWITHSUNDEEP
javascripthtml
t0mcat
t0mcat

Reputation: 5679

Javascript form validation

How do I let users know that "there are changes left to be saved on the form if they try to close the browser window?"
I have a form with couple of fields, Now if the user changes some of the fields and clicks on Close button on the browser window, my script should alert him of unsaved changes. How do I implement this? I have put in basic form validation but can't seem to think of a solution for window.close() event. Any sample links would be helpful.

Upvotes: 4

Views: 666

Answers (4)

Jonathon
Jonathon

Reputation: 2675

Well you could use the body onbeforeunload or onunload.

<body onBeforeUnload="return(confirm('unsaved stuff'))">

Never used a return to stop a page unload before but it should work.

Update:

In the header of the web page to make it a global var:

<script type="text/javascript">
var formData = [];
function saveForm(){
    var data = [];
    for(var index = 1; index <= 3; index++){
        data [index - 1] = document.getElementById("textfield_" + index).value;
    }
    return(data);
}

function unsavedData(){
    var newFormData = saveForm();
    for(var index = 0; index < 2; index++){
        if(formData[index] != newFormData[index]){
            return(confirm("Unsaved data, do you really want to exit?"));
        }
    }
    return(true);
}
</script>

In the body(of course):

<body onBeforeUnload="return(unsavedData())">
...
<form ... onSubmit="formData = saveForm()">
<input type="text" id="textfield_1">
<input type="text" id="textfield_2">
<input type="text" id="textfield_3">
/*form submit button*/
</form>

Upvotes: 1

RobG
RobG

Reputation: 147513

You can use the beforeunload even to run a function that checks the default values of successful form controls with their current value. If there are any differences, prompt the user. Otherwise, do nothing.

Upvotes: 0

Battle_707
Battle_707

Reputation: 708

You can't prevent a user from closing a window (that would mean a malicious script could do that as well, making it a huge security vulnerability).

That being said, you can ask if the user wants to save his/ her changes before actually leaving the page. You would need onBeforeUnload (set the attribute in HTML or use javascript) to call a script. This is what that script could look like:

function beforeClose () {

    if (formChanged) {

        var chk = confirm('Do you want to save your changes before you go?');
        if (chk) {

             // Code (AJAX) that will send/ store the data)

         }
     }
}

In this function I invented a variable called 'formChanged'. The most sensible way to do this is to track whether a user has changed things while on the page (by adding the onChange attribute to the form fields that will set the formChanged variable to true). The linked post in your question's first comment shows you a jQuery script that will check for changes, if you want to use that.

Upvotes: 0

Christopher
Christopher

Reputation: 1743

Equivalent, but in JavaScript you could do something like:

if ( undefined !== window.onbeforeunload )
{
    window.onbeforeunload = function ()
    {
        var f = window.onbeforeunload;
        var ret = f();
        if (ret)
        {
            return doValidation();
        } else
        {
            return false;
        }
    };
} else
{
    window.onbeforeunload = function ()
    {
        return doValidation();
    };
}

where doValidation() is your custom validation function.

Upvotes: 0

Related Questions