Modal OnChange Funtion

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.

modal

criado 10 de Apr de 2018
Carlos Piva
483 pontos
editado 10 de Apr de 2018

Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
Clique aqui para mais detalhes sobre o funcionamento do fluig Forum!

2 respostas

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

editar
- x
grosseiro ou ofensivo pouco construtivo obsoleto outro...
Motivo

criado 10 de Apr de 2018
Diogo Boegershausen
3259 pontos

up 0 down
Diogo, Muito Agradecido, deu certo.
- editar
- x
  
  grosseiro ou ofensivo pouco construtivo obsoleto outro...
  Motivo
- criado 10 de Apr de 2018
  Carlos Piva
  483 pontos
Adicionar comentário

Caracteres restantes: 600
Quero acompanhar este tópico via email.

Comentário
Utilize formatação mini-Markdown: [link](http://exemplo.com) _italico_ **negrito** `codigo`.
Comentarios devem ter, no maximo, 600 caracteres. Se achar necessario, utilize links em vez de copiar código ou ainda edite sua pergunta/resposta para colocar mais informações

fluig forum

Modal OnChange Funtion

Comentário

2 respostas

Comentário

Comentário

Não é a resposta que estava procurando? Procure outras perguntas com as tags modal ou faça a sua própria pergunta.