формировать подчинение в толстых ящиках

Question

У меня есть контактная форма, открывая в толстую коробку, которую я хочу, когда пользователь нажимает на «Отправить данные», отправляя в мой PHP, который обработает эти данные и покажет успешное MSG обратно в толстую коробку. PHP страница называется, но как я получу данные формы?

Answer 1

Сначала используйте функцию iframe's iframe, чтобы загрузить форму в толстую коробку. Убедитесь, что у вас загружены jquery и wuldbox, положив это в 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 на идентификационное содержание с этим.

Так что сделай contact_us.php Скрипт фактически отправьте электронное письмо или создайте запись базы данных, что бы он ни делал, а затем попросите его вернуть это HTML:

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

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

Очевидно, что это может быть все, что вы хотите, какое бы сообщение вы хотите, чтобы конечный пользователь увидел. Ссылка показывает, как сделать окно толстых ящиков.

Answer 2

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

Изменение примера выше:

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