0

Eu tenho um formulário que cadastra Clientes, e possui a opção de ser Pessoa Física ou Pessoa Jurídica, sendo que cada um possui alguns campos diferentes.

Pensei em usar um @Html.RadioButton com a opção Pessoa Física e Pessoa Jurídica. Quando houvesse um clique em uma das opções aparece-se as campos respectivos.

Como faço isso?

3
  • 2
    O caminho seria usando jQuery. Quer uma resposta em jQuery? Commented 8/09/2015 às 3:43
  • Olá para você fazer isso com o minimo de dor de cabeça, o mais correto é usar JavaScript para fazer um controle visual de mostrar e esconder os campos do form. Se você fosse fazer direto no Razor (linguagem da view @Html.AlgumaCoisa) daria trabalho porque as duas opções seria ou dar um post no form e retornar ele mesmo com diferentes campos, ou usar um UpdatePanel que para esse caso eu acho besteira. Porém o padrão mais usado (você pode conferir em muitos sites que possuem cadastros) é ter os dois forms, pessoa física e jurídica, e seu radiobutton apenas habilita o form certo Commented 8/09/2015 às 13:07
  • Sugestão, se possível evite o uso de javascript, declare os 2 menus como visible false , e quando selecionado no radiobuttom , checkbox, coloque visible true para os mesmo.
    – P.Rocha
    Commented 8/09/2015 às 14:19

1 Resposta 1

6

Para isso você pode usar jquery, usando classes, assim:

$( document ).ready(function() {
     $(".campoPessoaJuridica, .campoPessoaFisica").hide();
});

$("input:radio[name=tipo]").on("change", function () {   
    if($(this).val() == "pessoaFisica")
    {
    	$(".campoPessoaFisica").show(); 
        $(".campoPessoaJuridica").hide();
    }
    else if($(this).val() == "pessoaJuridica")
    {
    	$(".campoPessoaFisica").hide(); 
        $(".campoPessoaJuridica").show();   
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <input type="radio" name="tipo" value="pessoaFisica">Pessoa Física</input>
    <input type="radio" name="tipo" value="pessoaJuridica">Pessoa Jurídica</input>
    <p  class="campoPessoaFisica"><strong>Nome: </strong>
        <input type="text" id="nome">
    </p>
    <p  class="campoPessoaJuridica"><strong>Razão Social: </strong>
        <input type="text" id="razaoSocial">
    </p>
</div>

Fiddle = http://jsfiddle.net/henriquedpereira/tmedhg8g/

Você deve fazer log-in para responder a esta pergunta.