formulaire "envoyer des commentaires" incorporé qui ne se régénère pas

Question

Chaque pied de page de n'importe quelle page de mon site Web (application LAMP) comporte un petit formulaire dans lequel les utilisateurs peuvent laisser des commentaires. Le formulaire a quelques champs et un bouton "envoyer". À la droite du bouton d'envoi, je projette une image disant quelque chose "nous reviendrons vers vous" dans une écriture cursive sympa.

Idéalement, je voudrais que les utilisateurs remplissent le formulaire, cliquez sur envoyer, et que l'image soit remplacée par une autre image disant quelque chose comme "merci .." et l'application pour envoyer un e-mail prédéfini -mail adresse le contenu de ce formulaire. Je voudrais que cela se produise sans un rechargement de page et sans que l'utilisateur ne perde sa fenêtre défilée sur la page Web.

Je sais que PHP a des fonctions pour envoyer des e-mails, mais ceux-ci sont vraiment dépendants de POSTing le formulaire avec le contenu, donc - rechargement et l'envoi est fait sur le côté du serveur bien sûr. Mais ici, sans rechargement de page.

Je connais AJAX, ce qui me permet d'envoyer des requêtes au serveur. Est-ce ainsi que c'est fait? avoir une page sur le serveur qui n'est jamais vraiment visible pour les utilisateurs et AJAX suffit d'invoquer une requête à partir du formulaire utilisateur une fois que "envoyer" est fait? cette page sera exécutée côté serveur mais ne retournera jamais une nouvelle page ou ne forcera pas une navigation en dehors de l'endroit où se trouve l'utilisateur? Je n'ai pas besoin d'une ventilation ligne par ligne, mais si quelqu'un peut simplement me dire dans quelle direction quelque chose comme cela peut être réalisé, je ferais moi-même la recherche technique pour la mise en œuvre.

Answer 1

Vous auriez ajax post à une fonction php avec les données du formulaire, et le rappel de succès pour l'ajax remplacerait l'image.

Quelque chose comme

$.ajax({ 
    url: "send_comments.php", 
    data: { email: $("#email").value() }, 
    success: function(data) { 
     $(".comments img").html(/* new image html */); 
    }) 
}); 

Ceci suppose que vous avez jQuery disponible.