1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Ayuda 3 formularios 1 Botón de Registro

Tema en 'HTML y CSS' comenzado por Dannys1899, 4 de Julio de 2017.

  1. Dannys1899

    Dannys1899 Nuevo Miembro

    Se incorporó:
    24 de Agosto de 2015
    Mensajes:
    28
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Buenas tardes señores de Heroes de la web , de ante mano gracias por la plataforma de ayuda . En esta ocasión quisiera que alguien me ayudara a resolver lo siguiente : estoy usando un elemento de boostrap se llama nav-tabs este me permite tener varias pestañas para dividir algún contenido. Ahora bien yo quise dividir un formulario en 3 partes, la primera pestaña llamada datos básicos , la 2da datos matrimoniales y la 3era datos adicionales , básicamente lo que quiero es que en la ultima pestaña cuando presione el botón registrar me guarde en mi base de datos toda esta información . Adjunto proyecto con base de datos.
    Tambien me gustaria que al final de cada formulario se encuentre un boton que me permita desplazarme al segundo formulario , ya lo coloque pero no logro hacerlo cambiar.

    En un solo formulario me funciona perfectamente el problema es que se ve muy largo y por eso se me ocurrió hacerlo con este elemento de boostrap (nav-tabs.)

    Tengo codigo en javascrip para mostrar y ocultar campos estos me funcionan bien.
     

    Archivos adjuntos:

  2. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.477
    Me gusta recibidos:
    682
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    bueno aun que esto ya fue hace meses pero aun pedías ayuda, vine a brindártela!

    upload_2017-11-20_15-27-28.png
    Esta imagen es un ejemplo de todas las variables que manda el formulario por post! y efectivamente ya se guardan los datos en tu Base de Datos! solo necesitas mejorar tu codigo por que esta demasiado desordenado y como recomendacion no pongas todo el codigo en una sola pagina, y con eso me refiero a que no pongas PHP, JS, CSS todo junto en el index queda muy mal la vista viendo ese tipo de Codigos! solo es un consejo!

    ahora empezare a explicarte el codigo ya que de nada serviria hacerte el codigo y que no aprendas nada! asi no se solucionan las cosas!

    Primero que nada, el menu de Tabs esta estructurado asi!
    HTML:
    <ul class="nav nav-tabs">
      <li class="active"> <a href="#home" data-toggle="tab">Datos basicos</a></li>
      <li><a href="#profile" data-toggle="tab">Datos Matrimoniales</a></li>
      <li><a href="#messages" data-toggle="tab">Datos adicionales</a></li>
    </ul>
    si te das cuenta tiene link's de enlace para mostrar los div con id's y un data toggle que hace llamar a la funcion de bootstrap para mostrarlo como tab! al hacer click en el enlace de TAB este mostrara un div con el id igual al que se llama en el link href="#profile"
    <div id="#profile"></div>

    lo que se tenia que hacer en estos caso era que simulara un click al enlace Tab cuando se presionara el boton de Siguiente que esta en el formulario, para eso como usas JQUERY, existe una funcion llamada trigger() la cual sirve para simular ese tipo de funciones que requeríamos!
    Código (Javascript):
    $(".btnF").click(function(e) {
                e.preventDefault();
                let tab = $(this).data('toggle'); // Obtenemos el Tab que se mostrara
                let type = $(this).attr('type'); // Obtenemos el Tipo que tiene el boton, esto es para el boton de Reset y eliminar los valores del formulario!
                $('.nav li a[href="'+tab+'"]').trigger( "click" ); // Simulamos el Click al Tab Enlace

               // Aqui Comprobamos si el boton es para reiniciar el Formulario!
                if (type == 'reset') {
                    $('#form')[0].reset();
                }
            });
    ese es el codigo creado con JQUERY para que cuando presionara el boton de Siguiente o Atras simulara que se dio click en el enlace TAB!

    HTML:
    <button type="button" data-toggle="#messages" name="cmdsiguiente" id="cmdsiguiente"  class="btn btn-lg btn-success btnF" aria-label="Left Align">
      <span class="glyphicon glyphicon-log-in" aria-hidden="true"></span> Siguiente->.
    </button>
    <button type="button" data-toggle="#home" name="cmdatras" id="cmdatras"  class="btn btn-lg btn-danger btnF" aria-label="Left Align">
      <span class="glyphicon glyphicon-log-in" aria-hidden="true"></span> <-Atras.
    </button>
    ahora este es el botón el cual acciona para ir a la siguiente Tab o a la Anterior! mediante data-toggle="#home" especificamos a cual Tab tenemos que Mostrar!
    funcionaria igual que el enlace del menu nav-tabs
    <a href="#profile" data-toggle="tab">Datos Matrimoniales</a>

    Eso fue lo que se tuvo que modificar para que funcionara como lo querías! haa por cierto, uni todos los formularios en 1 solo pero separandolos con Tabs como querias!

    ahora la parte del servidor para guardar los valores en una Base de Datos tuve que actualizarlo a MYSQLI ya que tu código estaba Deprecated/Antiguo
    te recomiendo ver este curso para que aprendas mas ;)


    El Archivo Modificado lo subi en un Adjunto Descargalo y Veelo ;)
     

    Archivos adjuntos:

    A Dannys1899 y oscar fernando les gusta esto.
  3. Dannys1899

    Dannys1899 Nuevo Miembro

    Se incorporó:
    24 de Agosto de 2015
    Mensajes:
    28
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Gracias por la explicación!! Y por tu ayuda lo voy a revisar para fijarme en todos los detalles. ¿Que me puedes recomendar para aprender a programar en web? Siento que es complicado.
     
  4. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.477
    Me gusta recibidos:
    682
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    lo que te recomiendo es que veas cursos tanto de HTML5 y JS como de PHP, en youtube puedes encontrar muchos solo es cuestión de buscar ;)




     

Comparte esta página