mensaje de carga jquery

[danielantioquia]

HOLA AMIGOS

Tengo una duda, es la siguiente: Tengo un formulario de contacto PHP, necesito una imagen de precarga. un gif loader, mientras se envia el formulario, programado desde jquery
He tenido un inconveniente. el formulario que tengo funciona bien, pero... tarda unos 20 seg. en devolver el mensaje de exito de envio de información, durante este tiempo, el usuario al no saber que se esta tramitando el envio de la información, da clic en el boton enviar un sin numero de veces. esto hace que el formulario llegue en repetidas ocaciones. a continuación describo el codigo que estoy utilizando

HTML

<form id="main-contact-form" class="contact-form" name="contact-form" method="post" action="sendemail.php">
<div class="row-fluid">
<div class="span5">
<label>Nombres y Apellidos</label>
<input type="text" class="input-block-level" required="required" placeholder="Nombres y Apellidos">
<label>Teléfono de Contacto:</label>
<input type="text" class="input-block-level" required="required" placeholder="Telefono">
<label>Correo Electronico</label>
<input type="text" class="input-block-level" required="required" placeholder="Su dirección de email">
</div>
<div class="span7">
<label>Mensaje</label>
<textarea name="message" id="message" required="required" class="input-block-level" rows="8"></textarea>
</div>

</div>
<button type="submit" class="btn btn-primary btn-large pull-right">Send Message</button>
<p> </p>

</form>

JQUERY

jQuery(function($) {

//Ajax contact
var form = $('.contact-form');
form.submit(function () {
$this = $(this);
$.post($(this).attr('action'), function(data) {
$this.prev().text(data.message).fadeIn().delay(100 00).fadeOut();
},'json');
return false;
});

//Goto Top
$('.gototop').click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("body").offset().top
}, 5000);
});
//End goto top

});

Me gustaria poner el jquery es la típica imagen de Ajax Loader.

PHP

<?php
header('Content-type: application/json');
$status = array(
'type'=>'success',
'message'=>'Correo Enviado!'
);

$name = @trim(stripslashes($_POST['name']));
$email = @trim(stripslashes($_POST['email']));
$subject = @trim(stripslashes($_POST['subject']));
$message = @trim(stripslashes($_POST['message']));

$email_from = $email;
$email_to = '[email protected]';

$body = 'Name: ' . $name . "\n\n" . 'Email: ' . $email . "\n\n" . 'Subject: ' . $subject . "\n\n" . 'Message: ' . $message;

$success = @mail($email_to, $subject, $body, 'From: <'.$email_from.'>');

echo json_encode($status);
die;

[danielantioquia]

Alquien que pueda ayudarme?

[Alexis88]

Puedes evitar esto de muchas formas, por ejemplo, deshabilitando el botón mientras no se obtenga una respuesta de la petición, ocultándolo o usando una variable cuyo valor determinará si se puede volver a realizar un envío de los datos.

Por ejemplo:

Código HTML:

<form id = "ejemplo">
    <!-- Los elementos de ingreso de datos del formulario -->
 
    <input type = "submit">
</form>
 

Código Javascript:

$("#ejemplo").on("submit", function(event){
    event.preventDefault();
 
    $.ajax({
        url: "ejemplo.php",
        type: "get",
        data: {
            foo: "bar"
        }
        beforeSend: function(){
            $(this).find("[type=submit]").hide(); //Oculto al botón al realizar el envío
        }
    }).done(function(response){
        $(this).find("[type=submit]").show(); //Muestro al botón al recibir la respuesta
        //...
    });
});
 

Saludos