ejecutar fancybox despues del submit

[cualquiera]

hola por favor como podría ejecutar una función que carga un fancybox después de hacer el submit, via java script, ese java script ejecuta un insert a la bd vía php necesito que después de haber echo le envió o el insert cargue un fancybox con un mensaje de gracias, tengo este código pero no lo consigo.

Código PHP:

  <script type="text/javascript"> 
 
    function Validar(){ 
     
    if(document.fingreso.nombre.value == ""){ 
        alert("Debe ingresar Nombre") 
        document.fingreso.nombre.focus() 
        return 
    } 
     
    if(document.fingreso.apellido.value == ""){ 
        alert("Debe ingresar Apellidos") 
        document.fingreso.apellido.focus() 
        return 
    } 
     
    if(document.fingreso.dni.value == ""){ 
        alert("Debe ingresar DNI") 
        document.fingreso.dni.focus() 
        return 
    } 
     
        document.fingreso.action = "index.php" 
        document.fingreso.proceso.value = "Registrar" 
        document.fingreso.submit() 
     
         
    } 
 
 
</script> 
<script> 
 
function mostrarGracias (){ 
          $("#modalGracias").show(); 
        $.fancybox({ 
        autoSize: true, 
        scrolling: "no", 
        href : "gracias.html", 
        type: "iframe" 
    });       
}     
 
 
 
    </script>  
  

[GusGarsaky]

El código que has puesto explica tu consulta. Te dejo un ejemplo de lo que deberías hacer:

Código Javascript:

document.querySelector('#tuform').addEventListener('submit', function(e) {
    e.preventDefault(); // previene el submit predeterminado
 
    // obtienes la info del formulario y la agregas al objeto
    var data = {}
    data['nombre'] = document.querySelector('#txtname');
    data['apellido'] = document.querySelector('#txtlastname');
    data['dni'] = document.querySelector('#txtdni');
 
    // envías los datos por AJAX
    var xhr = new XMLHttpRequest();
    // esta ruta es el destino de la petición
    xhr.open('POST', 'ruta/al/script', true);
    // habilita el envío de json
    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    xhr.onload = function() {
        if(xhr.status == 200) {
            $("#modalGracias").show();
                       $.fancybox({
                          autoSize: true,
                          scrolling: "no",
                          href : "gracias.html",
                          type: "iframe"
                       });       
        } else {
            // muestras el diálogo Error
        }
    }
    // envías la info
    xhr.send('info='+data);
});
 

Para validar, puedes hacerlo por expresiones regulares. Por ejemplo, para validar un DNI de 8 dígitos:

Código HTML:

<input type="text" id="txtdni" pattern="^(?!\s*$)[0-9\s]{8}$" />
 

[cualquiera]

Hola gracias por la respuesta, unas dudas, lo de validar por expresiones me queda claro, la pregunta es el código que dejas, es solo lo que debo poner, mi código anterior va o ya no utilizo el tuyo, y 2 me da un error en la consola addEventListener off null

te dejo el código del formulario también

Código PHP:

<form action="" method="post" name="fingreso" id="fingreso">
                            <div class="caja_form">
                              <h2>COMPLETA TUS DATOS 
PARA PODER PARTICIPAR</h2>
                                    <p><input type="text" name="nombre" id="nombre" placeholder="Nombre"></p>
                                    <p><input type="text" name="apellido" id="apellido" placeholder="Apellidos"></p>
                                    <p><input type="text" name="dni" id="dni" placeholder="Número de DNI"></p>
                                    <p><input type="button" name="button" id="btnOpenDialog" value="Regístrate!" onClick="javascript:Validar();" class=" boton">
                                    </p>
                                     <input name="codcampana" type="hidden" id="codcampana" value="<?php echo $codcampana; ?>">
                                    <input type="hidden" name="proceso" id="proceso" />
 

[cualquiera]

no me esta funcionando o no se como aplicarlo

[Alexis88]

Por el mensaje de error, supongo que no reemplazaste el id del ejemplo que te dio GusGarsaky por el de tu formulario. Eso es lo que ocurre cuando solo se limita a copiar y pegar en lugar de analizar y adaptar lo que te dan a lo que necesitas.

Como opción al envío de los datos utiliza GusGarsaky en su ejemplo, puedes usar un array y solo juntarías los valores con el método .join() y un & como unión.

Código Javascript:

var data = [];
data.push(
    "nombre" + "=" + document.querySelector("#txtname").value,
    "apellido" + "=" + document.querySelector("#txtlastname").value,
    "dni" + "=" + document.querySelector("#txtdni").value
);
 
//Y en el envío de los datos con el método .send()
xhr.send(data.join("&"));
 

También podrías enviar un objeto literal, como lo hace GusGarsaky en su ejemplo aunque le faltó tomar los valores de los elementos, con la diferencia de que llegaría un objeto con sus valores, mientras que de la forma en la que lo hago, los valores llegan independientes unos de otros. En otras palabras, enviando un objeto, tendrías que ingresar al objeto para poder tomar los valores, mientras que de la otra forma, los puedes tomar directamente con un $_POST['nombre'].

