I achieve 2 objectives with the form below.
The first is that I use jQuery to capture the user hitting the enter key after adding the password. By using jQuery, this works in all browsers.
The second thing I deliver is a 'loading...' image when the form has been submitted. It stays there until we have a result from the target PHP script, authenticate.php. Your authenticate.php could look something like this
<?php
echo 'Who are you?';
?>
You could also pass parameters to the PHP and do it properly. See http://effectivewebdesigns.blogspot.com/2010/10/send-form-information-to-php-through.html
BTW, you'll also have to create your own loading.gif
See demo.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Submit Form with Loader</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$('#pass').keyup(function(event)
{
if(event.keyCode == 13)
{
$("#sub").click();
}
});
$('#sub').click(function()
{
$('#formlogin').empty().html('<img src="loading.gif" />');
$.post('authenticate.php',
{
}, function(data)
{
$('#formlogin').empty().html(data);
});
return false;
});
});
</script>
</head>
<body>
<form id='formlogin'>
<input type='text' name='username' id='username' />
<input name='pass' id='pass' type='password' />
<input type='submit' value='login' name="sub" id="sub" />
</form>
</body>
</html>
Once again great post. You seem to have a good understanding of these themes.When I entering your blog,I felt this . Come on and keep writting your blog will be more attractive. To Your Success!
ReplyDeletemy computer has something wrong!
maybe it does't update for a long time.
Classic Dresses
Classic Bridesmaid Dresses
Wedding Dresses with Sleeves