Home > Back-end >  Show more fields after condition for a Yes/No field - ASP.NET Core 6.0 MVC
Show more fields after condition for a Yes/No field - ASP.NET Core 6.0 MVC

Time:12-25

I have a field that my user needs to input Yes or No. Based on which option he chooses, I need to open more fields to be filled.

<div >
    <label for="Renda Bruta">Demonstrativo do Ano</label>
    <div >
        <select asp-for="servidorPublico">
            <option value="Sim">Sim</option value="true">
            <option value="Não">Não</option value="false">
        </select>
    </div>
</div>

The question is, how I do that? I need javascript for this, or will I have to call another view with this fields to be filled?

Both conditions will go to more fields to be filled, and one of them will have another Yes/No validation.

CodePudding user response:

You can simply add all fields in the view and at the from end show/hide divs containing the more fields based on the value of the select.

For this markup:

<div >
    <label for="Renda Bruta">Demonstrativo do Ano</label>
    <div >
        <select id="yourSelectID" asp-for="servidorPublico">
            <option value="Sim">Sim</option>
            <option value="Não">Não</option>
        </select>
    </div>
    <div id="simDivSpeceficItemsID">
          //Some specific fields for the case
     </div>
     <div id="naoDivSpeceficItemsID">
          //Some specific fields for the case
     </div>
</div>

This sample code is using jQuery (so add reference to it) but it can also be done with pure javascript

$(function () {
    $(document).ready(function() {
        $("#yourSelectID").change(function () {
            if ($(this).val() != "Sim") {
                $("#simDivSpeceficItemsID").show();
                $("#naoDivSpeceficItemsID").hide();
            } else {
                $("#simDivSpeceficItemsID").hide();
                $("#naoDivSpeceficItemsID").show();
            }
        });
    });
});
  • Related