Comment rester sur la page après la soumission du formulaire

Question

J'ai cherché des jours pour essayer de trouver une réponse à mon problème spécifique, mais je suis incapable de le faire. S'il vous plaît aider.

J'ai un formulaire sur mon site qui, une fois cliqué, devrait envoyer un email. Je veux faire cela tout en restant sur la même page et en changeant la div d'un formulaire à une image.

C'est le code que j'ai réussi à récupérer sur Internet.

S'il vous plaît donner des conseils si possible dans le style le plus Barney possible.
Merci d'avance à tous ceux qui pourraient vous aider.

jQuery(document).ready(function(){ 
 

 
    jQuery('.contact').submit(function() { 
 

 
$.ajax({ 
 
     type: "POST", 
 
     url: "contact-form-handler.php", 
 
     data: dataString, 
 
     success: function() { 
 
     $('#contact_form').html("<div id='message'></div>"); 
 
     $('#message').html("<img src='thankyou.jpg' style='width:100%'/>") 
 
     .append("<p>We will be in touch soon.</p>") 
 
     .hide(); 
 
     }); 
 
     } 
 
    }); 
 
     return false; 
 

 
});

<form method="post" action="" name="contact" id="contact" class="w3-container w3-light-grey w3-margin"> 
 

 
    <div class="w3-row w3-section"> 
 
    <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-user"></i></div> 
 
    <div class="w3-rest"> 
 
     <input class="w3-input w3-border" required name="name" id="name" type="text" placeholder="Name"> 
 

 
    </div> 
 
    </div> 
 

 
    <div class="w3-row w3-section"> 
 
    <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-envelope-o"></i></div> 
 
    <div class="w3-rest"> 
 
     <input class="w3-input w3-border" required name="email" id="email" type="text" placeholder="Email"> 
 

 
    </div> 
 
    </div> 
 

 
    <div class="w3-row w3-section"> 
 
    <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-pencil"></i></div> 
 
    <div class="w3-rest"> 
 
     <input id="message" class="w3-input w3-border" required name="message" type="text" placeholder="Message"> 
 

 
    </div> 
 
    </div> 
 

 
    <p class="w3-center"> 
 
    <input type="submit" name="submit" class="button w3-section w3-black w3-ripple" id="submit_btn" value="Send" /> 
 
    </p> 
 

 

 
</form>

`

<?php 
 
$errors = ''; 
 
$myemail = 'jerry@sitesbyjc.com';//<-----Put Your email address here. 
 
if(empty($_POST['name']) || 
 
    empty($_POST['email']) || 
 
    empty($_POST['message'])) 
 
{ 
 
    $errors .= "\n Error: all fields are required"; 
 
} 
 

 
$name = $_POST['name']; 
 
$email_address = $_POST['email']; 
 
$message = $_POST['message']; 
 

 
if (!preg_match(
 
"/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i", 
 
$email_address)) 
 
{ 
 
    $errors .= "\n Error: Invalid email address"; 
 
} 
 

 
if(empty($errors)) 
 
{ 
 
\t $to = $myemail; 
 
\t $email_subject = "Contact form submission: $name"; 
 
\t $email_body = "You have received a new message. ". 
 
\t " Here are the details:\n Name: $name \n Email: $email_address \n Message: \n $message"; 
 
\t 
 
\t $headers = "From: $myemail\n"; 
 
\t $headers .= "Reply-To: $email_address"; 
 
\t 
 
\t mail($to,$email_subject,$email_body,$headers); 
 
    
 
    
 
} 
 
?>

Answer 1

Si je comprends bien votre question, vous devez utiliser preventDefault() lorsque vous appelez l'AJAX Afin d'éviter la soumission (par défaut), vous pouvez donc faire quelque chose comme ceci:

jQuery(document).ready(function(){ 
    jQuery('.contact').submit(function($e) { 

     $e.preventDefault(); 
     $.ajax({ 
      type: "POST", 
      url: "contact-form-handler.php", 
      data: dataString, 
      success: function() { 
       $('#contact_form').html("<div id='message'></div>"); 
       $('#message').html("<img src='thankyou.jpg' style='width:100%'/>") 
       .append("<p>We will be in touch soon.</p>") 
       .hide(); 
      }); 
     } 
    }); 
    return false; 

}); 

En savoir plus sur preventDefault(), et aussi sur defaultPrevented sur MDN.

Answer 2

Eh bien, vous pouvez attacher le gestionnaire d'événements à votre bouton de soumission et changer le bouton d'envoi en un simple bouton, de sorte qu'il ne soumettra pas le formulaire quand il est cliqué. Le code du bouton peut être modifié pour:

<input type="button" name="submit" class="button w3-section w3-black w3-ripple" id="submit_btn" value="Send" /> 

Le code de gestion des événements peut être modifié à:

jQuery('#submit_btn').submit(function() { 

}; 

Answer 3

Le <form> il a comme comportement par défaut, pour rediriger l'utilisateur vers l'URL sur soumettre. URL prise de l'attribut action. Pour éviter cette redirection, vous devez indiquer au navigateur: "NE PAS rediriger".

court:e.preventDefault()

Long: Dans le soumettre rappel, votre fonction prend un paramètre. Il suffit de le nommer comme: e. C'est un objet, et il a une fonction preventDefault. Cette fonction empêche le comportement par défaut: redirection. Faites cet appel dans la première ligne de la fonction de rappel.