envio de formulário dentro da dende

Question

Eu tenho um formulário de contato aberto no ThickBox que eu quero quando o usuário clicar em enviar dados do formulário Envie ao meu PHP que processará esses dados e mostrará uma msg de sucesso de volta ao ThickBox. A página do PHP é chamada, mas como vou obter dados do formulário?

Answer 1

Primeiro, use o recurso iframe do ThickBox para carregar o formulário na caixa espessa. Certifique -se de ter jQuery e espessura carregada colocando isso na cabeça HTML do seu documento:

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

Em seguida, coloque um link na página O carrega o formulário de contato no 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>

Seu formulário deve ter uma marcação que tenha essa estrutura básica:

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

Agora use jQuery no seu formulário via Ajax. Coloque isso na cabeça do documento HTML:

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

O que isso faz é:

1. Adiciona uma função ao formulário a ser chamada quando o formulário é enviado. Ele retorna false para impedir que o comportamento padrão de um formulário submetendo de acontecer.

2. Esta função de envio fará uma postagem de Ajax, usando a ação do formulário, que você define para contact_us.php.

3. Finalmente, isso levará qualquer conteúdo contact_us.php Retorna e substitua o conteúdo da div pelo conteúdo de ID com isso.

Então faça o seu contact_us.php O script realmente envia o email ou crie um registro de banco de dados, o que quer que ele faça, e depois que ele retorne este HTML:

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

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

Obviamente, isso pode ser o que você quiser, qualquer querer que o usuário final veja. O link mostra como fazer a janela de espessura desaparecer.

Answer 2

Para publicar dados de formulário, seria necessário usar a função serializada do JQuery.

Modificando o exemplo acima:

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