Formulario Wizard ejemplo - gisminero/rpm GitHub Wiki
En esta pagina vamos a ver como se escribe un formulario web que haga uso de un formulario wizard para avanzar a través de él mediante botones que permitirán navegar entre las distintas paginas que componen el formulario
El formulario debe ser divido en varias paginas, a su vez cada pagina posee al menos dos botones para poder ir a la pagina anterior (a excepción de la primer pagina) o hacia la siguiente pagina (a excepción de la ultima).
Ref: https://www.dnndev.com/Learn/Guide/Article/creating-wizard-form-xmod-pro
El codigo del formulario desarrolla se encuentra: https://github.com/gisminero/rpm/blob/diegoc/Portals/_default/XModPro/Forms/0/wizardtest.ascx
Paso 1. crear el formulario en html para luego ser divido en pasos: Para esto podemos copiar el ejemplo de la pagina de referencia, resultando: ` <style type="text/css"> ... </style>
Paso 2. se deben agrar las siguientes etiquetas para dividir el formulario html en pasos de wizard, un ejemplo de codigo es: `
Paso 3. Agregar el código de los botones de navegación para cada página.
dentro de cada "step" definido en el paso 2, se debe agregar el codigo de los botones como los siguientes:
<div> <a href="#" data-step="1" class="wizard-nav dnnSecondaryAction"><< Back</a> <a href="#" data-step="3" class="wizard-nav dnnSecondaryAction">Next >></a> </div>
esto se hace antes de la etiqueta que cierra cada pagina
Paso 4
En este paso se debe agregar el codigo jquery que hará la funcion de ocultar o mostrar cada paso al cambiar de uno al otro.
<jQueryReady> $('.wizard-step').hide(); $('#wizard-step-1').show(); $('.wizard-nav').on('click', function(e) { e.preventDefault(); var stepNum = parseInt($(this).data('step')); $('.wizard-step').hide(); switch (stepNum) { case 1: $('#wizard-step-1').fadeIn(); break; case 2: $('#wizard-step-2').fadeIn(); break; case 3: $('#wizard-step-3').fadeIn(); break; } }); </jQueryReady>