在thickbox内提交表单

Question

我在thickbox中打开了一个联系表单，当用户单击“提交表单数据”时，我希望将其提交到我的php，该php将处理该数据并将成功的消息显示回thickbox。 php 页面被调用，但我如何获取表单数据？

Answer 1

首先使用thickbox的iframe功能加载thickbox中的表单。 确保您已加载 jquery 和thickbox，方法是将其放入文档的 HTML 头部：

<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" />

然后在页面上放置一个链接，在 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>

您的表单应该具有具有以下基本结构的标记：

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

现在使用 jQuery通过 AJAX 发送到您的表单。 将其放在 HTML 文档的头部：

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

其作用是：

1. 向表单添加一个函数，以便在提交表单时调用。 它返回 false 以防止发生表单提交的默认行为。

2. 此提交函数将使用您设置为 contact_us.php 的表单操作执行 AJAX 发布。

3. 最后，这将采用 contact_us.php 返回的任何内容，并将 div 的内容替换为 id 内容。

因此，让您的 contact_us.php 脚本实际发送电子邮件或创建数据库记录，无论它执行什么操作，然后让它返回以下 HTML：

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

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

显然，这可以是您想要的任何内容，无论您想要结束什么消息用户查看。 该链接向您展示了如何使厚盒窗口消失。

Answer 2

要发布表单数据，需要使用 jQuery 的序列化函数。

修改上面的例子：

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