[RESOLVIDO] Carregar os Input conforme ter sindo selecionado

Jack Oliveira · Maio 25, 2020

Olá Bom dia a todos

Estou com uma dificuldade em apresentar os input conforme selecionado no form

Tenho os seguinte plano dentro do select option

<select class="form-control" name="id_plano" required>
       <option value="">Selecione uma Opção</option>
       <option value="1">Plano 1</option>
       <option value="2">Plano 2</option>
       <option value="3">Plano 3</option>
       <option value="4">Plano 4</option>  
</select>

O que preciso aqui seria quando o cliente selecionar o plano 1 por exemplo neste plano carregar uns input

No plano 1

apresentar os seguinte input´s

<select class="form-control" name="id_plano" required>
       <option value="">Selecione uma Opção</option>
       <option value="1" Selected>Plano 1</option>

</select>
<input class="form-control" name="titulo" required>
<input class="form-control" name="telefone" required>
<input class="form-control" name="endereco" required>
<input class="form-control" type="file" name="logo" required>

No Plano 2

<select class="form-control" name="id_plano" required>
       <option value="">Selecione uma Opção</option>
       <option value="2" Selected>Plano 2</option>

</select>
<input class="form-control" name="titulo" required>
<input class="form-control" name="telefone" required>
<input class="form-control" name="endereco" required>
<input class="form-control" name="email">
<input class="form-control" name="facebook">
<input class="form-control" name="instagram">
<input class="form-control" type="file" name="logo" required>

No Plano 3

<select class="form-control" name="id_plano" required>
       <option value="">Selecione uma Opção</option>
       <option value="1" Selected>Plano 3</option>

</select>
<input class="form-control" name="titulo" required>
<input class="form-control" name="telefone" required>
<input class="form-control" name="endereco" required>
<input class="form-control" name="email">
<input class="form-control" name="facebook">
<input class="form-control" name="instagram">
<input class="form-control" type="file" name="logo" required>
<input class="form-control" name="video">
<textarea class="form-control" name="frase"></textarea>

No Plano 4 ele já mostra todos os input que tiver

Acredito que estas apresentação seria feito com javascript

Eu ia fazer com php if com else, porém os código ficaria muita coisa para tão pouca coisa

Se alguém tiver uma solução que seria perfeita para o que preciso fico grato pela ajuda

Omar~ · Maio 26, 2020

Simples você precisará adicionar um evento change ao seletor.

Esse evento uma função irá ouvir esse evento que por sua vez irá realizar uma checagem do valor selecionado.

De acordo com cada valor você irá usar a função createElement e então anexar suas propriedades como class, name e o que for mais necessários para você.

Uma vez criado o input injete-o dentro de algum elemento, seja o um form ou um div dentro do formulário usando a função appendChild

Veja um exemplo que preparei aqui:

Spoiler


<select name="id_plano" id="id_plano" required="">
    <option value="">Selecione uma Opção</option>
    <option value="1">Plano 1</option>
    <option value="2">Plano 2</option>
    <option value="3">Plano 3</option>
    <option value="4">Plano 4</option>
</select>
<div id="colocar-inputs"></div>