Cualquiera de ambas formas es buena, aunque si optas por la primera, te recomiendo parsear el objeto literal a JSON con el método JSON.stringify() y tan solo tendrías que decodificarlo en el archivo PHP con la función json_decode().

Saludos

[cualquiera]

hola bueno es mas que obio, donde se indica le nombre del id del form por el mio claro que lo reemplace, el problema pasa por que en java script que utilizo esta amarrado con el proceso de insert en el php, los códigos queme ponen, son buenos pero no se adaptan a lo que ya tengo armado y no quiero cambiar todo ya lo echo pues eso lo una adpatacion no es construir todo de nuevo puede dejar todo el código para que revisen

codigo de insert y conssulta

Código PHP:

  <?php include "admin/conexion.php"; ?> 
<?php 
$proceso = $_POST['proceso']; 
if($proceso == 'Registrar'){ 
    $codcampana = $_POST['codcampana']; 
    $codcliente    = $_POST['codcliente']; 
    $nombre         = $_POST['nombre']; 
    $apellido         = $_POST['apellido']; 
    $dni                 = $_POST['dni']; 
      
    $insertar = "INSERT INTO clientes (codcampana, codcliente, nombre, apellido, dni) VALUES('$codcampana','$codcliente','$nombre', '$apellido', '$dni')"; 
     
    $grabar= mysql_query($insertar); 
} 
 
$consulta = "SELECT codcampana, imagen FROM campanas WHERE CURDATE() < fecha_exp AND estado='A'"; 
$resultado = mysql_query($consulta) or die(mysql_error()); 
 
        $fila=mysql_fetch_assoc($resultado); 
        $codcampana     = $fila['codcampana']; 
        $imagen = $fila ['imagen']; 
         
        if($codcampana!=""){ 
        $camp = 1; 
          
        }else { 
          
        $camp = 0; 
    } 
?>   

java script de validacion

Código HTML:

<script type="text/javascript">
function Validar(){
	
	if(document.fingreso.nombre.value == ""){
		alert("Debe ingresar Nombre")
		document.fingreso.nombre.focus()
		return
	}
	
	if(document.fingreso.apellido.value == ""){
		alert("Debe ingresar Apellidos")
		document.fingreso.apellido.focus()
		return
	}
	
	if(document.fingreso.dni.value == ""){
		alert("Debe ingresar DNI")
		document.fingreso.dni.focus()
		return
	}
	
		document.fingreso.action = "index.php"
		document.fingreso.proceso.value = "Registrar"
		document.fingreso.submit()
		
}
/*codigo nuevo*/
</script> 

fancybox que intento adaptar

Código HTML:

<script>
function mostrarGracias (){
  		$("#modalGracias").show();
		$.fancybox({
        autoSize: true,
        scrolling: "no",
		href : "gracias.html",
		type: "iframe"
    });	  
}
	</script> 

todo funciona bien solo necesito mostrar el modal al enviar los datos

saludos y gracias

[Alexis88]

El que tengas tu código organizado de una manera u otra (excepto que ejecutes el script JS antes de la aparición del formulario), no tiene nada que ver con el problema que comentas. Si tomas a un elemento mediante su valor identificador, no debería de aparecer ese error.

Quizá estás intentando ejecutarlo antes de que haya cargado el formulario; en ese caso, tienes que colocar el script al final del documento (antes de la etiqueta </body>) o tendrás que ejecutarlo mediante una función que se disparará cuando haya terminado de cargar el DOM.

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    /* Aquí debes de colocar el script */
}, false);
 

Saludos

[cualquiera]

el error ya no aparece, pero no entiendo como o hay que hacer para que funcione el insert y aparezca el modal no lo hace en realidad no hace nada ni da ningún error ya deje todo los códigos que uso, lo que puede hacer, dejaba por si alguien lo pueda armar o estructurar como se debe hacer pues por mas que intento no le doy.

espero alguien pueda construir lo que busco con los códigos dejados

saludos,

[Alexis88]

No he usado el Fancybox, pero supongo que debe de tener alguna opción para cuando se cierre manualmente la ventana modal que genera y es en esa acción cuando debes de enviar los datos del formulario. En otras palabras, al darle clic al botón de envío de datos, muestras la ventana modal y luego envías los datos pues, por lo que veo en tu código, no lo estás haciendo mediante una petición asíncrona (Ajax) sino de la manera tradicional.

[cualquiera]

en realidad lo que tenia era un alert, cuando enviaba los datos, luego salia un alert y daba la confirmación datos enviados correctamente, en este caso quiero remplazar el alert con un modal que diga lo mismo datos enviados correctamente nada mas, no necesito que el modal envié data ni al abrir ni al cerrar solo es un mensaje de gracias, con el alert funcionaba peor me han pedido que lo cambie a un modal que diga gracias luego del envió solo es eso

Saludos,

[Alexis88]

El caso es que si ejecutas el método .submit(), se recarga la ventana y tu modal no tendrá tiempo para visualizarse. Lo que debes de hacer es buscar en la documentación del FancyBox el evento que se produce cuando se cierra el modal para que ahí ejecutes una función que realice el envío de los datos. También tienes como opción retrasar el envío mediante el método .setTimeout(), así le podrás dar algunos segundo al modal para que se visualice antes de enviar los datos.

Saludos