1

Quisiera poder crear unos inputs mediante un select, ejemplo un select del 1 al 5 en donde yo selecciono un numero(2) y se debe crear 2 inputs peros sin ocupar un boton

Aqui en el index esta el formulario html en donde selecciono la cantidad de preguntas que tendra una encuesta con un select.

index.html

<form id="form" action="" method="post">
<div class="row justify-content-center">
    <div class="col-md-4">
        <div class="card">
            <div class="card-header bg-secondary">
                <h4 class="text-center">Crear Encuesta</h4>
            </div>
            <div class="card-body bg-light">
                <div class="form-group">
                    <p>Tipo Encuesta</p>
                    <input type="text" id="tipoencuesta" name="tipoencuesta" class="form-control">
                </div>
                <div class="form-group">
                    <p>Nombre Encuesta</p>
                    <input type="text" id="nombre-encuesta" name="nombre-encuesta" class="form-control">
                </div>
                <div class="form-group">
                    <p>Cantidad Preguntas</p>
                        <select id="option" class="form-control" name="">
                            <option value="0">Cantidad Preguntas</option>
                            <option id="1" value="1">1</option>
                            <option id="2" value="2">2</option>
                            <option id="3" value="3">3</option>
                            <option id="4" value="4">4</option>
                            <option id="5" value="5">5</option>


                        </select>

                        <div id="input"></div>
                </div>

                <button type="submit" id="siguiente" class="btn btn-outline-success btn-block">Siguiente</button>
            </div>
        </div>
    </div>
</div>

Aqui en el archivo javascript realizo la creacion de los inputs dependiendo del valor del select que uno seleccciona.

generador.js

'use strict'

window.addEventListener('load',function(){
var select = document.querySelector("#option");
var i ="";
var input = document.querySelector("#input");

select.addEventListener('change',function(e){
    e.preventDefault();
for(i =select.value;i<=select.length;i++){
    createInputs();
}   


});

function createInputs(){
    var element = document.createElement('div');
    element.innerHTML=`
    <div class="form-group">
        <p>Pregunta ${i}</p>
        <input type="text" class="form-control" />
    </div>
    `;
    input.appendChild(element);


}



});

1 respuesta 1

2

He modificado algo tu codigo, a ver si esto es lo que buscas:

'use strict'

window.addEventListener('load', function () {
    var select = document.querySelector("#option");
    var i = "";
    var input = document.querySelector("#input");

    select.addEventListener('change', function (e) {
        e.preventDefault();
        input.innerHTML = '';
        for (i = 0; i < select.value; i++) {
            createInputs();
        }
    });

    function createInputs() {
        var element = document.createElement('div');
        element.innerHTML = `
    <div class="form-group">
        <p>Pregunta ${i + 1}</p>
        <input type="text" class="form-control" />
    </div>
    `;
        input.appendChild(element);
    }
});
    <form id="form" action="" method="post">
        <div class="row justify-content-center">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header bg-secondary">
                        <h4 class="text-center">Crear Encuesta</h4>
                    </div>
                    <div class="card-body bg-light">
                        <div class="form-group">
                            <p>Tipo Encuesta</p>
                            <input type="text" id="tipoencuesta" name="tipoencuesta" class="form-control">
                        </div>
                        <div class="form-group">
                            <p>Nombre Encuesta</p>
                            <input type="text" id="nombre-encuesta" name="nombre-encuesta" class="form-control">
                        </div>
                        <div class="form-group">
                            <p>Cantidad Preguntas</p>
                                <select id="option" class="form-control" name="">
                                    <option value="0">Cantidad Preguntas</option>
                                    <option id="1" value="1">1</option>
                                    <option id="2" value="2">2</option>
                                    <option id="3" value="3">3</option>
                                    <option id="4" value="4">4</option>
                                    <option id="5" value="5">5</option>
        
        
                                </select>
        
                                <div id="input"></div>
                        </div>
        
                        <button type="submit" id="siguiente" class="btn btn-outline-success btn-block">Siguiente</button>
                    </div>
                </div>
            </div>
        </div>

Espero que te sirva. Saludos

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.