envío de formulario dentro de los grosos

Question

Tengo un formulario de contacto abierto en el cuadro de groseza que quiero cuando el usuario haga clic en Enviar datos de formulario Enviar a mi PHP que procesará esos datos y mostrará a Sucessfull MSG de regreso a Groughbox. Se llama a la página PHP, pero ¿cómo obtendré datos de formulario?

Answer 1

Primero use la función de iframe de grosco para cargar el formulario en el cuadro de groseza. Asegúrese de tener jQuery y grosce cargado colocando esto en el cabezal HTML de su 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" />

Luego, coloque un enlace en la página, la carga del formulario de contacto en el formulario de contacto en el 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>

Su forma debe tener marcado que tenga esta estructura básica:

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

Ahora use jQuery en su formulario a través de AJAX. Pon esto en la cabeza del documento HTML:

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

Lo que esto hace es:

1. Agrega una función al formulario que se llamará cuando se envía el formulario. Devuelve falso para evitar el comportamiento predeterminado de un formulario que se presenta.

2. Esta función de envío hará una publicación de AJAX, utilizando la acción del formulario, en la que establece contact_us.php.

3. Finalmente, esto tomará cualquier contenido contact_us.php Devuelve y reemplaza el contenido del DIV con el contenido de identificación con eso.

Así que haz tu contact_us.php script realmente envíe el correo electrónico o cree un registro de la base de datos, lo que sea que haga, y luego haga que devuelva este HTML:

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

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

Obviamente, esto puede ser lo que desee, cualquier mensaje que desee que vea el usuario final. El enlace le muestra cómo hacer que la ventana del cuadro de espesor desaparezca.

Answer 2

Para publicar datos de formulario, uno necesitaría usar la función Serialize de JQuery.

Modificación del ejemplo anterior:

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