2

私はthickboxで開いている連絡先フォームを持っています。ユーザーがフォームデータの送信をクリックすると、そのデータが処理され、successfullメッセージがthickboxに返されます。PHPページが呼び出されますが、フォームデータを取得するにはどうすればよいですか?

4

2 に答える 2

9

まず、thickbox の iframe 機能を使用して、thickbox にフォームを読み込みます。これをドキュメントの HTML head に配置して、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 ドキュメントの head に挿入します。

<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返されたコンテンツを受け取り、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>

明らかに、これは、エンド ユーザーに表示したいメッセージであれば何でもかまいません。リンクは、thickbox ウィンドウを非表示にする方法を示しています。

于 2009-02-20T14:57:36.217 に答える
2

フォーム データを投稿するには、jQuery のシリアル化関数を使用する必要があります。

上記の例を次のように変更します。

$.post($(this).attr('action'), $(this).serialize(), function(html) { 
    $('#content').html(html);
});
于 2009-09-22T05:45:11.693 に答える