题
当用户单击提交表单数据提交给我的PHP时,我希望在厚箱中打开联系表格,该表格将处理该数据并将Sucessfull msg显示回厚箱。 PHP页面是调用的,但是我将如何获得表单数据?
解决方案
首先使用厚框的iframe功能将表格加载到厚箱中。确保将其放入文档的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" />
然后在页面上放置一个链接。
<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>
这是什么是:
在提交表单时将函数添加到要调用的表单中。它返回错误,以防止提交表单的默认行为发生。
此提交功能将使用表格的操作来执行AJAX帖子,您将其设置为
contact_us.php
.最后,这将采取任何内容
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>
显然,这可以是您想要的任何东西,无论您希望最终用户看到什么消息。该链接向您展示了如何使厚的窗口窗口消失。
其他提示
要发布表单数据,需要使用jQuery的序列化函数。
修改上述示例:
$.post($(this).attr('action'), $(this).serialize(), function(html) {
$('#content').html(html);
});
不隶属于 StackOverflow