display loader next to submit button of contact form when submitting

Question

I want use loader.gif to display as processing before confirmation message shown when hit on submit button for contact form

loader.gif must be shown next to submit button

Can anyone plz help me to put code, as I don't know to which code to insert????

My fiddle link: http://jsfiddle.net/jPp64/

HTML

<div class="form-group">    
<label for="exampleInputArea">Area</label>
    <select style="color:#000 !important" class="form-control" id="exampleInputArea" placeholder="Select Month" name="exampleInputArea">
        <option value="" >--Select Area--</option>
        <option value="Area1">Area1</option>
        <option value="Area2">Area2</option>
        <option value="Area3">Area3</option>
    </select>
    <div style="color:red;" id="areaerror"></div>
</div>
<div class="form-group last">
    <button class="btn btn-lg btn-red mailbtn">Submit</button>
</div>

JS

$('.mailbtn').live('click',function(){

area = $('#exampleInputArea').val();

if (area.length == 0 || area == '') {
    $('#exampleInputArea').val('')
    $('#areaerror').text('Area is Required');
    return false;
} else {
    $('#areaerror').text('');
}

$.ajax({
        type: "POST",
        async : false,
        url: "mail.php",
        data: {area:area}
        })
        .done(function( msg ) {
        $('.mail_middle').html('');
        $('.mail_middle').html('We will call you to confirm your delivery address.<br/>Thank you.');
        return false;
        });
});

Answer 1

All you need to do is put an image next to the Submit button where you want it and set the CSS on it to display: none; to hide it. Then when you are inside your .live('click') event, the first line should show the image using $('#imgId').show(); with jQuery. Then just hide the image again when the ajax is complete.

Keep in mind that since you'll probably be using a gif, you need to make your ajax call asynchronous so change the async: false to true. If you don't do this, your animated gif will appear as a static image because synchronous calls will lock the browser.

Answer 2

You could have your GIF in a div (where you like) with style="display:none;"

When you're sending your ajax request, simply use a jQuery's show(). When the data is received, use hide().

Example:

 [...]
 $.ajax({
    type: "POST",
    async : false,
    url: "mail.php",
    data: {area:area}
    })
    success: function(){
         $('#ID_YOURGIF').show();
    },
    .done(function( msg ) {
    $('.mail_middle').html('');
    $('.mail_middle').html('We will call you to confirm your delivery address.<br/>Thank you.');
    return false;
    });

$('#ID_YOURGIF').hide();
[...]