Close window when "input" is not empty

Question

So I have a form in my script, so there are a lot of input tags. When someone writes something in the input and closes the page accidentally, then should appear:

alert("You have to fill the whole form.");

This is my code now:

HTML

<input placeholder="name" />

JAVASCRIPT

window.onbeforeunload = function () {
    var input = document.getElementByTagName("input");
    if (input.value.length > 0){
        alert("You have to fill the whole form.");
    }
};

My question is, what am I doing wrong?

Should be `input.value.length` ... In the future, please give the error message you are receiving too. Also, you might want to check that the value isn't a bunch of spaces. — crush, Jan 03 '14 at 20:20
Please use getElementById and also check this post onbeforeunload function it's not supported in every browser [window.onbeforeunload and window.onunload is not working in Firefox , Safari , Opera?](http://stackoverflow.com/questions/14645011/window-onbeforeunload-and-window-onunload-is-not-working-in-firefox-safari-o) — ELavicount, Jan 07 '14 at 06:35

score 4 · Answer 1 · answered Jan 03 '14 at 20:30

4

You need to run through your code and pay attention to spelling errors, also check your console! As your code stands, the first error you see is:

Uncaught TypeError: Object #<HTMLDocument> has no method 'getElementByTagName'

This is because the correct method is getElementsByTagName (see that "s")? Use getElementById to target a single element, else you'll receive a collection. Other than that, it's the typos!

If you still use getElementsByTagName -- just target the correct index of the element you want! So if you only have 1 input, use [0]

answered Jan 03 '14 at 20:30

tymeJV

103,943
14
161
157

@DOCTYPEHTML -- Since you get back a collection, write a loop to iterate each element, and do your checking – tymeJV Jan 03 '14 at 20:33
This is the correct solution @DOCTYPEHTML, `input` is an array-like object and you have to iterate through it (because you can have an unlimited number of `input` tags!) and once you do it it will work. – MMM Jan 06 '14 at 15:49

Subbu · Accepted Answer · 2014-02-06T07:09:13.350

    <!DOCTYPE html>
<html>
<head>
    <title>Demo Page</title>
</head>
<body>
    <input type="email" placeholder="email">
    <input type="text" placeholder="2">
    <input type="text" placeholder="3">
    <input type="text" placeholder="4">
       <br/>
    <input type="radio">
        <input type="checkbox">

    <script type="text/javascript">
        window.onbeforeunload = function (e) {
        var input = document.getElementsByTagName("input");
        var returnArr = [];
        for (var i = 0; i < input.length; i++) {
            if((input[i].value == "" && (input[i].type == 'text' || input[i].type == 'email')) || (input[i].checked == false && input[i].type != 'text') ){
            returnArr.push(false);
        }
            else{
                returnArr.push(true);
            }
        };
        returnArr = sort_unique(returnArr);
        if(returnArr[0] == false && returnArr[1] == true)
        return "You have to fill the whole form.";
    };

    function sort_unique(arr) {
        arr = arr.sort(function (a, b) { return a*1 - b*1; });
        var ret = [arr[0]];
        for (var i = 1; i < arr.length; i++) { // start loop at 1 as element 0 can never be a duplicate
        if (arr[i-1] !== arr[i]) {
            ret.push(arr[i]);
        }
        }
        return ret;
    }
    </script>
</body>
</html>

Hope this code block works for you. :) I have tested this in chrome and mozilla firefox. It is working.

now there is an other problem look, i have another two different input's CHECKBOX and RADIO, the Script don't work for that. Here a fiddle: http://jsfiddle.net/dV9sU/6/ without the two different input: http://jsfiddle.net/dV9sU/ — , Jan 07 '14 at 13:52
Just tweak the code of condition checking with input[i].value and input[i].checked parameters. Hope above one will work. — Subbu, Jan 07 '14 at 17:34
If you check input on ID basis it will be cumbersome. Better to use input type to check all the input at once. But if you want to restrict some of the inputs add your condition in If else block inside loop. — Subbu, Jan 07 '14 at 19:38
modify 5th line of javascript with this if((input[i].value == "" && (input[i].type == 'text' || input[i].type == 'email')) || (input[i].checked == false && input[i].type != 'text') ) — Subbu, Feb 06 '14 at 07:08

score 1 · Answer 3 · answered Jan 07 '14 at 18:06

Solution, bases on jQuery. Tested in FF and Chrome.

window.onbeforeunload = function() {
    var empty = false;

    $('input').each( function() {
        if ( $(this).val() == '' ) {
            empty = true;
            return false;
        }
    });

    if ( empty ) return 'You have to fill the whole form.';
}

score 0 · Answer 4 · answered Jan 07 '14 at 12:30

Looking your code, I can find a lot of issues.

1."getElementByTagName" should be "getElementsByTagName", and this function returns a list/array of elements matching the criteria, so you will have to get an element from the array and verify it.

I have edited the code and it works for me. Check it if it solves your purpose…

<html>
<head>
</head>
<body>
<input placeholder="name" />
<script type="text/javascript">
window.onbeforeunload = function () { 
var inputs = document.getElementsByTagName("input");
var input = inputs[0];

if (input.value.length > 0){
    return "You have to fill the whole form.";
}
};
</script>
</body>
</html>

Close window when "input" is not empty

4 Answers4