Hola tengo un formulario de contacto y quiero que al pinchar en enviar, salga el mensajito de mensaje enviado sin necesidad de que salga de mi página o se actualice.
en un archivo llamado index.php...
Tengo en el <head>:
Código HTML:
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
Antes del body(también lo he probado después del body):
Código HTML:
<script>
$('submit').click(function(){
$.ajax({
type:'POST',
url:'send.php',
data: $('#formulario').serialize(),
success: function(res){
$('#respuesta').html(res);
}
});
});
</script> Mi formulario:
Código HTML:
<form id="formulario" method="POST">
<div >
<div>
<input type="text" name="name" id="name" placeholder="Name" required/>
</div>
<div >
<input type="email" name="email" id="email" placeholder="Email" required/>
</div>
<div >
<textarea name="message" id="message" placeholder="Message" rows="7" required></textarea>
</div>
</div>
<ul >
<li><input type="submit" id="submit" value="Send Message" /></li>
<div >
<p id="respuesta"></p></div>
</ul>
</form>
y en el archivo send.php...
Código PHP:
<?php
$nombre = $_POST['name'];
$email = $_POST['email'];
$mensaje = $_POST['message'];
$para = '[email protected]';
$titulo = 'ContactForm';
$header = 'From: ' . $email;
$msjCorreo = "Nombre: $nombre\n E-Mail: $email\n Mensaje:\n $mensaje";
if (mail($para, $titulo, $msjCorreo, $header)) {
$ok= 'Message Sent Succesfully';
} else {
$ok= 'Server Error, Please Try Again';
}
echo $ok;
?> y cuando le doy a submit simplemente actualiza la página sin hacer nada. El php lo he probado usando form action="send.php" y poniendole header location en lugar de la variable $ok y funciona.