I have a javascript page which checks an email and username, this works fine in every browser but Internet Explorer. The div box where errors are shown should be hidden unless an error is given e.g. username taken or invalid email.
If the email gets an error this is shown in the div tag, but doesnt work for username (in all browsers)
below is my code:
<script type="text/javascript">
var usernameok;
var emailok;
function checksubmit()
{
if (usernameok && emailok) {
document.getElementById("button").disabled = false;
} else {
document.getElementById("button").disabled = true;
}
}
function username(username)
{
make_request();
function stateck()
{
if (httpxml.readyState == 4) {
if (httpxml.responseText.indexOf("Username Ok") >= 0) {
usernameok = true;
} else {
usernameok = false;
}
checkCanSubmit();
}
}
httpxml.onreadystatechange = stateck;
user_url = "check_username.php?username=" + username.value;
httpxml.open("GET", user_url, true);
httpxml.send(null);
}
function email(email)
{
make_request();
function stateck()
{
if (httpxml.readyState == 4) {
if (httpxml.responseText.indexOf("Email Ok") >= 0) {
emailok = true;
} else {
emailok = false;
}
checkCanSubmit();
}
}
httpxml.onreadystatechange = stateck;
email_url = "check_email.php?email=" + email.value;
httpxml.open("GET", email_url, true);
httpxml.send(null);
}
</script>
I see your function stateck() is the return function from the HTTP request. However, you are defining it within another function. Not as an anonymous function, but just as a function within another function.
I see what you're doing now...ok, try this instead:
httpxml.onreadystatechange = function()
{
if (httpxml.readyState == 4) {
if (httpxml.responseText.indexOf("Email Ok") >= 0) {
document.getElementById("email").style.backgroundColor = "green";
document.getElementById("email").style.color = "white";
document.getElementById("email_div").style.display = 'none';
emailok = true;
} else {
document.getElementById("email").style.backgroundColor = "red";
document.getElementById("email_div").innerHTML=httpxml.responseText;
emailok = false;
}
checkCanSubmit();
}
};
Do you need to set your initial state to display: none? I think IE may initialize the divs with a non-0 height whereas the divs may be technically visible in other browsers but too short to see.
Edit:
Okay I think I misunderstood your question. Your problem is not with hiding the divs but with displaying errors for the username.
Nothing obvious jumps out at me. Try stepping through the code using VS or VWDE:
http://www.berniecode.com/blog/2007/03/08/how-to-debug-javascript-with-visual-web-developer-express/
Related
I know there is a bunch of other people who have posted questions about throttling functions and I have scrolled through them but most if not all are way above my level or include stuff like jquery and really weird logic to function.
I'm just trying to limit the number of changes a user can make per second, to stop them from spamming stuff.
I wrote my code with the help of this youtube video and I can understand it, for the most part. However it doesn't seem to work, I can't see any issues or blocks.
This is my first attempt at implementing throttling:
const throttle = (bad_func, limit) =>{
var flag = true;
document.getElementById('key').innerHTML = flag;
return function(){
let context = this;
let args = arguments;
if(flag){
bad_func.apply(context,args);
bad_func();
flag = false;
setTimeout(()=>{
flag = true;
},limit);
}
}
}
ThrottledFunc = throttle(logKey, 4000);
window.addEventListener('keydown', ThrottledFunc);
function logKey(e){
// document.getElementById('EKey').innerHTML = e.which;
if (e.which == 87){
document.getElementById('demo').innerHTML = 'forwards';
}
else if (e.which == 83){
document.getElementById('demo').innerHTML = 'backwards';
}
else{
document.getElementById('demo').innerHTML = 'empty';
}
}
But it doesn't work, I can still spam w and s. The "demo" changes but there is no delay.
For my second attempt I just said screw it and tried to implement the timeout thing into the function, still no luck:
window.addEventListener('keydown', logKey);
function logKey(e){
var flag = true;
var limit = 10000;
document.getElementById('key').innerHTML = flag;
if(flag){
if (e.which == 87){
flag = false;
document.getElementById('demo').innerHTML = 'forwards';
setTimeout(()=>{
flag =true;
}, limit);
}
else if (e.which == 83){
document.getElementById('demo').innerHTML = 'backwards';
flag = false;
setTimeout(()=>{
flag =true;
}, limit);
}
}
else{
document.getElementById('demo').innerHTML = 'empty';
}
}
What am I doing wrong?
I went thru a similar exercise a couple years ago.
I ended up coming up with a really tiny implementation:
throttled-event-listener.js
Here's a live demo that uses it.
And here's some docs on what the calling code looks like.
Hope this helps!
You need to build a closure, that means the variable flag must preserve its value between each logKey() invocation. The solution is to store it global (as below) or in a parent scope where logKey can access it.
window.addEventListener("keydown", logKey);
var flag = true;
var limit = 10000;
function logKey(e) {
document.getElementById("key").innerHTML = flag;
if (flag) {
if (e.which == 87) {
flag = false;
document.getElementById("demo").innerHTML = "forwards";
setTimeout(() => {
flag = true;
}, limit);
} else if (e.which == 83) {
document.getElementById("demo").innerHTML = "backwards";
flag = false;
setTimeout(() => {
flag = true;
}, limit);
}
} else {
document.getElementById("demo").innerHTML = "empty";
}
}
<div id="demo"></div>
<div id="key"></div>
I would suggest using a library like lodash that provides a throttle function.
The confirmation popup always return true. Please advice the correction needed.
$('#btnDelete').click(function () {
var check = false;
var aCheckbox = document.getElementsByTagName('input');
for (var i = 0; i < aCheckbox.length; i++) {
if (aCheckbox[i].type === 'checkbox' && aCheckbox[i].checked) {
check = true;
}
}
if (check === true) {
return jConfirm('Do u really want to delete?', 'Confirmation');
} else {
jAlert("Please select serial number", 'Alert');
return false;
}
});
Hope this help :
if (check === true) {
var answer = confirm('Do u really want to delete?', 'Confirmation');
if(answer)
return true;
else
return false;
}
else {
jAlert("Please select serial number", 'Alert');
return false;
}
Yes it creates problem you need to use third parameter as callback function of jconfirm like,
if (check === true) {
jConfirm('Do u really want to delete?', 'Confirmation', function(r) {
jAlert('Confirmed: ' + r, 'Confirmation Results');
});
return false;
} else {
.....
Also remove extra closing }); from your code, see last two lines.
I'm making a register page using HTML, CSS and JS and Java servlet etc. I have a monitorer() function which checks if the user has finished inputting everything before making the register button visible. But now everything works, but somewhere am getting screwed over and the button never comes back..
my button in reg.html :
<input type="submit" value="Register" class="btnSub" id="btnReg" style="visibility:hidden;"/>
javascript function monitorer()
function monitorer() {
var btnReg = document.getElementById("btnReg");
btnReg.style.visibility = "hidden";
var flag = true;
if (document.getElementById("fname").value.length >= 3) {
if (document.getElementById("lname").value.length >= 3) {
if (valiDate(document.getElementById("dob"))) {
if (document.getElementById("USN").value.length == 10) {
if (document.getElementById("passw").value.length > 5) {
var ticks = document.getElementsByClassName("checker"), i = 0;
for (i = 0; i < ticks.length; i++) {
if (ticks.item(i).innerHTML == "✔") {
alert("i val = " + i);
continue;
} else {
flag = false;
break;
}
}
}
} else {
flag = false;
document.getElementById("USN").focus();
}
} else {
flag = false;
document.getElementById("dob").focus();
}
} else {
flag = false;
document.getElementById("lname").focus();
}
} else {
flag = false;
document.getElementById("fname").focus();
}
if (flag == true) {
btnReg.style.visibility = "visible";
} else if(flag == false) {
btnReg.style.visibility = "hidden";
}}
And to help you get as good a picture as you can, a screenshot
See - all the ticks are there, the first name, last name etc are having value.length >=3 but still the register button doesn't show..
Also, I have put the monitorer() method in every input's "onBlur", "onChange" events.
Here is a link to my html file >>> reg.html
and please let me know if i can improve anything?
var myButton = document.getElementsByTagName("input");
myButton[0].onclick = function() {
if(ansArray[0] == 'a')
myButton[0].style.backgroundColor = "green";
else
myButton[0].style.backgroundColor = "red";
}
myButton[1].onclick = function() {
if(ansArray[0] == 'b')
myButton[1].style.backgroundColor = "green";
else
myButton[1].style.backgroundColor = "red";
}
onclick function not working in my above example(IE9), but they work fine in Chrome and Firefox.
The issue is that your DOM is not yet loaded when you are trying to access the buttons. Wrap your onclick handlers in window.load and everything should work fine:
window.onload = function () {
var myButton = document.getElementsByTagName("input");
myButton[0].onclick = function() {
if(ansArray[0] == 'a') {
myButton[0].style.backgroundColor = "green";
} else {
myButton[0].style.backgroundColor = "red";
}
}
myButton[1].onclick = function() {
if(ansArray[0] == 'b') {
myButton[1].style.backgroundColor = "green";
} else {
myButton[1].style.backgroundColor = "red";
}
}
}
I am actually surprised this works under Webkit and Mozilla. I have created a small demo fiddle. In all cases, in all browsers the object comes out as null before load, unless the script block is after the element you are accessing inside the body.
Notice though that there is a difference in how getElementsByTagName reacts inside different browsers, it is different than getElementById: fiddle
Another alternative would be to not wait for window.onload would be to wait for document.body because window.onload happens after all content including images is loaded.
function Start() {
if (document.body) {
var myButton = document.getElementsByTagName("input");
myButton[0].onclick = function() {
if(ansArray[0] == 'a') {
myButton[0].style.backgroundColor = "green";
} else {
myButton[0].style.backgroundColor = "red";
}
}
myButton[1].onclick = function() {
if(ansArray[0] == 'b') {
myButton[1].style.backgroundColor = "green";
} else {
myButton[1].style.backgroundColor = "red";
}
}
}
}
setInterval(Start, 50); // 50 ms is a small enough interval to retry
Same answer I used here Javascript onclick functions do not work should apply.
I need to check onload if an anchor is within the URL to open a tab if required. The problem is that if a user opens a tab before the onload function gets fired, the tab gets closed and the user needs to open it again.
How to fix that?
HTML:
<body onload="checkurl()">
JS:
function checkurl(){
if (window.location.hash == '#about')
{
showhide('secabout');
}
else if (window.location.hash == '#contact')
{
showhide('seccontact');
}
}
JS function:
var divState = {};
function showhide(id) {
if (document.getElementById) {
var divid = document.getElementById(id);
divState[id] = (divState[id]) ? false : true;
for (var div in divState){
if (divState[div] && div != id){
document.getElementById(div).style.display = 'none';
divState[div] = false;
}
}
divid.style.display = (divid.style.display == 'block' ? 'none' : 'block');
}
}
Thanks.
Uli
I'm pretty sure that <script> tags inside of <head> execute right away before onload() so try that.
You can call the function with an extra parameter to make sure will show in your load function.
Then check on a global initialized variable to check if the function has already been executed by user when running from the checkurl function. This is required if the user clicks on a different tab than the one specified in the URL.
Also you need to check on divState[id] instead of divid.style.display == 'block' when updating divid.style.display at bottom.
function checkurl(){
if (window.location.hash == '#about')
{
showhide('secabout', true);
}
else if (window.location.hash == '#contact')
{
showhide('seccontact', true);
}
}
var divState = {};
var initialized = false;
function showhide(id, initialize) {
if(initialized && initialize) return;
initialized = true;
if (document.getElementById) {
var divid = document.getElementById(id);
divState[id] = (divState[id]) ? false : true;
for (var div in divState){
if (divState[div] && div != id){
document.getElementById(div).style.display = 'none';
divState[div] = false;
}
}
if(initialize){
divid.style.display = 'block';
} else {
divid.style.display = (divState[id] ? 'block' : 'none');
}
}
}