Form Element AJAX Spinner Attachment Using jQuery

We inject the spinner image into the page and reposition it depending on which field is doing the request. Very simple!

The XHTML

<select class="ajax">
    <option value="">-- Select a Site--</option>
    <option value="David Walsh Blog">David Walsh Blog</option>
    <option value="Script & Style">Script & Style</option>
    <option value="Band Website Template">Band Website Template</option>
</select>

<br /><br />

<input type="text" id="my-text" class="ajax" />

Elements with the “ajax” CSS class will be our target.

The jQuery JavaScript

$(document).ready(function() {
    //create image
    $('<img src="move-spinner.gif" id="spinner" />').css('position','absolute').hide().appendTo('body');
    //for every field change
    $('.ajax').change(function() {
        //get element position
        var position = $(this).offset();
        //position image
        $('#spinner').css({ top: position.top , left: position.left + $(this).width() + 30 }).fadeIn();
        //ajax
        $.post('<?php echo $_SERVER['REQUEST_URI']; ?>',{
            ajax:1,
            value: $(this).val()
        },function() {
            $('#spinner').fadeOut();
        });
    });
});