<script>
    var colocar = document.getElementById('colocar-inputs');
    document.getElementById('id_plano').addEventListener('change', adicionarInput, false);

    /*
     * Essa função é acionada toda vez que o seletor é alterado
     * Ela vai criar elemento e definir dados de cada um deles
     */
    function adicionarInput(e) {
        removerInputs(); // Remove qualquer input inserido para realizar uma troca
        var valor = parseInt(e.target.value); // Obtem o value selecionado
        var inputA, inputB, inputC, inputD, inputE, inputF, inputG, inputH, inputI, inputsPadrao; // Variáveis de escopo

        if (valor) {
            inputA = document.createElement('input');
            inputB = document.createElement('input');
            inputC = document.createElement('input');
            inputD = document.createElement('input'); // Até o 4 elemento todas condições usam ele.
            inputE, inputF, inputG, inputH, inputI;
            inputsPadrao = [inputA, inputB, inputC];

            /* Como todas condições recebem esses inputs eles serão criados */
            inputA.name = 'titulo';
            inputB.name = 'telefone';
            inputC.name = 'endereco';
        }

        switch (valor) {
            case 1:
                inputD.name = 'logo';
                inputD.type = 'file';

                insereInputs(inputsPadrao.concat([inputD])); // Adiciona os elementos criados
                propridadesComuns(4); // 4 input's criados
                break;
            case 2:
                inputE = document.createElement('input');
                inputF = document.createElement('input');
                inputG = document.createElement('input');

                inputD.name = 'email';
                inputD.setAttribute('data-no', ''); // "data-no" inpede que seja definido a proprieade "required"
                inputE.name = 'facebook';
                inputE.setAttribute('data-no', '');
                inputF.name = 'instagram';
                inputF.setAttribute('data-no', '');
                inputG.name = 'logo';
                inputG.type = 'file';

                insereInputs(inputsPadrao.concat([inputD, inputE, inputF, inputG]));
                propridadesComuns(7); // 7 input's criados
                break;
            case 3:
                inputE = document.createElement('input');
                inputF = document.createElement('input');
                inputG = document.createElement('input');
                inputH = document.createElement('input');
                inputI = document.createElement('textarea');

                inputD.name = 'email';
                inputD.setAttribute('data-no', '');
                inputE.name = 'facebook';
                inputE.setAttribute('data-no', '');
                inputF.name = 'instagram';
                inputF.setAttribute('data-no', '');
                inputG.name = 'logo';
                inputG.type = 'file';
                inputH.name = 'video';
                inputH.setAttribute('data-no', '');
                inputI.name = 'frase';
                inputI.classList.add('form-control'); // Como essa é uma tag <textarea> e não <input>, a função "propridadesComuns" não irá funcionar para esse elemento

                insereInputs(inputsPadrao.concat([inputD, inputE, inputF, inputG, inputH, inputI]));
                propridadesComuns(8); // 8 input's criados, 1 é textarea
                break;
            case 4:
                // São exatamente dos memos elementos que são gerados na condição 3 (então desnecessário)
                break;
            default :
                removerInputs();
                break;
        }
    }

    /*
     * Essa função vai definir propiedades que está
     * presente em quase todos os elementos como
     * class="form-control" & required, por isso
     * a existência dela para automatizar e reduzir
     * muitas linhas de código.
     * Porém alguns deles não recebem o required
     * Então uma checagem será feita se ele possui
     * a propiedade "data-no"
     */
    function propridadesComuns(quantidade) {
        var atual = '';
        for (var i = 0; i < quantidade; i++) {
            atual = colocar.getElementsByTagName('input')[i];
            atual.classList.add('form-control');
            if (!atual.dataset.no) {
                atual.setAttribute('required', 'true');
            }
        }
    }

    /*
     * Essa função vai anexar os inputs recebendo
     * como parâmetro a lista do array "inputsPadrao"
     * que contém quais elementos serão inseridos.
     * Como isso ocorre várias vezes a cada condição
     * da função "adicionarInput" nada melhor que
     * automatizar e reduzir muitas linhas de código
     */
    function insereInputs(lista) {
        for (var i = 0; i < lista.length; i++) {
            colocar.appendChild(lista[i]);
        }
    }

    /*
     * Essa função irá remover todos os elementos
     * que foram inseridos.
     * Como eles devem ser trocados a cada condição
     * e o usuário pode selecionar o valor padrão
     * "Selecione uma Opção" do seletor, eles devem
     * ser removidos.
     */
    function removerInputs() {
        var alvos = colocar.querySelectorAll('.form-control'), i;
        if (alvos.length) {
            for (i = 0; i < alvos.length; i++) {
                if (alvos[i].parentNode) {
                    alvos[i].parentNode.removeChild(alvos[i]);
                }
            }
        }
    }
</script>

Jack Oliveira · Maio 27, 2020

Em 26/05/2020 at 15:56, Omar~ disse:

Simples você precisará adicionar um evento change ao seletor.

Esse evento uma função irá ouvir esse evento que por sua vez irá realizar uma checagem do valor selecionado.

De acordo com cada valor você irá usar a função createElement e então anexar suas propriedades como class, name e o que for mais necessários para você.

Uma vez criado o input injete-o dentro de algum elemento, seja o um form ou um div dentro do formulário usando a função appendChild

Veja um exemplo que preparei aqui:

Mostrar conteúdo oculto



<select name="id_plano" id="id_plano" required="">
    <option value="">Selecione uma Opção</option>
    <option value="1">Plano 1</option>
    <option value="2">Plano 2</option>
    <option value="3">Plano 3</option>
    <option value="4">Plano 4</option>
</select>
<div id="colocar-inputs"></div>

