0

Hola amigos buenas noches, requiero su apoyo en lo siguiente.

Estoy creando un formulario de contacto HTML5 usando JS y validando el envío mediante AJAX.

Lo que necesito es que al enviarse el formulario se actualice al cabo de unos 5 segundos de manera que los campos y el formulario en sí quede original.

Acá mi form HTML

        <form method="post" class="contacto">
    <fieldset>
        <div><label>Nombre:</label><input type="text" class="nombre" name="nombre" /></div>
        <div><label>Email:</label><input type="text" class="email" name="email" /></div>
        <div><label>Telefono:</label><input type="text" class="telefono" name="telefono" /></div>
        <div><label>Asunto:</label><input type="text" class="asunto" name="asunto" /></div>
        <div><label>Mensaje:</label><textarea cols="30" rows="5" class="mensaje" name="mensaje" ></textarea></div>
        <div class="ultimo">
            <img src="ajax.gif" class="ajaxgif hide" />
            <div class="msg" id="msg"></div>
            <button class="boton_envio">Enviar Mensaje</button>
        </div>
    </fieldset>
 </form>

Acá mi ajax

(function(){
$(".boton_envio").click(function() {

    var nombre = $(".nombre").val();
        email = $(".email").val();
        validacion_email = /^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/;
        telefono = $(".telefono").val();
        mensaje = $(".mensaje").val();

    if (nombre == "") {
        $(".nombre").focus();
        alert('Por favor ingresa tu nombre');
        return false;
    }
    else if(email == "" || !validacion_email.test(email)){
        $(".email").focus();   
        alert('Por favor ingresa tu eMail');
        return false;
    }else if(telefono == ""){
        $(".telefono").focus();
        alert('Por favor ingresa tu número telefónico');
        return false;
    }else if(mensaje == ""){
        $(".mensaje").focus();
        alert('Por favor ingresa tu mensaje');
        return false;
    }else{
        $('.ajaxgif').removeClass('hide');
        var datos = 'nombre='+ nombre + '&email=' + email + '&telefono=' + telefono + '&mensaje=' + mensaje;
        $.ajax({
            type: "POST",
            url: "proceso.php",
            data: datos,
            success: function() {
                $('.ajaxgif').hide();
                $('.msg').text('Mensaje enviado, pronto será contactado!').addClass('msg_ok').animate({ 'right' : '130px' }, 300);  
            },
            error: function() {
                $('.ajaxgif').hide();
                $('.msg').text('Error, verifique los datos!').addClass('msg_error').animate({ 'right' : '130px' }, 300);                 
            }
        });
        return false;
    }
});

acá dejo el php donde lo proceso

if($nombre != '' && $email != '' && $telefono != '' && $mensaje != ''){
mail($dest,$asunto,$cuerpo,$headers); //ENVIAR!

} ?>

Gracias de antemano.

0

2 respuestas 2

0

o que necesito es que al enviarse el formulario se actualice al cabo de unos 5 segundos de manera que los campos y el formulario en sí quede original.

Con window#setTimeout puedes ejecutar una tarea en un tiempo futuro. Ésta función recibe un callback con la tarea a ejecutar y un tiempo a ejecutarse especificado en milisegundos.

success: function() {
  $('.ajaxgif').hide();
  $('.msg')
    .text('Mensaje enviado, pronto será contactado!')
    .addClass('msg_ok')
    .animate({ 'right' : '130px' }, 300);

  // se ejecutará en 5 segundos
  window.setTimeout(function () {
    var form = document.querySelector('form.contacto');
    form.reset();
  }, 5000);
}

Yo no lo haría en 5 segundos, si no inmediatamente luego de haberse completado la petición.

0

gracias por la prontitud de tu ayuda.

acá dejo como lo coloqué y no me actualiza el form una vez del envío exitoso

success: function() {
                $('.ajaxgif').hide();
                $('.msg')
                .text('Mensaje enviado, pronto será contactado!')
                .addClass('msg_ok')
                .animate({ 'right' : '130px' }, 300);

                 // se ejecutará en 5 segundos
                  window.setTimeout(function () {
                    $('form.contacto').reset();
                  }, 5000);

            },
            error: function() {
                $('.ajaxgif').hide();
                $('.msg').text('Error, verifique los datos!').addClass('msg_error').animate({ 'right' : '130px' }, 300);                 
            }
        });
        return false;
    }

});

})();

2
  • No respondas para comentar. En su lugar, edita tu pregunta cuando quieras añadir información. He actualizado mi respuesta, mírala que he corregido el error.
    – gugadev
    Commented el 11 ene. 2017 a las 12:21
  • Gracias @guzgarcia justo lo que necesitaba, con el ultimo arreglo pude lograr lo que buscaba. Commented el 11 ene. 2017 a las 12:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.