Modal OnChange Funtion

TOTVS Fluig Páginas (WCM)
, ,
1

Boa tarde,

Gostaria de saber se alguem sabe me dizer como criar uma função "onchange" para um modal.

Exemplo:


function modalnrFornecedor(tablename){
    FLUIGC.modal(
        {
        title: "Conultar N° Fornecedor",
        content:'<div class="form-group col-sm-12">'+
                    '<label>'+
                    '<input type="radio" id="radionrFornecCNPJ" name="radionrFornec" checked="checked">CNPJ&nbsp;&nbsp;'+
                    '<input type="radio" id="radionrFornecCPF" name="radionrFornec">CPF&nbsp;&nbsp;'+
                    '<input type="radio" id="radionrFornecNome" name="radionrFornec">Nome'+
                    '</label>'+
                    '<div class="col-sm-3">'+
                        '<input type="text" name="inputnrFornecCNPJ" id="inputnrFornecCNPJ" class="form-control" maxlength="14">'+ 
                    '<div>'+          
                '</div>'+                
                '<div class="form-group col-sm-3">'+
                    '<input type="text" name="inputnrFornecCPF" id="inputnrFornecCPF" class="form-control" maxlength="11" style="display: none;>'+
                '</div>'+
                '<div class="form-group col-sm-3">'+
                    '<input type="text" name="inputnrFornecNome" id="inputnrFornecNome" class="form-control" style="display: none;>'+
                '</div>',
              id: "fluig-modal-Pedido",
              size: "large",
              actions: [{
                'label': 'Fechar',
                'bind': 'data-open-modal',
                'autoClose': true
              }]
        });
}

No Código acima, tenho um modal com 3 radio Buttons, gostaria de que quando um radio button fosse selecionado, eles exibisse o campo input referente aquela escolha, porém não estou conseguindo.

Segue abaixo o JavaScript da Função:


document.getElementById('fluig-modal-Pedido').onchange = function() {
    if (document.getElementById('radionrFornecCNPJ').checked){
        document.getElementById("inputnrFornecCPF").style.visibility = "hidden"
        document.getElementById("inputnrFornecNome").style.visibility = "hidden"
        document.getElementById("inputnrFornecCNPJ").style.visibility = "visible"    
    }
    if (document.getElementById('radionrFornecCPF').checked){
        document.getElementById("inputnrFornecCPF").style.visibility = "visible"
        document.getElementById("inputnrFornecNome").style.visibility = "hidden"
        document.getElementById("inputnrFornecCNPJ").style.visibility = "hidden"    
    }
    if (document.getElementById('radionrFornecNome').checked){
        document.getElementById("inputnrFornecCPF").style.visibility = "hidden"
        document.getElementById("inputnrFornecNome").style.visibility = "visible"
        document.getElementById("inputnrFornecCNPJ").style.visibility = "hidden"    
    }
}

Att.

2

Boa tarde Carlos,

uma das formas de se fazer é utilizar a função de callback da modal:


FLUIGC.modal(
                {
                title: "Conultar N° Fornecedor",
                content:'<div class="form-group col-sm-12">'+
                            '<label>'+
                            '<input type="radio" id="radionrFornecCNPJ" name="radionrFornec" checked="checked">CNPJ&nbsp;&nbsp;'+
                            '<input type="radio" id="radionrFornecCPF" name="radionrFornec">CPF&nbsp;&nbsp;'+
                            '<input type="radio" id="radionrFornecNome" name="radionrFornec">Nome'+
                            '</label>'+
                            '<div class="col-sm-3">'+
                                '<input type="text" name="inputnrFornecCNPJ" id="inputnrFornecCNPJ" class="form-control" maxlength="14">'+ 
                            '<div>'+          
                        '</div>'+                
                        '<div class="form-group col-sm-3">'+
                            '<input type="text" name="inputnrFornecCPF" id="inputnrFornecCPF" class="form-control" maxlength="11" style="display: none;>'+
                        '</div>'+
                        '<div class="form-group col-sm-3">'+
                            '<input type="text" name="inputnrFornecNome" id="inputnrFornecNome" class="form-control" style="display: none;>'+
                        '</div>',
                      id: "fluig-modal-Pedido",
                      size: "large",
                      actions: [{
                        'label': 'Fechar',
                        'bind': 'data-open-modal',
                        'autoClose': true
                      }]
                }, function() {
                    $("input[name='radionrFornec']").on('change', function() {
                        if ($('#radionrFornecCNPJ').prop('checked')){
                            $("#inputnrFornecCPF").hide();
                            $("#inputnrFornecNome").hide();
                            $("#inputnrFornecCNPJ").show();    
                        }
                        if ($('#radionrFornecCPF').prop('checked')){
                            $("#inputnrFornecCPF").show();
                            $("#inputnrFornecNome").hide();
                            $("#inputnrFornecCNPJ").hide();
                        }
                        if ($('#radionrFornecNome').prop('checked')){
                            $("#inputnrFornecCPF").hide();
                            $("#inputnrFornecNome").show();
                            $("#inputnrFornecCNPJ").hide();
                        }   
                    });
                });
3

Diogo, Muito Agradecido, deu certo.