Won't return form to function

[twQ]

Hey,

Well I have an issue where it's not returning to the function like it should, I'm not sure why not but it wont even alert. See if you can find my error, cause I sure cant. Bah.

Form:

<div id="popup">
<form name="login" method="post" action="" onsubmit="return login();">
<p>
<label>Username</label><br>
<input type="text" name="user" class="txt"><br>
<label>Password</label><br>
<input type="password" name="pass" class="txt"><br>
<input type="reset" value="Close" class="btn" onclick="popUp();">
<input type="submit" value="Login" class="btn">
</p>
</form>
</div>

Script:

var o;

function login() {
window.o = document.getElementById('popup');
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}

else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange = function() { if(xmlhttp.readyState == 4) {window.o.innerHTML=xmlhttp.responseText;} };

window.o.innerHTML = 'Attempting to log in...';
xmlhttp.open('GET','../scripts/login.php',true);
xmlhttp.send(null);
return false;
}

Arrrrgh. Stupid mistakes, they irritate the crap outta ya.

Thanks!

[twQ]

Come on I know SOMEBODY knows

[jscheuer1]

Apparently login the function is being overwritten by login the form. Change the name of one or the other of them, like:

<form name="logger" method="post" action="" onsubmit="return login();">

Also, this will not work locally in IE 7+ due to security restrictions, but should be fine in those browsers live.

[twQ]

Well that's odd. Why would a forms name overwrite a JavaScript function? Huh? I didn't know that happened. I guess I missed that one in class haha.

Thanks John!

[jscheuer1]

Well just about anything can overwrite just about anything. For it to happen both things have to be available to whatever the current scope is.

I don't think I've seen this exact thing happen before. It's probably a partial holdover from earlier days where simply the name of a form or image represented that form or image as an object. I think this still applies to images, at least in some browsers. Here it's something different though because if you do an alert after the form, it alerts the function.

alert(login);

But if you do it from within the submit event attribute, it alerts the form:

onsubmit="alert(login);return false;"

Behaves the same in Firefox and IE, pretty strange.

[twQ]

That is very odd. I probably would've never thought to try that and just scrapped the script haha. Thanks a bunch.

New problem though. The new code won't stop the form in Opera, I'm sure it's something technical but I figure this threads open you're already looking at it so I might as well save myself a tiny bit of trouble and get a little help on this matter.

var p = 0;
var o;
var c;

function popUp() {
window.o = document.getElementById('popup');
if (!window.p) {
window.o.style.display = 'block';
window.p = 1;
document.forms.log.user.focus();
}

else {
window.o.style.display = 'none';
window.p = 0;
}
}

function login(f) {
if (!f) {
window.o = document.getElementById('popup');
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}

else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange = function() { if(xmlhttp.readyState == 4) {window.o.innerHTML=xmlhttp.responseText; return false;} };

window.c = window.o.innerHTML;
window.o.innerHTML = 'Attempting to log in...';
xmlhttp.open('GET','scripts/login.php',true);
xmlhttp.send(null);
}

else {
window.o.innerHTML = window.c;
}
}

It just goes ahead and submits.

Thanks,
Tim

[twQ]

To help whoever decides to help out I am pretty sure it is related to the way I implement my return false, but if I put it earlier the script doesn't return it's work so...hmmmm?

The script will, if not done with Ajax, submit like a normal form, but I still intend to fix Opera to make Ajax function properly.


Thanks DD goers - especially John,
Tim

[jscheuer1]

Your function has no return value. Some browsers will override the default action even with no return value. Technically this is incorrect. So Opera is actually doing it 'right' here. Just add a return false:

 . . . nerHTML = 'Attempting to log in...';
xmlhttp.open('GET','xmlfile.txt',true);
xmlhttp.send(null);
}

else {
window.o.innerHTML = window.c;
}
return false;
}

And be sure to add the event like so:

<form name="logger" method="post" action="" onsubmit="return login();">

Alternatively, you may add the return value to the event attribute:

<form name="logger" method="post" action="" onsubmit="login(); return false;">

Note: Your onreadystatechange function does have a return value of false when successful. However, the onreadystatechange function is not the onsubmit event of the form and has no influence over the return value of the login function.