<script>
    var colocar = document.getElementById('colocar-inputs');
    document.getElementById('id_plano').addEventListener('change', adicionarInput, false);

    /*
     * Essa função é acionada toda vez que o seletor é alterado
     * Ela vai criar elemento e definir dados de cada um deles
     */
    function adicionarInput(e) {
        removerInputs(); // Remove qualquer input inserido para realizar uma troca
        var valor = parseInt(e.target.value); // Obtem o value selecionado
        var inputA, inputB, inputC, inputD, inputE, inputF, inputG, inputH, inputI, inputsPadrao; // Variáveis de escopo

        if (valor) {
            inputA = document.createElement('input');
            inputB = document.createElement('input');
            inputC = document.createElement('input');
            inputD = document.createElement('input'); // Até o 4 elemento todas condições usam ele.
            inputE, inputF, inputG, inputH, inputI;
            inputsPadrao = [inputA, inputB, inputC];

            /* Como todas condições recebem esses inputs eles serão criados */
            inputA.name = 'titulo';
            inputB.name = 'telefone';
            inputC.name = 'endereco';
        }

        switch (valor) {
            case 1:
                inputD.name = 'logo';
                inputD.type = 'file';

                insereInputs(inputsPadrao.concat([inputD])); // Adiciona os elementos criados
                propridadesComuns(4); // 4 input's criados
                break;
            case 2:
                inputE = document.createElement('input');
                inputF = document.createElement('input');
                inputG = document.createElement('input');

                inputD.name = 'email';
                inputD.setAttribute('data-no', ''); // "data-no" inpede que seja definido a proprieade "required"
                inputE.name = 'facebook';
                inputE.setAttribute('data-no', '');
                inputF.name = 'instagram';
                inputF.setAttribute('data-no', '');
                inputG.name = 'logo';
                inputG.type = 'file';

                insereInputs(inputsPadrao.concat([inputD, inputE, inputF, inputG]));
                propridadesComuns(7); // 7 input's criados
                break;
            case 3:
                inputE = document.createElement('input');
                inputF = document.createElement('input');
                inputG = document.createElement('input');
                inputH = document.createElement('input');
                inputI = document.createElement('textarea');

                inputD.name = 'email';
                inputD.setAttribute('data-no', '');
                inputE.name = 'facebook';
                inputE.setAttribute('data-no', '');
                inputF.name = 'instagram';
                inputF.setAttribute('data-no', '');
                inputG.name = 'logo';
                inputG.type = 'file';
                inputH.name = 'video';
                inputH.setAttribute('data-no', '');
                inputI.name = 'frase';
                inputI.classList.add('form-control'); // Como essa é uma tag <textarea> e não <input>, a função "propridadesComuns" não irá funcionar para esse elemento

                insereInputs(inputsPadrao.concat([inputD, inputE, inputF, inputG, inputH, inputI]));
                propridadesComuns(8); // 8 input's criados, 1 é textarea
                break;
            case 4:
                // São exatamente dos memos elementos que são gerados na condição 3 (então desnecessário)
                break;
            default :
                removerInputs();
                break;
        }
    }

    /*
     * Essa função vai definir propiedades que está
     * presente em quase todos os elementos como
     * class="form-control" & required, por isso
     * a existência dela para automatizar e reduzir
     * muitas linhas de código.
     * Porém alguns deles não recebem o required
     * Então uma checagem será feita se ele possui
     * a propiedade "data-no"
     */
    function propridadesComuns(quantidade) {
        var atual = '';
        for (var i = 0; i < quantidade; i++) {
            atual = colocar.getElementsByTagName('input')[i];
            atual.classList.add('form-control');
            if (!atual.dataset.no) {
                atual.setAttribute('required', 'true');
            }
        }
    }

    /*
     * Essa função vai anexar os inputs recebendo
     * como parâmetro a lista do array "inputsPadrao"
     * que contém quais elementos serão inseridos.
     * Como isso ocorre várias vezes a cada condição
     * da função "adicionarInput" nada melhor que
     * automatizar e reduzir muitas linhas de código
     */
    function insereInputs(lista) {
        for (var i = 0; i < lista.length; i++) {
            colocar.appendChild(lista[i]);
        }
    }

    /*
     * Essa função irá remover todos os elementos
     * que foram inseridos.
     * Como eles devem ser trocados a cada condição
     * e o usuário pode selecionar o valor padrão
     * "Selecione uma Opção" do seletor, eles devem
     * ser removidos.
     */
    function removerInputs() {
        var alvos = colocar.querySelectorAll('.form-control'), i;
        if (alvos.length) {
            for (i = 0; i < alvos.length; i++) {
                if (alvos[i].parentNode) {
                    alvos[i].parentNode.removeChild(alvos[i]);
                }
            }
        }
    }
</script>

Obrigado @Omar~ pela dica Ajudou

Entrar

Arquivado

[RESOLVIDO] Carregar os Input conforme ter sindo selecionado

Pergunta

Jack Oliveira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

2 respostas a esta questão

Recommended Posts

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jack Oliveira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Consulta sem duplicação

Modelagem para questionário

Converter jpg para webp

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante