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 = "contacto@etc.com";//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.