Thickbox内の提出をフォームします

StackOverflow https://stackoverflow.com/questions/569595

  •  05-09-2019
  •  | 
  •  

質問

ユーザーが[フォームデータを送信]をクリックすると、そのデータを処理し、Sucessull MSGをThickBoxに表示するフォームデータを送信すると、厚手のフォームを開いています。 PHPページは呼び出されますが、どのようにフォームデータを取得しますか？

役に立ちましたか？

解決

まず、Thickboxのiframe機能を使用して、FormをThickboxにロードします。これをドキュメントのHTMLヘッドに入れて、jQueryと厚い箱をロードしていることを確認してください。

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

これがすることは次のとおりです。

  1. フォームが送信されたときに呼び出されるフォームに関数を追加します。フォームのデフォルトの動作が発生しないようにするために、falsを返します。

  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ウィンドウを消去する方法が表示されます。

他のヒント

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

上記の例の変更：

$.post($(this).attr('action'), $(this).serialize(), function(html) { 
    $('#content').html(html);
});
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top