Exibir ou ocultar parte do formulário com inputs

TOTVS Fluig Documentos (ECM)
, ,
1

Preciso de um código que ao selecionar o input “Devolução”, seja exibido o card “Tipo de Devolução” e nas outras opções(inputs) fique oculto.


       <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>

Usei este js e funcionou, mas quando avanço as atividades o segundo card "Tipo de Devolução" deixa de aparecer no formulário.


        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'
        }));

Caso selecionado "Devolução", preciso que o segundo card "Tipo de Devolução" apareça em todas as atividades.

2

document.getElementById('TIPO_DEV') você deve usar o '#id_campo'. Você pode usar também o jQuery. O meu fica assim:


var variavel = $('#id_campo').val(); // isso retorna o valor do campo id_campo

Para ocultar o campo, podes usar o jQuery também com a div


$('#id_div').hide(); $('#id_div').show();
//Ou 
$('#id_div').fadeOut();/$('#id_div').FadeIn();

Espero que tenha ajudado

3

Janilson,
Percebi que havia um erro no segundo card, na verdade esta assim:


    <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>

Também não consegui entender muito bem sua resposta, poderia explicar melhor ou mostrar como ficaria com os nomes/ids corretos? Tenho pouca experiência nesta área