Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] submit sin actualizar

Estas en el tema de submit sin actualizar en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/01/2021, 02:13
 
Fecha de Ingreso: marzo-2013
Mensajes: 75
Antigüedad: 9 años, 3 meses
Puntos: 1
submit sin actualizar

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.

Última edición por kidinshell; 21/01/2021 a las 02:19
  #2 (permalink)  
Antiguo 23/01/2021, 18:22
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.539
Antigüedad: 10 años, 7 meses
Puntos: 970
Respuesta: submit sin actualizar

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

Código Javascript:
Ver original
  1. $("#formulario").on("submit", function(event){
  2.     event.preventDefault();
  3.  
  4.     $.ajax({
  5.         type: $(this).prop("method"),
  6.         url: 'send.php',
  7.         data: $(this).serialize(),
  8.         success: function(res){
  9.             $('#respuesta').html(res);
  10.         }
  11.     });
  12. });

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

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Etiquetas: submit
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:40.