显示加载器旁边提交时提交联系表单的按钮

Question

我想使用loader.gif显示为联系表单的提交按钮时显示的确认消息之前的处理

loader.gif必须显示在提交按钮旁边

任何人都可以帮助我放置代码，因为我不知道要插入哪些代码????

我的小提琴链接： 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

您需要做的就是在“提交”按钮旁边放置一个图像，然后在其上设置CSS以显示：none; 隐藏它。 然后，当您进入.live（'click'）事件时，第一行应使用$（'＃imgId'）显示图像.show（）; 用jQuery。 然后在ajax完成时再次隐藏图像。

请记住，既然你可能正在使用gif，你需要使你的ajax调用异步，所以将async：false更改为true。 如果不这样做，您的动画gif将显示为静态图像，因为同步调用将锁定浏览器。

Answer 2

你可以将你的GIF放在一个div（你喜欢的地方）中，使用style =“display：none;”

当您发送ajax请求时，只需使用jQuery的show（）即可。 收到数据后，使用hide（）。

例：

 [...]
 $.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();
[...]