jQuery problems

[Danny696]

Ok, im having slight problems with my jQuery login form now. Ive never bothered to learn all of jQuery, but i know some function well, e.g. $.post $.get, $.ajax.

But when making this, i came across a problem. When the user is logging in, i want it to appear to (for example) say checking username.... then 2-4 seconds later it says Success... etc. but how i have it, it just shows up like its always been there :/

Heres my Js code:

function submit_login() {
var username = $('#username').val();
var password = $('#password').val();
alert('User: '+username+' Pass: '+password+'.');
$('div.page').html('<big>Logging you in...</big>
[img=/images/loading.gif]
Checking username....');
if(username == '') {
$('div.page').append('<span style="color: red;">Error! No username</span>');
}
else {
$('div.page').append('<span style="color: green;">Success...</span>
Checking password....');
}
}

(The alert is for testing)

What ive tried so far:

$('div.page').append('<span style="color: green;">Success...</span>

Checking password....').fadeIn();

$('div.page').hide.append('<span style="color: green;">Success...</span>

Checking password....').fadeIn();

$('div.page').append('<span style="color: green;">Success...</span>

Checking password....').hide.fadeIn();

None worked, any help is apreciated (even if i cant spell it ;)) even if its wrong

Thanks Danny696

[Djkanna]

Okay not exactly what you are after but it may give you an idea.

$(document).ready(function() {

$('button.login').click(function() {
	//Once the user has clicked the login button assign checking span.
	$('<span class="checking">Checking blah</span>').appendTo('div.page');

	//Then do the ajax request

	// Success function
	success: function() {
		//Remove the checking..
		$('span.checking').fadeOut(200).remove();
	}

});

});

EDIT:

Just found out fadeOut() takes another param so you could actually call another funtion inside of it..

$(document).ready(function() {

$('button.login').click(function() {
	//Once the user has clicked the login button assign checking span.
	$('<span class="checkingUser">Checking Username</span>').appendTo('div.page').fadeOut(500, function() {
		$(this).remove();
		$('<span class="checkingPass">Checking Password</span>').appendTo('div.page').fadeIn(200);
	});

	//Then do the ajax request
	$.ajax({
		//......//

		// Success function
		success: function() {
			//Remove the checking..
			$('span.checkingPass').fadeOut(200).remove();
		}
	});
	return false;
});

});

Maybe this would work.

[Danny696]

Thanks, didnt work tho.

[Spudinski]

[js]

function submit_login() {

var usr = document.getElementById('username').value

var pwd = document.getElementById('password').value

var ouput = document.getElementByClassName('page')

output.innerHTML = 'Logging you in...'

if (!usr || !pwd) output.innerHTML += 'Please enter all fields...'

else {

// do whatever

}

return true

}

[/js]

OR

[js]

Keep it simple.

OR, if you insist on jQuery you can use the selector "input[type=submit\\[\\]]".