Input exibe/oculta card

27 de novembro de 2019 8 respostas Resolvido

GCorrea 27 de novembro de 2019

Preciso de um código que ao selecionar o input “Devolução”, seja exibido o card “Tipo de Devolução” e nas outra opções fique oculto. Tentei alguns códigos que encontrei na internet, mas nada deu certo.

<div class="card">
        <div class="card-header bg-secondary text-white">
            <li ><b>Tipo do Recebimento</b></li> 
        </div>

        <div class="card-body">
            <div class="row">
                <div class="col-sm">
                    <input type="radio" name="RECEBMAT_TIPO" value="Normal"><b>Normal (Revenda / Estoque)</b >
                </div>

                <div class="col-sm">
                    <input type="radio" name="RECEBMAT_TIPO" value="Industrialização"><b>Industrialização</b> 
                </div>

                <div class="col-sm">
                    <input type="radio" name="RECEBMAT_TIPO" value="Devolução"><b>Devolução</b>
                </div>

                <div class="col-sm">
                    <input type="radio" name="RECEBMAT_TIPO" value="Recusa"><b>Recusa</b>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header bg-secondary text-white">
            <li ><b>Tipo de Devolução</b></li> 
        </div>

        <div class="card-body">
            <div class="form-row" >
                <div class="col-sm">
                    <input type="radio" name="RECEBMAT_DEV" value="Total"><b>Total</b >
                </div>

                <div class="col-sm">
                    <input type="radio" name="RECEBMAT_DEV" value="Parcial"><b>Parcial</b >
                </div>
            </div>
        </div>
    </div>

8 Respostas

darlan_machado 27 de nov. de 2019

Cara, isso é um tanto quanto amplo.
Precisa explicar melhor.

wldomiciano 27 de nov. de 2019

@darlan_machado tem razão, faltou maiores explicação como por exemplo se vc está usando algum framework ou biblioteca JavaScript.

Contudo, eu pensei numa solução usando JS puro.

Primeiro eu adicionei os atributos id e style ao seu segundo card, ficou assim:

<div class="card" id="tipoDeDevolucao" style="display: none">
  <div class="card-header bg-secondary text-white">
    <li><b>Tipo de Devolução</b></li>
  </div>

  <!-- resto do código -->
</div>

E o JavaScript ficou assim:

const inputs = document.getElementsByName('RECEBMAT_TIPO');
const card = document.getElementById('tipoDeDevolucao');

inputs.forEach(i => i.addEventListener('change', e => {
  if (e.target.value === 'Devolução') card.style.display = 'block'
  else card.style.display = 'none'
}));

GCorrea 5 de dez. de 2019

@wldomiciano @darlan_machado É um pouco difícil dar mais informações, não tenho experiência nesta área, pois comecei a trabalhar com isso a pouco tempo.

Esse JavaScript funcionou como eu queria, mas ainda tenho um problema. Quando a página é carregada e o input já esta marcado com o valor “Devolução” a função que exibe o segundo card não é executada se os valores(inputs marcados) não forem trocados. (as informações são salvas, só não aparecem)

Preciso que as informações sejam mostradas ao usuário sem que os valores precisem ser trocados cada vez que a página for carregada. Podem me ajudar?

Agradeço pela atenção

darlan_machado 5 de dez. de 2019

Vamos por partes.
Primeiro, não precisa dar explicações técnicas e de fundamentação teórica sobre nada. Seria bom, mas, você já viu dois (ou mais) programadores conversando sobre programação e lógica, em público? Parecem dois doidos.

O que a gente precisa é entender o que você quer fazer e de que maneira quer que funcione. Ou seja, você pode usar termos como:

Eu quero que o usuário, quando clicar no botãozinho X tenha a seguinte resposta. Essa resposta deve ser obtida a partir da execução dessa equação...

Entendeu?

GCorrea 5 de dez. de 2019

Eu quero que o “Tipo de Devolução” fique oculto e apareça apenas se o usuário marcar o input com valor “Devolução”. As informações que ele marcar são salvas e enviadas para outro usuário.

Quando esse segundo usuário carrega a página e o valor “Devolução” esta marcado, o “Tipo de Devolução” deve aparecer para ele poder ver o que foi selecionado.

A função acima só funciona se você marcar outro valor e depois marcar o valor “Devolução” de novo.

Eu quero que o JavaScript execute quando a página for carregada e o input “Devolução” esteja marcado.

Por enquanto esta assim:

<div class="card">
            <div class="card-header bg-secondary text-white">
                <li ><b>Tipo do Recebimento</b></li> 
            </div>

            <div class="card-body">
                <div class="row">
                    <div class="col-sm">
                        <input type="radio" name="RECEBMAT_TIPO" value="Normal"><b>Normal (Revenda / Estoque)</b >
                    </div>
    
                    <div class="col-sm">
                        <input type="radio" name="RECEBMAT_TIPO" value="Industrialização"><b>Industrialização</b> 
                    </div>
    
                    <div class="col-sm">
                        <input type="radio" name="RECEBMAT_TIPO" value="Devolução"><b>Devolução</b>
                    </div>
    
                    <div class="col-sm">
                        <input type="radio" name="RECEBMAT_TIPO" value="Recusa"><b>Recusa</b>
                    </div>
                </div>
            </div>
        </div>

        <br>

        <div class="card" id="TIPO_DEV" style="display: none">
            <div class="card-header bg-secondary text-white">
                <li><b>Tipo de Devolução</b></li>
            </div>

            <div class="card-body">
                <div class="form-row" >
                    <div class="col-sm">
                        <input type="radio" name="RECEBMAT_DEV" value="Total"><b>Total</b >
                    </div>

                    <div class="col-sm">
                        <input type="radio" name="RECEBMAT_DEV" value="Parcial"><b>Parcial</b >
                    </div>
                </div>
            </div>
        </div>

        <script type="text/javascript">

            const inputs = document.getElementsByName('RECEBMAT_TIPO');
            const card = document.getElementById('TIPO_DEV');
        
            inputs.forEach(i => i.addEventListener('change', e => {
                if (e.target.value === 'Devolução') card.style.display = 'block'
                else card.style.display = 'none'
            }));

        </script>

(Só não funciona quando a página é carregada com o input “Devolução” já marcado)

GCorrea 5 de dez. de 2019

@darlan_machado Acredito este pode ser um problema parecido, mas não consegui usar no meu form.

darlan_machado 5 de dez. de 2019

Cara, to indo almoçar. Assim que voltar mostro uma possível solução.

Solucao aceita

wldomiciano 5 de dez. de 2019

Quer dizer que o segundo usuário vai carregar uma pagina e nesta pagina o input “Devolução” já vai vir checado, né?

Se for isso, modifique o JS pra ficar assim:

<script type="text/javascript">
  const inputs = [...document.getElementsByName('RECEBMAT_TIPO')];
  const card = document.getElementById('TIPO_DEV');
 
  inputs.forEach(i => i.addEventListener('change', e => {
    if (e.target.value === 'Devolução') card.style.display = 'block'
    else card.style.display = 'none'
  }));
  
  const checked = inputs.filter(i => i.checked).some(i => i.value === 'Devolução');

  if (checked) {
    card.style.display = 'block';
  }
</script>

Criado 27 de novembro de 2019

Ultima resposta 5 de dez. de 2019

Respostas 8

Participantes 3

8 Respostas

Topicos relacionados