web-dev-qa-db-fra.com

Afficher la réponse du formulaire soumis sur la même page. (Pas de rechargement)

Comment puis-je afficher la réponse d'un formulaire de contact soumis (sur la même page sous le formulaire) plutôt que d'envoyer l'utilisateur à une nouvelle page après la soumission?

J'ai vu des personnes créer un élément div, puis y insérer la réponse reçue. Est-ce une approche recommandée?

Voici ce que j'ai jusqu'à présent:

PHP: 

<?php

$name =$_GET['name'];
$email =$_GET['name'];
$message =$_GET['name'];

$to = "[email protected]";
$subject = "";
$message = "";
$headers = "From: $email";

if(mail($to,$subject,$message,$headers))
{
    echo "<h2>Thank you for your comment</h2>";
}
else{
    echo "<h2>Sorry, there has been an error</2>";
}

?>

et voici leHTML: 

<div class="wrapperB">
                <div class="content">
                    <form id="contactForm" action="assets/email.php" method="get">

                        <label  for="name">Your Name</label>
                        <input  name="name" id="name" type="text" required placeholder="Please enter your name">

                        <label  for="email">Email Address</label>
                        <input  name="email" id="email" type="email" required placeholder="Please enter your email address here">

                        <label  for="message">Message</label>
                        <textarea name="message" id="message" required></textarea>  

                        <button id="submit" type="submit">Send</button> 
                    </form>
                        </div>
                    </div>                  
                </div>
phpformsjquery
7
user2162270

Ceci est un exemple de travail utilisant l'exemple suggéré à partir de JQuery site etpajajaanswer.

Solution:

Placez ceci dans le<head>de votre page Web.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

OU

Téléchargez JQuery et incluez-le de la même manière.

Forme:

Votre formulaire de contact reste inchangé.

<form id="contactForm" action="assets/email.php" Method="POST">
    <label for="name">Your Name</label>
    <input name="name" type="text" required placeholder="Please enter your name">

    <label for="email">Email Address</label>
    <input name="email" type="email" required placeholder="Please enter your email address here">

    <label for="message">Message</label>
    <textarea name="message" required></textarea>  

    <button type="submit">Send</button>
</form>

Données retournées:

Ajoutez votre élément de réponse où vous voulez dans le corps.

<div id="contactResponse"></div>

Javascript:

Maintenant, placez (de préférence juste avant</body>) le code javascript:

<script>
     $("#contactForm").submit(function(event) 
     {
         /* stop form from submitting normally */
         event.preventDefault();

         /* get some values from elements on the page: */
         var $form = $( this ),
             $submit = $form.find( 'button[type="submit"]' ),
             name_value = $form.find( 'input[name="name"]' ).val(),
             email_value = $form.find( 'input[name="email"]' ).val(),
             message_value = $form.find( 'textarea[name="message"]' ).val(),
             url = $form.attr('action');

         /* Send the data using post */
         var posting = $.post( url, { 
                           name: name_value, 
                           email: email_value, 
                           message: message_value 
                       });

         posting.done(function( data )
         {
             /* Put the results in a div */
             $( "#contactResponse" ).html(data);

             /* Change the button text. */
             $submit.text('Sent, Thank you');

             /* Disable the button. */
             $submit.attr("disabled", true);
         });
    });
</script>

Action Script:

Votre fichier de contact (PHP)} _ reste identique, mais remplacez $ _GET par $ _POST:

<?php

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

    $to      = "[email protected]";
    $subject = "";
    $message = "";
    $headers = "From: $email";

    if( mail($to,$subject,$message,$headers) )
    {
        echo "<h2>Thank you for your comment</h2>";
    }
    else
    {
        echo "<h2>Sorry, there has been an error</h2>";
    }

?>

Résultat:

Cela devrait maintenant envoyer les données du formulaire lors de l'envoi, puis afficher les données renvoyées dans l'élément #contactResponse. Le bouton définira également le texte sur "Envoyé, Merci" tout en désactivant le bouton.

11
avitex

Vous pouvez simplement le garder sur la même page. Par exemple, si votre formulaire est sur contact.php, rappelez simplement votre code de la manière suivante:

<form action='' method='post'>
   <input type='test' name='name' placeholder='Your name here' required='required' /><br />
   <input type='submit' value='submit' name='contact' />
</form>
<?php
   if(isset($_POST['contact']) && !empty($_POST['name'])){
      echo "You submitted this form with value ".$_POST['name'].".";
   }
?>

Bien sûr, cela rechargera cette page. Si vous ne voulez pas que la page soit rechargée, vous devez utiliser ajax.

2
jdepypere

Vous devrez utiliser ajax pour cela. La solution la plus simple consiste à obtenir la bibliothèque javascript jQuery et à utiliser sa fonction .post pour laquelle vous pouvez trouver de la documentation et des exemples ici . Dans votre cas, cela ressemblera à quelque chose comme ça:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#submit").click(function(){
    var name_value = $("#name").val();
    var email_value = $("#email").val();
    var message_value = $("#message").val();
    $.post("assets/email.php", { name: name_value, email: email_value, message: message_value }).done(function(data) {
        $("#response").html(data);
    });
  });
})
</script>

De plus, votre code PHP est incorrect:

$name =$_GET['name'];
$email =$_GET['name'];
$message =$_GET['name']

Vous obtenez $_GET['name'] pour les 3 variables.

edit : J'ai ajouté un exemple complet, mais il n'a pas été testé, il vous permet simplement de savoir comment faire ce que vous voulez. De plus, comme il utilise la requête HTTP POST, vous devrez éditer votre PHP afin qu'il obtienne les valeurs $_POST tableau, pas $_GET. De plus, vous devrez ajouter un <div id="response"></div> où vous souhaitez afficher la réponse.

2
pajaja

Je l'ai fait avec le Jquery Form Plugin . Il y a un autre ici .

Mon cas d'utilisation était beaucoup plus impliqué. Cela incluait le téléchargement d'un fichier avec certains champs saisis par l'utilisateur et les informations d'authentification de base dans l'en-tête. Le plugin Form les a tous traités en utilisant les champs normaux $ .ajax.

0
Dean Schulze