Display or Hide Fields for Natural or Legal Persons

Asked

Viewed 1,306 times

0

I have a form that registers Clients, and has the option of being an Individual or Legal Person, and each one has some different fields.

I thought of using a @Html.Radiobutton with the option Individual and Legal Entity. When there was a click on one of the options appears the respective fields.

How do I do that?

  • 2

    The way would be using jQuery. Want an answer in jQuery?

  • Hello to you do this with the minimum headache, the most correct is to use Javascript to make a visual control to show and hide the form fields. If you were to do it directly in Razor (the language of the @Html view.Something) it would take work because the two options would be either give a post in the form and return itself with different fields, or use an Updatepanel that for this case I think is bullshit. But the most used standard (you can check on many sites that have registrations) is to have both Forms, natural and legal person, and your radiobutton only enables the right form

  • Suggestion, if possible avoid the use of javascript, declare the 2 menus as Visible false , and when selected on radiobuttom , checkbox, put true Visible for the same.

1 answer

6


For this you can use jquery, using classes, thus:

$( 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/

Browser other questions tagged

You are not signed in. Login or sign up in order to post.