Отправка формы в пределах коробки

Question

У меня есть контактная форма, открытая в Thickbox. Я хочу, чтобы пользователь нажимал на кнопку "Отправить данные формы" и отправлял их на мой php, который будет обрабатывать эти данные и отображать успешные сообщения обратно в Thickbox. Страница php называется, но как я получу данные формы?

Answer 1

Сначала используйте функцию iframe Thickbox, чтобы загрузить форму в 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>

Что это делает:

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 исчезнуть.

Answer 2

Чтобы опубликовать данные формы, нужно использовать функцию сериализации jQuery.

Модифицируя пример выше:

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