在thickbox中提交表单

Question

我有一个在厚箱中打开的联系表单我希望当用户点击提交表单数据提交到我的php时将处理该数据并显示sucessfull msg回到thickbox.php页面被调用,但我将如何获取表单数据？

Answer 1

首先使用thickbox的iframe功能将表单加载到thickbox中.通过将其放在文档的HTML头中,确保加载了jquery和thickbox:

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

现在通过AJAX将jQuery用于表单.把它放在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. 此提交功能将使用您设置的表单操作执行AJAX帖子contact_us.php.

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

因此,让您的contact_us.php脚本实际发送电子邮件或创建数据库记录,无论它做什么,然后让它返回此HTML:

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

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

显然,这可以是您想要的任何内容,无论您希望最终用户看到什么消息.该链接显示如何使厚箱窗口消失.