Detect if a form is visible or not

Question

I have this scenario, I am detecting all forms on a site: document.forms

And I am trying to detect which forms are visible and which are not visible.

var formElement = []
for (i=0,l=document.forms.length;i<l;i++){
   var formIndex = document.forms.item(i);
   if (<need here just visible forms>){
       formElement.push(formIndex);
  }
}

Just to say I am doing this over an other pop up window that is communicating with the browser window with that forms, this depends on jQuery being present on the host site so jQuery is not a solution.

What is the best way to do this.

See update #4 in my answer - if hosts are different for opener and pop-up windows, you'll not able to do this. But you can do it as I showed for windows from same host. — Eugene Naydenov, Sep 14 '12 at 11:18

Eugene Naydenov · Answer 1 · 2012-09-14T11:16:03.020

3

var isVisible = form.style.display != 'none';

UPDATE #1: hidden attribute

Also the element can be invisible if hidden attribute is specified, so the condition could be changed to

var isVisible = form.style.display != 'none' && !form.hasAttribute('hidden');

UPDATE #2: jQuery approach:

Find all invisible forms:

$('form:hidden'); or $('form:not(:visible)');

Find all visible forms:

$('form:visible');

Check is form visible:

$(form).is(':visible');

UPDATE #3: particular case (for original code in question)

It's working pretty well to determine visible forms using a function from my demo:

function isVisible(el) {
    return el.style.display != 'none' && !el.hidden;
}

var formElement = [];
for (i=0, l=document.forms.length; i<l; i++) {
    var formIndex = document.forms.item(i);
    if(isVisible(formIndex)) {
        formElement.push(formIndex);
    }
}
console.log(formElement);

It's the same loop is this one in demo:

for(var i = document.forms.length; 0 < i--;) {
    log('Form #' + i + ': ' + isVisible(document.forms[i]));
}

DEMO

UPDATE #4: pop-up window

I've adapted my example for pop-up window, but I have to say that you're NOT ABLE to deal with elements in document from other host - both pop-up and opener windows should belong to same host.

<script type="text/javascript">
    var wnd = window.open('popup.html');

    function isVisible(el) {
        return el.style.display != 'none' && !el.hidden;
    }
    wnd.onload = function() {
        /* This is working pretty well: */
        var formElement = [];
        console.log(wnd.document.forms);
        for (i=0,l=wnd.document.forms.length;i<l;i++){
           var formIndex = wnd.document.forms.item(i);
           console.log(formIndex);
           if (isVisible(formIndex)){
               formElement.push(formIndex);
               console.log('Form ' + formIndex.id + ' is visible');
          }
        }
    };
</script>

edited Sep 14 '12 at 11:16

answered Sep 13 '12 at 12:59

Eugene Naydenov

6,711
1
20
38

1

I'm sorry but your comment doesn't give any valuable information. Can you edit your question and show the snippet of your code related to the task? – Eugene Naydenov Sep 13 '12 at 15:13
Ok, I've updated my demo and added your code snippet into it and it's working pretty well. Why are you saying that you are not seeing effects? Do you see any errors in console output? The code is working (yours and mine), so if you'll find any errors in console, you need to debug some other parts of your application. – Eugene Naydenov Sep 14 '12 at 10:58
your code is perfect. Like you said it is working. But the problem is that on more forms people hide the forms not with hidden element or with the style element style="display: none;". Try on this form: https://member.webmd.com/register.aspx?returl=http%3A%2F%2Fwww.webmd.com%2F&appid=1 there you have one form that is not visible it is hidden, and such forms make my problem above. – o.arnel Sep 14 '12 at 12:23
I've just went trough all forms on that page and found only 3 forms and all of them are visible: http://goo.gl/kbE2g – Eugene Naydenov Sep 14 '12 at 14:48
The problem is that the forms are visible, but i just need the forms that are really visible to the user (forms that the user can see with his eye) not all the visible forms to the browser, that is the problem now. – o.arnel Sep 19 '12 at 09:31
So you can also check does form have any elements except of ``, is form in visible area (e.g. not `position: absolute; left: -1000px`) and so on. Really it's not a common case so you have to analyze that page and develop rules that will describe how to determine is the form visible for user's eye or not. – Eugene Naydenov Sep 19 '12 at 09:36

Steven Hunt · Answer 2 · 2012-09-13T13:21:08.337

1

var forms = document.getElementsByTagName("form");

Then, you can loop through the array and check to see if the tag is visible or not.

edited Sep 13 '12 at 13:21

answered Sep 13 '12 at 12:59

Steven Hunt

2,287
17
17

the problem is that I can not use any $('any') coding. – o.arnel Sep 13 '12 at 13:11
Perhaps remove the jQuery tag if you're not able to use jQuery… – Prydie Sep 13 '12 at 13:16
for (i=0,l=document.forms.length;i } – o.arnel Sep 13 '12 at 14:16

score 0 · Answer 3 · edited May 23 '17 at 10:25

0

You can use this:

$(element).is(":visible") // Checks for display:[none|block], ignores visible:[true|false]

Ref. How do I check if an element is hidden in jQuery?

edited May 23 '17 at 10:25

Community

1
1

answered Sep 13 '12 at 12:59

user1477388

19,139
26
125
240

score 0 · Answer 4 · answered Sep 13 '12 at 13:00

0

you can use :

$('#form').is(':visible')

answered Sep 13 '12 at 13:00

AboQutiesh

1,596
2
8
14

score 0 · Answer 5 · answered Sep 13 '12 at 13:00

The following will go through all forms and tell which ones are visible and which aren't:

$("form").each(function() {
   if ($(this).is(":visible")) {
       console.log("Visible: ", this);
   } else {
       console.log("Hidden: ", this);
   }
});

or if you want to get all visible ones at once:

$("form:visible")

And the hidden ones:

$("form:hidden")

Detect if a form is visible or not

5 Answers5