If you are familiar with my work on Shockey Monkey and the Vladville blog, you already know I am a huge fan of jQuery. Today I wanted to write an AJAX-driven form so I didn’t have to deal with page transitions and/or reloads and more pages that were just not necessary at all. jQuery to the rescue, just keep in mind that this is a very simple superficial example, a lot more error checking and validation is done on the server end than I am showing below, this example just demonstrates the interface.

First, Include jquery.form in the header let’s write a handler for the form. This is quite trivial, the handler is activated when form SubscribeForm is submitted. If I receive a successful return from my server side script I target the SubscribeResult div container and fill it with the data that the script sent back.

<script type=”text/javascript” src=”/js/jquery.js”></script>
<script type=”text/javascript” src=”/js/interface.js”></script>
<script type=”text/javascript” src=”/js/jquery.jeditable.js”></script>
<script type=”text/javascript” src=”/js/jquery.form.js”></script>

<script type=”text/javascript”>
        $(document).ready(function() {
            $(’#SubscribeForm’).ajaxForm({
                    target: ‘#SubscribeResult’,
                    success: function() {
                    $(’#SubscribeResult’).fadeIn(’slow’);
                }
            });
        });
</script>

The HTML markup is quite simple, just a form SubscribeForm followed by an empty container SubscribeResult. The form posts to a server script, subscribe.php

<form id=”SubscribeForm” method=’post’ action=’/subscribe.php’>
<b>Email:</b>                                       
<input type=’text’ name=’email’>                                   
<br>                               
<center>
  <input type=’submit’ value=’Subscribe’>                              
</center>                               
</form>

<div id=”SubscribeResult”></div>

Finally, and most importantly, the backend script. I am using PHP on my server, you may have a different program. I’ve basically chopped it down to the two lines. First one sends an email, the second one sends the script some data to display in the SubscribeResult container. 

<?php

        mail(”someone@vladville.com”,”Vladville Newsletter Subscription”,”Subcribe $email”,”From: blog@vladville.com”);
        echo “<div style=’background-color:#FFB22B; padding:10px’>Thanks, added $email</div>”;
?>

That’s all there is to it. Obviously, a lot more work goes into the validation and sanitation of the subscribe.php script but the stuff above will give you an idea of the markup and the interaction that makes for a very dynamic web site without a lot of reloads or page changes.

Note: For the record, this AJAX script handles subscriptions to my newsletter. The HTML and JavaScript are identical to the above but the subscribe.php handler is far different. For starters, I don’t use email at all, the data is inserted directly into the database along with the IP address the form was submitted from along with a timestamp. More than half of the script handles the validation and error checking. Depending on the error, it posts back some helpful text and if it all worked out it posts a green container with the congratulations. Try to play with the contents being sent back into the SubscribeResult <div>, you can send back icons, spinners and really make the site interactive

.