[SOLUCIONADO] submit sin actualizar

kidinshell · #1 (**permalink**) 21/01/2021, 02:13

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.

Alexis88 · #2 (**permalink**) 23/01/2021, 18:22

Te hace falta cancelar el evento de envío con el método .preventDefault():

Código Javascript:

Ver original$("#formulario").on("submit", function(event){
    event.preventDefault();
 
    $.ajax({
        type: $(this).prop("method"),
        url: 'send.php',
        data: $(this).serialize(),
        success: function(res){
            $('#respuesta').html(res);
        }
    });
});

Lo mejoré un poco asociando el evento de envío (submit) al formulario y registrándolo con el método .on().