Question

I’m trying to detect if an html element I gave an id is visible or not without using jquery.

The context:

In the forgotten user password page, I have a form where the user enter his login name and clicks on submit. After that, if he has set a challenge question, it will be shown and he will be able to answer this question and submits again. (same button before).

My problem:

when the user clicks on submit, in IE, if he clicks on it several times, he’ll get one e-mail for each time he clicks on it.

What I think:

I want to disable the button after clicking on this submit button, but I can only disable it if two conditions are correct:

1. If the user has already submited his login name (with no errors).
2. the user has a chalenge question registered and he answered it correctly.

I cannot change the process this is done, so I thought about adding an id in the field of the answer and checks if it’s visible. if it is and the user clicks on the submit button, I want to apply the attribute disable button on the label. What I don’t know is how to do this without using jquery.

with jQuery I could do something like this:

if($('#secretAns').is(':visible')) {
    //i think it could be the solution 
    $('#general_Submit.Label').attr( disabled, disabled );

}

to apply on:

<div id="secretAns" class="loginTxtFieldWrapper">
    <font color='red'>*</font><input type="text" name="secretAns" />
    <input type="hidden" name="isAnswerPage" value="1"/>
</div>
<p id="loginSubmitLink">
    <input id="general_Submit.Label" type="submit" value="general_Submit.Label" />" />
</p>

I find hard to search for pure Javascript solutions, because everybody tends to use jQuery, and I can’t use it in my application, so if someone can help me to do this with pure Javascript, I’ll appreciate.

Answer 1

Google helped me finding out how jQuery does it, you can do the same:

In jQuery 1.3.2 an element is visible if its browser-reported offsetWidth or offsetHeight is greater than 0.

Release notes

Searching the source code gave me this:

// The way jQuery detect hidden elements, and the isVisible just adds "!".
elem.offsetWidth === 0 && elem.offsetHeight === 0