Ir para conteúdo
  • 0
Jack Oliveira

[RESOLVIDO] Carregar os Input conforme ter sindo selecionado

Pergunta

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

2 respostas a esta questão

Recommended Posts

  • 1

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>

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
  • 0
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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.