soumission de formulaire dans thickbox

Question

J'ai un formulaire de contact ouvert thickbox je veux quand utilisateur clique sur les données de formulaire soumettre à mon php qui traitera les données et montrer sucessfull msg Retour à thickbox. page php est appelé, mais comment je vais obtenir des données de formulaire?

Answer 1

La fonction iframe de la première utilisation de thickbox pour charger le formulaire dans la thickbox. 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, placez 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 des balises qui a cette structure de base:

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

Utilisez jQuery à 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>

Qu'est-ce que cela fait est:

1. Ajoute une fonction à la forme à appeler lorsque le formulaire est soumis. Elle retourne false pour empêcher le comportement par défaut d'un formulaire de soumission se produire.

2. Cette fonction de soumission fera un poste AJAX, en utilisant l'action de la forme, que vous définissez à contact_us.php.

3. Enfin, cela prendra toutes les déclarations contact_us.php contenu et remplacer le contenu de la div avec le contenu identifiant 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 ensuite le retourner ce code HTML:

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

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

Il est évident que cela peut être tout ce que vous voulez, quel que soit message que vous voulez que l'utilisateur final pour voir. Le lien vous montre comment faire la fenêtre thickbox disparaissent.

Answer 2

Pour envoyer des données de formulaire, on aurait besoin d'utiliser la fonction serialize jQuery.

Modification de l'exemple ci-dessus:

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