¿Qué es posible con event.PreventDefault () y el método ajax POST?

¿Problema?

Tengo un problema en el que no puedo usar un POST HTML normal, ya que actualiza mi página web y hace que se cierre una ‘Pestaña’ controlada por JS. Por lo tanto, obliga al usuario a volver a abrir la pestaña para ver los comentarios del formulario enviado.

Cómo debería funcionar

El usuario ingresa sus datos en el formulario y luego hace clic en enviar, el formulario POST los datos a sí mismo, enviando los datos por correo electrónico a una dirección de correo electrónico. una vez que se envían los datos, un mensaje debe reemplazar el formulario que dice que el correo electrónico fue enviado. (todo sin la pestaña que contiene el cierre del formulario)

Código de Sudo

If (email) is complete {Send Email} echo "thank you for for your email" }else{ Display email form 

¿Lo estoy intentando?

  $('#form1').submit(function(e) { e.preventDefault(); $.ajax({ type: 'POST', url: 'indextest2.php', data: $("#form1").serialize(), success: function(response) { } }); });  

Ahora esto sería genial ya que detiene la actualización de la página y envía el correo electrónico, pero detiene el mensaje “Gracias mensaje enviado” html de reemplazar el formulario.

Entonces, para todos los efectos, el usuario no sabe si el correo electrónico ha sido enviado ya que el formulario todavía está allí mostrando los datos que ingresó.

¿Posible solución?

De alguna manera, obtener la publicación de Ajax para insertar el mensaje de “gracias” en el div correcto sobre el éxito de la publicación de Ajax ?! es posible?

¿O estoy haciendo algo mal, en cuanto a la implementación?

Código real que estoy usando

  
<?php if ($_POST["email"]'') { $ToEmail = 'dancundy@hotmail.com'; $EmailSubject = 'EasyScrap Enquiry'; $mailheader = "From: ".$_POST["email"]."\r\n"; $mailheader .= "Reply-To: ".$_POST["email"]."\r\n"; $mailheader .= "Content-type: text/html; charset=iso-8859-1\r\n"; $MESSAGE_BODY = "Name: ".$_POST["FName"]." "; $MESSAGE_BODY .= $_POST["SName"]."
"; $MESSAGE_BODY .= "Tel: ".$_POST["CTNumber"]; $MESSAGE_BODY .= "
"."email: ".$_POST["email"].""; $MESSAGE_BODY .= "
"."Address: ".$_POST["STName"]." ".$_POST["PCode"]; $MESSAGE_BODY .= "
"."Comment: ".nl2br($_POST["Comment"]).""; mail($ToEmail, $EmailSubject, $MESSAGE_BODY, $mailheader) or die ("Failure"); ?>

Contact Us

Your message was sent, thank you! You will recieve an automated response within the next few minutes and will hear back from a Plymouth Easy Scrap representive shortly.

Contact Us


 

*Denotes a required field

$('#form1').submit(function(e) { event.preventDefault(); $.ajax({ type: 'POST', url: 'indextest2.php', data: $("#form1").serialize(), success: function(response) { } }); });

Aquí está el sitio real que le dará una mejor idea de lo que quiero decir cuando diga ‘tab’ y esperemos que amplíe el problema más.

http://www.cundytech.com/SWCF/indextest2.php

La pestaña con el formulario es “formulario de consulta” en el menú.

Realmente espero que alguien pueda ayudar?

una vez que se envía el mensaje, reemplace el formulario con el mensaje de agradecimiento. esto podría hacerse reemplazando la estructura dom que contiene el formulario con el mensaje de agradecimiento dentro del bloque de éxito ajax

código ajax:

 $('#form1').submit(function(e) { e.preventDefault(); $.ajax({ type: 'POST', url: 'indextest2.php', data: $("#form1").serialize(), success: function(response) { // replace the email form with thank you message $('#targetForm').html("
Thank you for your message !!!
"); } }); });

Happy Coding 🙂

Solución

La solución publicada por @deamweiver funcionó de maravilla. Utilizando la parte de Success de la función de publicación de ajax, pude intercambiar el formulario de un mensaje de agradecimiento después de publicar con éxito los datos del formulario.

Este es el código necesario

 ('#form1').submit(function(e) { e.preventDefault(); $.ajax({ type: 'POST', url: 'indextest2.php', data: $("#form1").serialize(), success: function(response) { $('#form1').html("
Thank you for your message !!!
"); } }); });

Intente seguir cosas:

Página indextest2.php:

 function index(){ //Do whatever receiving the data if(Your job is done){ echo "Success"; }else{ echo "Error"; } } 

Llamada ajax:

 $(document).ready(function(){ $('#form1').submit(function(e){ e.preventDefault(); $.ajax({ type: 'POST', url: 'indextest2.php', data: $("#form1").serialize(), success: function(response) { if(response=="Success"){ $('#contact-area').html("
thank you you message has been sent
") }else{ $('#contact-area').html("
Sorry Something went Wrong !
") } }, error: function (xhr) { alert(xhr.responseText); console.log(xhr.responseText); } }); });

El e que está utilizando aquí es el evento que se genera después de enviar el formulario o hacer clic en el botón Enviar. Luego, actualice el navegador y vaya a la url action="" que ha ingresado en la etiqueta del form . Cada vez que utiliza e.preventDefault , detiene la action de envío del formulario y el código que escribe debajo de e.preventDefault . En general, las personas usan preventDefault para dejar de actualizar navegadores en a etiqueta y submit botones de form . Buena suerte.

¿Qué es un evento en tu javascript?

En su argumento usa evento y en el cuerpo de la función usa e .

el argumento y la variable deben ser iguales.

Para su solución, debería ser e .

El siguiente código puede ayudarte …

 $('#form1').submit(function(e) { e.preventDefault(); $.ajax({ type: 'POST', url: 'indextest2.php', data: $("#form1").serialize(), success: function(response) { } }); }); 
Intereting Posts