0

estoy editando una pagina. Mi sección de contacto funciona, no esta de la manera más ordenada pero funciona sin embargo; no logro hacer que al enviar borre el contenido ya escrito, lo ideal seria despues de unos 2 o 3 segundos se borre todo.

E intentado con esto, dentro de Form;;

onSubmit="this.reset()"

Tambien con esto, que encontre en tutoriales;

$("#borrar").on("click",function(event){ 
event.prevenDefault(); 
$('#main-contact-form').trigger("reset");});

Y si bien es cierto que borra el formulario, sin embargo envia vacio el formulario. No siendo util ello en todo caso.

Dejo el codigo quiza puedan ayudarme.

<form class="contact-form" id="main-contact-form" name="contact-form" action="sendemail.php" method="POST">
    <div class="form-row">
        <div class="form-group col-md-12">
            <input type="text" value="" data-msg-required="Por favor escriba su nombre." maxlength="100" class="form-control" name="name" id="name" placeholder="Nombre" required="">
        </div>
        <div class="form-group col-md-9">
            <input type="email" value="" data-msg-required="Por favor ingrese su email." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control" name="email" id="email" placeholder="E-mail" required="">
        </div>
        <div class="form-group col-md-3">
            <input type="integer" value="" data-msg-required="Por favor ingrese su telefono." maxlength="100" class="form-control" name="phone" id="phone" placeholder="Telefono" required="">
        </div>
        </div>
        <div class="form-row">
        <div class="form-group col">
            <input type="text" value="" data-msg-required="Por favor ingrese un asunto." maxlength="100" class="form-control" name="subject" id="subject" placeholder="Asunto" required="">
        </div>
        </div>
        <div class="form-row">
        <div class="form-group col">
            <textarea maxlength="5000" data-msg-required="Por favor ingrese su mensaje." rows="5" class="form-control" name="message" id="message" placeholder="Mensajes" required=""></textarea>
        </div>
        </div>
        <div class="form-row mt-2">
        <div class="form-group col">
        <div class="g-recaptcha" data-sitekey="6LdEGYMUAAAAAKOj1WmajjhRZRD4ZL4rZgDbWzB6"></div>
        </div>
        </div>
        <div class="form-row mt-2">
        <div class="form-group col">
            <input type="submit" value="ENVIAR MENSAJE" class="btn btn-primary btn-rounded btn-4 font-weight-semibold text-0" data-loading-text="Cargando..." name="" style="background-color: #2388ED; border-color: #2388ED;">
        </div>
    </div>

El .JS

 var form= $('#main-contact-form');
    form.submit(function(event){
    event.preventDefault();
    var form_status= $('<div class="form_status"></div>');
    $.ajax({
            url: $(this).attr('action'),
            type: "POST",
            data: $(this).serialize(),
        beforeSend: function(){
        form.prepend(form_status.html('<div class="contact-form-success alert alert-warning"><i class="fa fa-spinner fa-spin"></i> Enviando mensaje</div>').fadeIn());
            }
        }).done(function(data){
            form_status.html('<div class="contact-form-success alert alert-success"><strong>Mensaje Enviado;</strong> En breve nos contactaremos con usted.</div>').delay(20000).fadeOut();

    });
});

El PHP

<?php
//Guardamos en variables los datos enviados
$name = utf8_decode($_POST['name']);
$email = $_POST['email'];
$phone = utf8_decode($_POST['phone']);
$subject = utf8_decode($_POST['subject']);
$message = utf8_decode($_POST['message']);

///Validamos del lado del servidor que el nombre y el email no estén vacios
if($name == ''){
    echo "Debe ingresar su nombre";
}
else if($email == ''){
    echo "Debe ingresar su email";
}

$para = "[email protected]";//Email al que se enviará
$asunto = utf8_decode("Enviado desde etc.com");//Puedes cambiar el asunto del mensaje desde aqui
//Este sería el cuerpo del mensaje
$mensaje = "
    <table border='0' cellspacing='3' cellpadding='2'>
      <tr>
        <td width='30%' align='left' bgcolor='#f0efef'><strong>Nombre:</strong></td>
        <td width='80%' align='left'>$name</td>
      </tr>
      <tr>
        <td width='30%' align='left' bgcolor='#f0efef'><strong>E-mail:</strong></td>
        <td width='80%' align='left'>$email</td>
      </tr>
      <tr>
        <td width='30%' align='left' bgcolor='#f0efef'><strong>Telefono:</strong></td>
        <td width='80%' align='left'>$phone</td>
      </tr>
      <tr>
        <td width='30%' align='left' bgcolor='#f0efef'><strong>Asunto:</strong></td>
        <td width='80%' align='left'>$subject</td>
      </tr>
      <tr>
        <td width='30%' align='left' bgcolor='#f0efef'><strong>Mensaje:</strong></td>
        <td width='80%' align='left'>$message</td>       
      </tr>
</table>";  

$headers = "From: $name <$email>\r\n"; //Quien envia?
$headers .= "X-Mailer: PHP5\n";
$headers .= 'MIME-Version: 1.0' . "\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";

if(mail($para, $asunto, $mensaje, $headers)){
    echo "";
}?>

Anteriormente mostraba el resultado con alertas sin Javascript es por ello quiza algunas cosas del PHP no corresponde, quite las alertas agregue ese pequeño js y envia. Pero no logro borrar el contenido ni crear tampoco un mensaje en caso no se envie el formulario. De antemano no soy muy bueno, en temas de programacion más que todo veo el tema de apariencia hehe, ojala alguien me ayude que necesito terminar esto.

Gracias.

1 respuesta 1

3

Puedes utilizar $('#main-contact-form').trigger("reset"); dentro del handler .done()

Te quedaría así.

$.ajax({
    // configuracion ajax ...
}).done(function(data){
    //Todo lo que necesites hacer despues de que se termine de hacer la peticion
    $('#main-contact-form').trigger("reset");
});
3
  • Voy a probarlo, ojala funcione
    – xebeac
    el 29 ene. 2019 a las 1:12
  • Si funciona!!! Muy agradecido eh. Medio dia me la eh pasado probando opciones y nada y tu con un comentario solucionaste ello. Gracias nuevamente.
    – xebeac
    el 29 ene. 2019 a las 1:21
  • pero en que parte se coloca esa linea...? yo tengo el mismo problema el 18 dic. 2020 a las 18:09

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.