在厚盒子中提交表格

我有一個聯繫表單在thickbox中打開，我希望當用戶點擊提交表單數據提交給我的PHP，將處理該數據並顯示sucessfull味精回厚盒。 PHP頁面被調用，但我將如何獲取表單數據？在厚盒子中提交表格

2009-02-20 Yasir

首先使用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>

這樣做是：

添加到形式的函數形式提交時被調用。它返回false以防止表單提交的默認行爲發生。
這個提交函數將使用表單的動作來執行一個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>

顯然，這可能是你想要的任何東西，不管您希望最終用戶看到的消息。該鏈接顯示如何使厚盒窗口消失。

來源

2009-02-20 14:57:36 pjb3

非常感謝pjb3，其工作逸岸你送我的完整解決方案。我得到了上面這行js函數，但是下面這行代碼的目的是什麼函數（html）{（'＃content'）。html（html） }） – Yasir 2009-02-20 17:33:28

要發佈表單數據，需要使用jQuery的序列化函數。

修改上面的例子：

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

來源

2009-09-22 05:45:11 CommissarXiii

在厚盒子中提交表格

回答

相關問題