1

Tengo un formulario con html y css hecho pero este contiene muchos campos, por este motivo necesito hacer una paginación de tal manera que se muestren 10 preguntas por pantalla, el usuario cuando presione el botón "Siguiente" se deben mostrar las siguientes 10 preguntas y así sucesivamente. Aquí adjunto parte del código que llevo:

HTML:

 <div id="page1">
                <label for="">lorem ipsum</label>
                <input type="text" name="" id="" class="form-input" placeholder="Algo random">

                <label for="">lorem ipsum</label>
                <input type="text" name="" id="" class="form-input" placeholder="Algo random">

                <label for="">lorem ipsum</label>
                <input type="text" name="" id="" class="form-input" placeholder="Algo random">

                <label for="">lorem ipsum</label>
                <input type="text" name="" id="" class="form-input" placeholder="Algo random">

                <label for="">lorem ipsum</label>
                <input type="text" name="" id="" class="form-input" placeholder="Algo random">

                <label for="">lorem ipsum</label>
                <input type="text" name="" id="" class="form-input" placeholder="Algo random">

                <label for="">lorem ipsum</label>
                <input type="text" name="" id="" class="form-input" placeholder="Algo random">

                <input type="button" value="Siguiente">
 </div>

 <div id="page2">
                <label for="">lorem ipsum</label>
                <input type="text" name="" id="" class="form-input" placeholder="Algo random">

                <label for="">lorem ipsum</label>
                <input type="text" name="" id="" class="form-input" placeholder="Algo random">

                <label for="">lorem ipsum</label>
                <input type="text" name="" id="" class="form-input" placeholder="Algo random">

                <label for="">lorem ipsum</label>
                <input type="text" name="" id="" class="form-input" placeholder="Algo random">

                <label for="">lorem ipsum</label>
                <input type="text" name="" id="" class="form-input" placeholder="Algo random">

                <label for="">lorem ipsum</label>
                <input type="text" name="" id="" class="form-input" placeholder="Algo random">

                <label for="">lorem ipsum</label>
                <input type="text" name="" id="" class="form-input" placeholder="Algo random">
 </div>

En la parte inferior del formulario se debe mostrar el número de página en que se encuentra, esto a la par del botón siguiente

JavaScript:

function showPages(id) {
    
    let numberOfPages = 2;

    for (let i = 0; i <= numberOfPages; i++){
        
        if (document.getElementById('page'+i)) {
            document.getElementById('page'+i).style.display='none';
        }
       
    }
        if (document.getElementById('page'+id)) {
            document.getElementById('page'+id).style.display='block';
        }

};

Agradezco la ayuda que me puedan brinda, muchas gracias.

1
  • 1
    ¡Bienvenido a SO en español! Léete Cómo preguntar y haz el recorrido de bienvenida para aprender cómo funcionamos aquí y para recibir la mejor ayuda posible. En tu pregunta nos debes decir que has intentado, que no te ha funcionado, que errores te ha dado, para que podamos considerarla una pregunta válida. Si no lo haces representa que no has hecho nada y puedes recibir votos negativos por ello, y tu pregunta puede quedar cerrada pronto. Gracias por colaborar.
    – masterguru
    Commented el 3 feb. 2022 a las 21:48

1 respuesta 1

0

Si lo haces con ID y números de página, se va a complicar agregar más páginas. Te sugiero hacerlo con clases, de forma que puedas obtener todos los elementos de página con document.querySelectorAll() y agregar o quitar clase para mostrar y ocultar, respectivamente.

Al iniciar, la primera página debe tener la clase active y el botón "Anterior" debe estar deshabilitado (disabled). A partir de ahí, el usuario podrá navegar entre páginas haciendo clic en el botón correspondiente.

Revisa los comentarios en el código para saber qué hace cada cosa:

// Página actual
let curPage = 0;
// Obtener páginas y botones
let pages = document.querySelectorAll('.form-page');
let btnPrev = document.querySelector('#btn-prev');
let btnNext = document.querySelector('#btn-next');

// Función para avanzar o retroceder, recibe 1 (avanzar) o -1 (retroceder)
function showPage(action) {
    // Página a mostrar según el valor recibido
    curPage += action;
    // Validar que la página a mostrar esté dentro de los límites
    if(curPage < 0) {
        curPage = 0;
    }
    if(curPage >= pages.length) {
        curPage = pages.length - 1;
    }
    // Recorrer para mostrar u ocultar
    pages.forEach((page, index) => {
        if(index == curPage) {
            // Es página actual, se debe mostrar
            page.classList.add('active');
        } else {
            // Las demás se van a ocultar
            page.classList.remove('active');
        }
    });
    // Habilitar o deshabilitar botones
    btnPrev.disabled = (curPage == 0);
    btnNext.disabled = (curPage == pages.length - 1);
};
// Asignar evento a botones para avanzar y retroceder
btnPrev.addEventListener('click', e => showPage(-1));
btnNext.addEventListener('click', e => showPage(1));
/* Clase para ocultar */
.form-page {
    display: none;
}
/* Clase para mostrar */
.form-page.active {
    display: block;
}
 <div class="form-page active">
                <h2>Página 1</h2>
                <label for="">lorem ipsum</label>
                <input type="text" name="" id="" class="form-input" placeholder="Algo random">

                <label for="">lorem ipsum</label>
                <input type="text" name="" id="" class="form-input" placeholder="Algo random">

                <label for="">lorem ipsum</label>
                <input type="text" name="" id="" class="form-input" placeholder="Algo random">

                <label for="">lorem ipsum</label>
                <input type="text" name="" id="" class="form-input" placeholder="Algo random">

                <label for="">lorem ipsum</label>
                <input type="text" name="" id="" class="form-input" placeholder="Algo random">

                <label for="">lorem ipsum</label>
                <input type="text" name="" id="" class="form-input" placeholder="Algo random">

                <label for="">lorem ipsum</label>
                <input type="text" name="" id="" class="form-input" placeholder="Algo random">
 </div>

 <div class="form-page">
                <h2>Página 2</h2>
                <label for="">lorem ipsum</label>
                <input type="text" name="" id="" class="form-input" placeholder="Algo random">

                <label for="">lorem ipsum</label>
                <input type="text" name="" id="" class="form-input" placeholder="Algo random">

                <label for="">lorem ipsum</label>
                <input type="text" name="" id="" class="form-input" placeholder="Algo random">

                <label for="">lorem ipsum</label>
                <input type="text" name="" id="" class="form-input" placeholder="Algo random">

                <label for="">lorem ipsum</label>
                <input type="text" name="" id="" class="form-input" placeholder="Algo random">

                <label for="">lorem ipsum</label>
                <input type="text" name="" id="" class="form-input" placeholder="Algo random">

                <label for="">lorem ipsum</label>
                <input type="text" name="" id="" class="form-input" placeholder="Algo random">
 </div>

<div class="form-buttons">
    <button type="button" id="btn-prev" disabled>Anterior</button>
    <button type="button" id="btn-next">Siguiente</button>
</div>

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.