Foros del Web » Programando para Internet » Jquery »

Mantener abierta la ventana modal al enviar un formulario

Estas en el tema de Mantener abierta la ventana modal al enviar un formulario en el foro de Jquery en Foros del Web. Hola a tod@s.. Espero que me podáis ayudar en un problemilla que me lleva de cabeza y no encuentro la forma de solucionarlo. Veréis tengo ...
  #1 (permalink)  
Antiguo 18/11/2017, 02:56
 
Fecha de Ingreso: enero-2011
Ubicación: España
Mensajes: 222
Antigüedad: 13 años, 9 meses
Puntos: 7
Mantener abierta la ventana modal al enviar un formulario

Hola a tod@s..
Espero que me podáis ayudar en un problemilla que me lleva de cabeza y no encuentro la forma de solucionarlo.
Veréis tengo un formulario de contacto que esta en una página y funciona perfectamente y ahora necesito ponerlo por cuestiones de diseño dentro de una ventana modal.
En dicha ventana he colocado un botón de cierre y la misma se cierra correctamente tanto si pulso dicho botón como si pulso fuera de ella y eso es correcto en su funcionamiento
Mi problema es que cuando coloco dentro de dicha ventana el formulario de contacto si se pulsa el botón de ENVIAR del formulario se cierra la ventana, independientemente de si se han rellenado todos los campos de dicho formulario o no, y necesito que la ventana permanezca abierta hasta que el usuario decida cerrarla con el botón de cierre de la misma o pulse fuera de la ventana modal, porque al pulsar sobre el botón de ENVIAR del formulario el usuario recibe en el mismo formulario una información de si el campo esta correctamente o esta vació y permite al usuario modificar el contenido del campo y volver a intentar el envio de nuevo, al mismo tiempo si todo esta correcto le informa de que se ha enviado el correo.
El código que tengo es el siguiente he reducido los campos del formulario a uno para que el código sea menos extenso y mas comprensible, si necesitáis alguna otra información o alguna otra parte del código me lo indicáis y lo colocare.
Espero que me podáis ayudar.

Menu.php
Código:
	<script>
	$(function() {
	    $('#contacto').on('click', function () {
	        $.fn.custombox( this, {
	            effect: 'newspaper'
	        });
	        return false;
	    });
	});
	</script>
<body>
    <div id="MenContacto"><a href="#modalcontacto" id="contacto"><img src="../Imagenes/ImgMenus/MenCont1.png" onmouseover="this.src='../Imagenes/ImgMenus/MenCont2.png';" onmouseout="this.src='../Imagenes/ImgMenus/MenCont1.png';" alt=""/></a></div>
    
    <div id="modalcontacto" style="display: none;" class="modal-prodserv-content">
        <?php (require_once ("Contenido_Menu_Contacto.php")); ?>
    </div>
</body>
Contenido_Menu_Contacto.php
Código:
<body>
<div class="modal-prodserv-header">
    <div class="BotonCierre">
        <img onClick="$.fn.custombox('close');" src="Imagenes/ImgMenus/BotCerrar1.png" onmouseover="this.src='Imagenes/ImgMenus/BotCerrar2.png';" onmouseout="this.src='Imagenes/ImgMenus/BotCerrar1.png';" alt=""/></img>
    </div>
