Formulierung innerhalb von Dicke

Question

Ich habe ein Kontaktformular, das ich in DickBox geöffnet habe, das ich gewünscht habe, wenn der Benutzer auf Formulierdaten übermittelt werden, um diesen PHP zu übermitteln, das diese Daten verarbeitet und eine erfolgreiche MSG zurück in DickBox zeigt. PHP -Seite heißt, aber wie bekomme ich Formdaten?

Answer 1

Verwenden Sie zunächst die Iframe -Funktion von Dickbox, um das Formular in der Dickenbox zu laden. Stellen Sie sicher, dass Sie JQuery und Dickbox geladen haben, indem Sie dies in den HTML -Kopf Ihres Dokuments stellen:

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

Geben Sie dann einen Link auf die Seite auf, auf der das Kontaktformular im Iframe geladen wird:

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

Ihr Formular sollte ein Markup haben, der diese Grundstruktur hat:

<div id="content">
  <form id="contact_us" action="/contact_us.php" method="POST">
     ...
  </form>
</div>

Verwenden Sie nun JQuery über Ajax in Ihrem Formular. Setzen Sie dies in den Kopf des HTML -Dokuments:

<script type="text/javascript">
  jQuery(function($){
    $('#contact_us').submit(function(){ 
      $.post($(this).attr('action'), function(html) { 
        $('#content').html(html)
      })
      return false
    })
  })
</script>

Was das tut ist:

1. Fügt dem Formular, das aufgerufen wird, eine Funktion hinzu, wenn das Formular eingereicht wird. Es gibt false zurück, um das Standardverhalten eines Formulars, das von Ereignissen eingereicht wird, zu verhindern.

2. Diese Sendungsfunktion erledigt eine AJAX -Post unter Verwendung der Aktion des Formulars, auf die Sie festgelegt sind contact_us.php.

3. Schließlich wird dies den Inhalt nehmen contact_us.php Gibt den Inhalt des DIV durch den ID -Inhalt zurück und ersetzen Sie damit.

Also mach deine contact_us.php Das Skript senden tatsächlich die E -Mail oder erstellen Sie einen Datenbankdatensatz, was auch immer es tut, und lassen Sie sie dann dieses HTML zurückgeben:

<p>Thank you for your submission!</p>

<p><a href="#" onclick="window.parent.tb_remove(); return false">Continue</a>

Offensichtlich kann dies alles sein, was Sie wollen, welche Nachricht, die der Endbenutzer sehen soll. Der Link zeigt Ihnen, wie Sie das Dickbox -Fenster verschwinden lassen.

Answer 2

Um die Formulardaten zu veröffentlichen, müsste man die Serialisierungsfunktion von JQuery verwenden.

Ändern des obigen Beispiels:

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