Menu
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:
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.
895
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
Please see this it's customary seldom code might be useful
<!DOCTYPE html>
<html>
<body>
<div id="one" style="visibility: hidden;">The content of the body element is displayed in your browser.
</div>
<div id="two" style="visibility: visible;"> I'm Cool
</div>
<div onclick="push();"> Click me </div>
<script>
function push() {
a = document.getElementById("one").style.visibility;
alert("one "+a);
b = document.getElementById("two").style.visibility;
alert("one "+b);
}
</script>
</body>
</html>
above code gives the visibility status of the div using it's ID as U required.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
