formulaire de soumission dans thickbox

Question

J'ai un formulaire de contact ouvert dans thickbox je veux lorsque l'utilisateur cliquez sur Soumettre les données de formulaire soumettre à mon php qui traitera ces données et montrer msg succès à thickbox. La page PHP est appelée mais comment vais-je obtenir des données de formulaire?

Answer 1

Utilisez d'abord la fonction iframe de thickbox pour charger le formulaire dans la zone épaisse. Assurez-vous que vous avez jquery et thickbox chargé en mettant cela dans la tête HTML de votre document:

<script type="text/javascript" src="/javascripts/jquery.js"></script> 
<script type="text/javascript" src="/javascripts/thickbox.js"></script> 
<link href="/stylesheets/thickbox.css" rel="stylesheet" type="text/css" /> 

Ensuite, mettre un lien sur la page des charges du formulaire de contact dans le iframe:

<a href="/contact_us_form.php?KeepThis=true&TB_iframe=true&height=400&width=600&modal=true" class="thickbox" title="Contact Us">Contact Us</a> 

Votre formulaire doit avoir un balisage qui a cette structure de base:

<div id="content"> 
    <form id="contact_us" action="/contact_us.php" method="POST"> 
    ... 
    </form> 
</div> 

Maintenant, utilisez jQuery pour votre formulaire via AJAX. Mettre cela dans la tête du document HTML:

<script type="text/javascript"> 
    jQuery(function($){ 
    $('#contact_us').submit(function(){ 
     $.post($(this).attr('action'), function(html) { 
     $('#content').html(html) 
     }) 
     return false 
    }) 
    }) 
</script> 

Ce que ceci est:

1. Ajoute une fonction à la forme à appeler lorsque le formulaire est soumis. Il renvoie false pour empêcher le comportement par défaut d'une soumission de formulaire.

2. Cette fonction de soumission effectuera une publication AJAX en utilisant l'action du formulaire que vous avez définie sur contact_us.php. Enfin, cela prendra le contenu contact_us.php renvoie et remplacer le contenu de la div avec le contenu de l'ID avec cela.

Alors faites votre script contact_us.php envoyer réellement l'e-mail ou créer un enregistrement de base de données, ce qu'il fait, et ont ensuite retourner ce HTML:

<p>Thank you for your submission!</p> 

<p><a href="#" onclick="window.parent.tb_remove(); return false">Continue</a> 

Évidemment, cela peut être tout ce que vous voulez, peu importe message que vous voulez voir l'utilisateur final. Le lien vous montre comment faire disparaître la fenêtre thickbox.

Answer 2

Pour publier des données de formulaire, il est nécessaire d'utiliser la fonction sérialiser de jQuery.

Modification de l'exemple ci-dessus:

$.post($(this).attr('action'), $(this).serialize(), function(html) { 
    $('#content').html(html); 
});