我在thickbox中打开了一个联系表单,当用户单击提交表单数据时,我希望将其提交到我的php,该php将处理该数据并将成功的消息显示回thickbox。 php 页面被调用,但我如何获取表单数据?
最佳答案
首先使用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>
它的作用是:
向表单添加一个函数,以便在提交表单时调用。它返回 false 以防止发生表单提交的默认行为。
此提交函数将使用您设置为
contact_us.php
的表单操作执行 AJAX 发布。最后,这将获取
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>
显然,这可以是您想要的任何内容,无论您希望最终用户看到什么消息。该链接向您展示了如何使厚盒窗口消失。
关于javascript - 在thickbox内提交表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/569595/