Delete fields from a form after confirming shipment with AJAX

Question

Delete fields from a form after confirming shipment with AJAX

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Hello friends, good evening, I require your support in the following.

I am creating an HTML5 contact form using JS and validating the submission through AJAX.

What I need is that when the form is sent it is updated after about 5 seconds so that the fields and the form itself are original.

Here is my HTML form

        <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>

Here is my 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;
    }
});

here I leave the php where I process it

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

} ? >

Thanks in advance.

javascript html5 php ajax formularios

asked by Abel Perez Ramirez 11.01.2017 в 04:44

source

2 answers

0

Thanks for the promptness of your help.

here I leave as I placed it and it does not update the form once of the successful shipment

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;
    }

});

}) ();

answered by 11.01.2017 в 13:01

Render html with angular attributes from the angle controller Application rails with remote database

score 0 · Accepted Answer

or what I need is that when the form is sent it is updated after about 5 seconds so that the fields and the form itself are original.

With window#setTimeout you can run a task at a future time. This function receives a callback with the task to execute and a time to be executed specified in milliseconds.

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);
}

I would not do it in 5 seconds, if not immediately after the request was completed.