Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Mostrar/ocultar divs al enviar formulario

Estas en el tema de Mostrar/ocultar divs al enviar formulario en el foro de Javascript en Foros del Web. Tengo un formulario de contacto <form method="post" action="<? $_SERVER['PHP_SELF'] ?>"> ... </form> Y lo que necesito hacer es que al enviar el formulario si se ...
  #1 (permalink)  
Antiguo 07/11/2013, 03:31
 
Fecha de Ingreso: febrero-2007
Mensajes: 165
Antigüedad: 15 años, 6 meses
Puntos: 0
Mostrar/ocultar divs al enviar formulario

Tengo un formulario de contacto

<form method="post" action="<? $_SERVER['PHP_SELF'] ?>">
...
</form>

Y lo que necesito hacer es que al enviar el formulario si se ha enviado correctamente el formulario el div del form desaparezca y salga otro div avisandome del envio correcto de los datos.

Lo que necesito es que todo se realizace en la misma pagina

Digamos que seria asi


DIV FORMULARIO - ¿ENVIO CORRECTO? - OCULTAR DIV FORMULARIO/MOSTRAR DIV MENSAJE



Espero que me haya explicado bien
  #2 (permalink)  
Antiguo 07/11/2013, 04:00
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.545
Antigüedad: 10 años, 9 meses
Puntos: 972
Respuesta: Mostrar/ocultar divs al enviar formulario

Eso lo puedes hacer con Javascript o con su librería jQuery, no con PHP pues eso concierne a la capa de presentación, no a la del negocio. Como quieres que se muestre en la misma página (imagino que sin refrescarla), debes de usar Ajax.

En JS, colocarías algo como esto (trabajando con jQuery):

Código Javascript:
Ver original
  1. $("form").submit(function (e) {
  2.     e.preventDefault(); //Evitas el envío "normal" del formulario
  3.     $.ajax({
  4.         url: $(this).prop("action"), //La página que procesará los datos
  5.         type: $(this).prop("method"), //El método elegido para enviar los datos
  6.         data: $(this).serialize(), //Creamos una "string query" con los datos del formulario
  7.         success: function (response) {
  8.             $(this).hide(); //Ocultamos el formulario
  9.             $("#resultado").html(response).show(); //Insertamos el resultado de la operación en el Div y lo mostramos
  10.         }
  11.     });
  12. });

Saludos
  #3 (permalink)  
Antiguo 07/11/2013, 04:22
 
Fecha de Ingreso: febrero-2007
Mensajes: 165
Antigüedad: 15 años, 6 meses
Puntos: 0
Respuesta: Mostrar/ocultar divs al enviar formulario

Se me ha olvidado comentar que el formulario tengo un captcha, para evitar spam y lo que hago es enviar con la funcion mail los datos del formulario


Cita:
Iniciado por Alexis88 Ver Mensaje
Eso lo puedes hacer con Javascript o con su librería jQuery, no con PHP pues eso concierne a la capa de presentación, no a la del negocio. Como quieres que se muestre en la misma página (imagino que sin refrescarla), debes de usar Ajax.

En JS, colocarías algo como esto (trabajando con jQuery):

Código Javascript:
Ver original
  1. $("form").submit(function (e) {
  2.     e.preventDefault(); //Evitas el envío "normal" del formulario
  3.     $.ajax({
  4.         url: $(this).prop("action"), //La página que procesará los datos
  5.         type: $(this).prop("method"), //El método elegido para enviar los datos
  6.         data: $(this).serialize(), //Creamos una "string query" con los datos del formulario
  7.         success: function (response) {
  8.             $(this).hide(); //Ocultamos el formulario
  9.             $("#resultado").html(response).show(); //Insertamos el resultado de la operación en el Div y lo mostramos
  10.         }
  11.     });
  12. });

Saludos
  #4 (permalink)  
Antiguo 07/11/2013, 04:36
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.545
Antigüedad: 10 años, 9 meses
Puntos: 972
Respuesta: Mostrar/ocultar divs al enviar formulario

Pero no hay problema, en el archivo que procesa los datos, verifica que la función mail() se ejecute correctamente y dependiendo de eso, se muestra un mensaje, por ejemplo:

Código PHP:
Ver original
  1. echo mail($email_to, $email_subject, $email_message, $headers) ? "Datos enviados" : "Error";

Ese resultado será devuelto por el servidor a la página y con lo que te indiqué en la respuesta anterior, dicho mensaje se mostrará en el Div.
  #5 (permalink)  
Antiguo 07/11/2013, 04:47
 
Fecha de Ingreso: febrero-2007
Mensajes: 165
Antigüedad: 15 años, 6 meses
Puntos: 0
Respuesta: Mostrar/ocultar divs al enviar formulario

Haber si entiendo

Hay que crear una pagina para el formulario (form.php) y otra que procesa los datos (enviar.php).

En enviar.php lo que hago es hacer todas las comprobaciones Captcha, envio, ....

Para el captcha

$captchat=$_POST['Captcha']
$captchaim=$_SESSION['Captcha'];

if ($captchat <> $captchaim){
echo "<spam class='incorrecto'>Codigo spam incorrecto</spam>";
}

y para la funcion mail

$enviado=mail(....);
if ($enviado){
echo "<span class='correcto'>Datos enviados correctamente</span>";
}else{
echo "<span class='incorrecto'>Ha habido un problema con el envio</span>";
}


Gracias y perdon por las molestias
  #6 (permalink)  
Antiguo 07/11/2013, 05:01
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.545
Antigüedad: 10 años, 9 meses
Puntos: 972
Respuesta: Mostrar/ocultar divs al enviar formulario

Puedes realizar el envío de datos a la misma página, a fin de cuentas, es la respuesta del servidor la que determinará el mensaje a mostrarse. El Div de la respuesta lo puedes mantener oculto y cuando envíes los datos, con ese script que indiqué más arriba, ocultas el formulario y muestras el Div con la respuesta, con lo que ya no sería necesario que crees esa etiqueta <spam>.
  #7 (permalink)  
Antiguo 07/11/2013, 05:26
 
Fecha de Ingreso: febrero-2007
Mensajes: 165
Antigüedad: 15 años, 6 meses
Puntos: 0
Respuesta: Mostrar/ocultar divs al enviar formulario

Cita:
Iniciado por Alexis88 Ver Mensaje
Puedes realizar el envío de datos a la misma página, a fin de cuentas, es la respuesta del servidor la que determinará el mensaje a mostrarse. El Div de la respuesta lo puedes mantener oculto y cuando envíes los datos, con ese script que indiqué más arriba, ocultas el formulario y muestras el Div con la respuesta, con lo que ya no sería necesario que crees esa etiqueta <spam>.
Ya te he entendido, la instruccion url: $(this).prop("action") seria el post action del formulario.

Muchas gracias

Etiquetas: divs, formulario, mostrar-ocultar, php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:15.