Tuesday 8 February 2011

Submit Form with Loader

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>

1 comment:

  1. 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!
    my computer has something wrong!
    maybe it does't update for a long time.

    Classic Dresses
    Classic Bridesmaid Dresses
    Wedding Dresses with Sleeves

    ReplyDelete