How to check if an element in DOM is hidden or not by query a class?

Question

Given the element below ("FileToUpload"), how do I test if its class is set to block or none?

HTML

<div id=\ "FileToUploadLabel\">File:</td>
    <td colspan=\ "1\">
</div>
<input type=\ "file\" id=\ "FileToUpload\" name=\ "FileToUpload\" size=\ "70\"/>

JS

//To show the file control: 
$("#FileToUpload").css("display", "block");

//To hide the file control: 
$("#FileToUpload").css("display", "none");

Basically I need to test it in a conditional statement like this:

if ("FileToUpload not hidden" && $("#FileToUpload").val() == "") 
{
  Alert("An file needs to be uploaded when File tag is being displayed.");
  return;
}

Thank you

score 2 · Accepted Answer · answered Aug 06 '13 at 22:27

2

easiest way is to use the built in ":visible" selector in jquery

if($("#FileToUpload").is(":visible") && $("#FileToUpload").val() == ""){
  //do something
}

answered Aug 06 '13 at 22:27

Ian

326
2
8

Sure thing! And as someone else mentioned, using jquery's built in `hide()` and `show()` is simpler than using `css('display', 'block')` to show and hide elements @Max – Ian Aug 07 '13 at 22:32

score 1 · Answer 2 · edited May 23 '17 at 11:58

1

See this StackOverflow question. Use $(element).is(":visible") to check if it is hidden or not. Also, you can use .hide() and .show() to more easily hide and show elements.

edited May 23 '17 at 11:58

Community

1
1

answered Aug 06 '13 at 22:26

ShadowCat7

804
8
16

score 1 · Answer 3 · answered Aug 06 '13 at 22:26

1

something like this should work for you:

var currDisplay = $("#FileToUpload").css("display");


if (currDisplay != "none" && $("#FileToUpload").val() == "") 
{
  Alert("An file needs to be uploaded when File tag is being displayed.");

}

answered Aug 06 '13 at 22:26

Rooster

9,954
8
44
71

score 0 · Answer 4 · edited May 23 '17 at 12:22

0

As seen on this answer You can use the :hidden selector:

if($('#FileToUpload:hidden').length && $("#FileToUpload").val()){
    Alert("An file needs to be uploaded when File tag is being displayed.");
    return;
}

edited May 23 '17 at 12:22

Community

1
1

answered Aug 06 '13 at 22:26

DarkAjax

15,955
11
53
65

How to check if an element in DOM is hidden or not by query a class?

4 Answers4