</div>

  <div class="modal-prodserv-body">
      <div id="Contacto">
          <div id="Formulario">
            <?php
                 $nombre     = '';
            if(isset($_POST['enviar']))
            {
                 $nombre     = $_POST['nombre'];
                if(trim($nombre) == '')
                {
                    $error = '<div class="mensusuario">Por favor escriba su nombre!</div>';
                }
             
                if($error == '')
                {
                    if(get_magic_quotes_gpc())
                    {
                        $mensaje = stripslashes($mensaje);
                    }

                    $to      = "[email protected]";
                    $asunto = '[bla, bla, etc...] : ' . $asunto;
                    $msg     = "De: $nombre \r\n";

                    mail($to, $asunto, $msg, "From: $email\r\nReply-To: $email\r\nReturn-Path: $email\r\n");
            ?>
    <div id="Respuesta">                  
      <h1>Correo enviado</h1>
         <p>Gracias <b><?=$nombre;?></b>, nos pondremos en contacto con Vd. lo antes posible!</p>
         <p align="center"><a href="index.php"><img border="0" src="images/Estrella.gif" width="10" height="7" />&nbsp;&nbsp;&nbsp;Volver a INICIO&nbsp;&nbsp;&nbsp;<img border="0" src="images/Estrella.gif" width="10" height="7" /></a></p>                 
    </div>
<?php
        }
    }

    if(!isset($_POST['enviar']) || $error != '')
    {
?>
      <div id="MensajeError"><?=$error;?></div>
        <form action="" method="Post" name="Form1" id="Form1">
            <div id="LabelNombre" class="cabeceras">Nombre:</div>
                <div id="ContNombre"><input name="nombre" class="Contenido" type="text" id="nombre" size="43" value="<?=$nombre;?>" /></div>

  <!-- AQUI ESTA EL BOTON ENVIAR QUE NO QUIERO QUE CIERRE EL MODAL -->
  <div id="BotEnviar"><input name="enviar" type="submit" class="button" id="enviar" value="" /></div>
        </form>
          </div>
      </div>           
  </div>
</body>
perdonad si al copiar y pegar hay alguna parte del formulario con algún error, pero ya os comento al principio que el mismo funciona correctamente.
Gracias por vuestro interés y ayuda.
__________________
¿Hay algo mas hermoso que ayudar.?
  #2 (permalink)  
Antiguo 18/11/2017, 09:01
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años
Puntos: 977
Respuesta: Mantener abierta la ventana modal al enviar un formulario

Si el plugin que usas es este, la solución se encuentra en la sección de opciones del manual. Solo necesitas inhabilitar la opción de cerrado al clickear sobre la ventana modal.

Código Javascript:
Ver original
  1. new Custombox.modal({
  2.     content = {
  3.         clone: false,
  4.     }
  5. });

Y si usas otro plugin, te sugiero buscar su respectiva documentación para que puedas hallar la solución.

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 19/11/2017, 03:28
 
Fecha de Ingreso: enero-2011
Ubicación: España
Mensajes: 222
Antigüedad: 13 años, 9 meses
Puntos: 7
Respuesta: Mantener abierta la ventana modal al enviar un formulario

Gracias Alexis88 por tu ayuda.
Lo que uso es el "jquery.custombox.js", no se si el que me indicas es mejor aunque creo que se trata del mismo, perdona mi ignorancia pero es que soy novatillo en este tema.
He revisado la documentación del mismo y no veo la solución porque cuando pulso sobre cualquier parte de la ventana modal excepto sobre el botón de cierre de la misma, no se me cierra funciona bien, cuando funciona mal es cuando pulso sobre el botón enviar del formulario que debería de enviar el mismo y seguir manteniendo abierta la ventana y es eso lo que me funciona mal ya que lo que hace enviar el formulario y cerrarme la ventana.
Lo que necesito es inhabilitar la opción de cerrar la ventana al clickear sobre el botón de enviar del formulario.
No se si seria mucho pedirte que miraras tu la documentación del mismo porque no he visto como solucionarlo.
Muchas gracias a tod@s.
__________________
¿Hay algo mas hermoso que ayudar.?

Última edición por unexes; 19/11/2017 a las 03:45
  #4 (permalink)  
Antiguo 19/11/2017, 23:39
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años
Puntos: 977
Respuesta: Mantener abierta la ventana modal al enviar un formulario

Imagino que el envío de la información la realizas mediante una petición asíncrona (AJAX). Si es así y como no veo en qué parte controlas eso, te sugiero cancelar el envío natural de la información del formulario (evento submit) y luego de eso proceder al envío mediante AJAX.

Código Javascript:
Ver original
  1. $(document).on("submit", "#Form1", function(event){
  2.     event.preventDefault(); //Se cancela el evento "submit"
  3.  
  4.     //Aquí realizarías el envío mediante AJAX
  5. });

Te digo todo esto porque creo que el evento submit del formulario de contacto puede ser el causante del problema. De no ser así, te sugiero buscar la sección de la documentación del plugin que usas en donde se trate acerca del cerrado de la ventana (usualmente se denomina close, ya sea como evento o método). Y si ni con eso logras hallar la solución, te recomiendo buscar otros plugins que tengan la documentación respectiva para que evites tener este tipo de problemas.

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #5 (permalink)  
Antiguo 21/11/2017, 02:29
 
Fecha de Ingreso: enero-2011
Ubicación: España
Mensajes: 222
Antigüedad: 13 años, 9 meses
Puntos: 7
Respuesta: Mantener abierta la ventana modal al enviar un formulario

Gracias de nuevo Alexis88.
Supongo que el problema es que no envío la información mediante una petición asíncrona (AJAX), simplemente porque no se como hacerlo, soy todavía muy novato en esto, aunque debe de ser muy fácil por lo que he leído y visto en la red pero no he visto o no he sabido ver como adaptarlo a mi código, en los próximos días buscare en los ejemplos que hay en la red o seguiré dejándolo de momento en una página aparte como estaba y que funcionaba bien, hasta que aprenda como se hace.
No quiero abusar de tu inestimable ayuda, muchas gracias por la misma, no obstante si encuentro la forma la publicare aquí para que sirva a otros compañer@s.
__________________
¿Hay algo mas hermoso que ayudar.?
  #6 (permalink)  
Antiguo 25/11/2017, 04:21
 
Fecha de Ingreso: enero-2011
Ubicación: España
Mensajes: 222
Antigüedad: 13 años, 9 meses
Puntos: 7
Respuesta: Mantener abierta la ventana modal al enviar un formulario

Buenos días.
Ante mi imposibilidad de encontrar con el código que tengo actualmente la forma de hacerlo funcionar dentro de una ventana modal por culpa de mis escasos conocimientos, alguien me podría indicar una página donde yo pudiera encontrar un código como ejemplo para bajármelo y adaptarlo de un formulario de contacto con validación y que se enviara la información mediante una petición asíncrona (AJAX).
Gracias
__________________
¿Hay algo mas hermoso que ayudar.?
  #7 (permalink)  
Antiguo 25/11/2017, 05:34
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 9 años, 4 meses
Puntos: 263
Respuesta: Mantener abierta la ventana modal al enviar un formulario

la verdad no entiendo porque si no quieres que se cierre utilizar un submit lo cual sabes que va a refrescar toda la pagina al ejecutar el envío del form, por el contrario deberías de utilizar ajax y procesas el form en un archivo a parte para asi manipular las respuestas en tu pantalla sin salir de esta y sin que se cierre el modal por ejemplo.
__________________
[email protected]
HITCEL
  #8 (permalink)  
Antiguo 25/11/2017, 09:15
 
Fecha de Ingreso: enero-2011
Ubicación: España
Mensajes: 222
Antigüedad: 13 años, 9 meses
Puntos: 7
Respuesta: Mantener abierta la ventana modal al enviar un formulario

Hola xfxstudios y gracias por tu ayuda.
Ya se que debo utilizar ajax pero mi problema es que nunca he hecho nada con ajax y por lo tanto no lo se utilizar por eso busco un ejemplo en la red para adaptarlo y comprender su funcionamiento mientras lo adapto.
Necesito ayuda por culpa de mis escasos conocimientos, si me podéis ayudar os quedaría muy agradecido..
__________________
¿Hay algo mas hermoso que ayudar.?
  #9 (permalink)  
Antiguo 25/11/2017, 13:04
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años
Puntos: 977
Respuesta: Mantener abierta la ventana modal al enviar un formulario

Estimado, solo por mera curiosidad, ¿has buscado algún ejemplo en internet? Yo aprendí viendo algunos de los miles que hay en la red.

Si encuentras alguno, lo analizas, implementas y no logras hallar la solución, pregúntanos pero con el código por delante, por favor. No lo tomes a mal, pero es mejor aprender por cuenta propia y que los demás te ayuden con lo que no entiendes a que esperes a que los demás te demos incluso algo tan fácil de encontrar en la red como lo es un ejemplo.

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #10 (permalink)  
Antiguo 25/11/2017, 15:22
 
Fecha de Ingreso: enero-2011
Ubicación: España
Mensajes: 222
Antigüedad: 13 años, 9 meses
Puntos: 7
Respuesta: Mantener abierta la ventana modal al enviar un formulario

Gracias Alexis88.

Por supuesto no me lo tomo a mal, os entiendo, pero como veréis he puesto al principio de este post el código que tengo y por supuesto no pretendía que nadie me diera el código hecho, si se ha interpretado así pido disculpas, lo que pasa que después de mirar un montón de páginas en la red y ver también bastantes ejemplos tengo la cabeza hecha un lió y no se de todo lo que he visto, que es mejor, ya que no entiendo mucho.

Lo que pretendía en realidad es que alguien me aconsejara una determinada página donde mirar algún buen ejemplo o donde encontrar en la red un código correcto para que pueda asimilarlo y aprender, por supuesto mi intención es adaptarlo por mi mismo antes de solicitar vuestra ayuda que por supuesto considero inestimable.

Bueno siento que mi anterior post se haya interpretado mal, espero a partir de ahora expresarme mejor, voy a seguir buscando en la red y cuando lo encuentre os pedire vuestra opinión o vuestra ayuda, muchas gracias a tod@s.
__________________
¿Hay algo mas hermoso que ayudar.?

Última edición por unexes; 25/11/2017 a las 15:28
  #11 (permalink)  
Antiguo 25/11/2017, 17:26
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 9 años, 4 meses
Puntos: 263
Respuesta: Mantener abierta la ventana modal al enviar un formulario

EJEMPLO 1

EJEMPLO 2

Te dejo un par de códigos que podrías adaptar a tu caso, ajax es un poco necio al principio de aprender, pero se toma el hilo rápidamente, en la mayoria de los blog donde tomas ejemplos, veras una serie de comentario donde incluso se terminan de despejar algunas dudas que te surjan, te dejo un par de fragmentos adicionales para que te des una idea:


Campos:
Código HTML:
Ver original
  1. <input type="text" name="nombre" id="nombre"/>
  2. <input type="text" name="apellido" id="apellido"/>

Codigo ajax:
Código Javascript:
Ver original
  1. obj = {
  2.    nombre : $("#nombre").val(),
  3.    apellido : $("apellido").val()
  4. }
  5.  
  6. $.post("tuarchivophp.php",obj)
  7. .done(function(resp){
  8. //aqui tu codigo si funcionan tu peticion y analizas la respuesta
  9. })
  10. .fail(function(err){
  11. //aqui tu codigo si falla el ajax
  12. })

Tu php

Código PHP:
Ver original
  1. if(isset($_POST['nombre']) && isset($_POST['apellido'])){
  2.  
  3. //Resto de lo que haga tu php
  4.  
  5. echo "Se ha procesado tu petición"
  6.  
  7. }else{
  8.  
  9. echo "Se han omitido campos, por favor verifique
  10.  
  11. }

es un modelo bastante básico al que adaptarias tu trabajo con los respectivos analisis de seguridad y todo lo demás.

espero te sirva la ayuda. Saludos
__________________
[email protected]
HITCEL
  #12 (permalink)  
Antiguo 26/11/2017, 03:41
 
Fecha de Ingreso: enero-2011
Ubicación: España
Mensajes: 222
Antigüedad: 13 años, 9 meses
Puntos: 7
Respuesta: Mantener abierta la ventana modal al enviar un formulario

Gracias xfxstudios y al resto.

Aunque lo que has puesto según dices es bastante básico a mi me esta sirviendo mucho para aclararme las ideas y empezar a comprender el funcionamiento del mismo.

Con los 2 ejemplos que me has sugerido y la ayuda que has puesto creo que en un par de días tendré resuelto el problema y si me surje algún alguna duda os la comentare.

Muchísimas gracias a tod@s.
__________________
¿Hay algo mas hermoso que ayudar.?

Etiquetas: abierta, form, formulario, funcion, imagenes, input, javascript, modal, php, ventana
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 11:50.