Search code examples
c#asp.net-corerazor-pages

How to change the input type in a form based on an Enum select list


How would you change the input type to a value such as text, range, or text area based on the selected enum before pressing the submit button? This is so that when a user changes the selected element, they will have a different input type to select a quantity. Here is what I have currently

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">Welcome @Model.UnitOne</h1>
</div>

<form method="post" asp-page="Index">
    <!--UNIT TYPE-->
    <select asp-items="@(Html.GetEnumSelectList<model.UnitTypes>())" asp-for="UnitType"></select>
    <!--UNIT ONE-->
    <div class="form-group">
        <input type="@Model.UnitOneSelected" id="unitOne"/>
    </div>
    <select asp-items="@(Html.GetEnumSelectList<model.UnitTypes>())" asp-for="UnitType" onchange="@Model.UnitOneSelected"></select>
    <!--UNIT TWO-->
    <div class="form-group">
        <input type="@Model.UnitTwoSelected" id="unitTwo"/>
    </div>
    <select asp-items="@(Html.GetEnumSelectList<model.UnitTypes>())" asp-for="UnitType" onchange="@Model.UnitTwoSelected"></select>
    <!--SUBMIT BUTTON-->
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Solution

  • Here is a simple demo about how to change the type by dropdown select:

    Model:

    namespace RazorPagesProj.Models
    {        
        public enum UnitTypes
        {
            text,
            password,
            date,
            number
        }
    }
    

    Razor Page:

    @page
    @model IndexModel
    @using RazorPagesProj.Models;
    
    
    <form method="post" asp-page="Index">
        <!--UNIT TYPE-->
        <select asp-items="@(Html.GetEnumSelectList<UnitTypes>())" asp-for="UnitType"></select>
        <!--UNIT ONE-->
        <div class="form-group">
            <input type="text" id="unitOne"/>
        </div>
        <select asp-items="@(Html.GetEnumSelectList<UnitTypes>())" asp-for="UnitType" onchange="ChangeUnitOne(this)"></select>
        <!--UNIT TWO-->
        <div class="form-group">
            <input type="text" id="unitTwo" />
        </div>
        <select asp-items="@(Html.GetEnumSelectList<UnitTypes>())" asp-for="UnitType" onchange="ChangeUnitTwo(this)"></select>
        <!--SUBMIT BUTTON-->
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    @section Scripts{
        <script>
            function ChangeUnitOne(ele) {
                var selected = $(ele).find("option:selected").text();
                $("#unitOne").attr('type', selected);
            }
            function ChangeUnitTwo(ele) {
                var selected = $(ele).find("option:selected").text();
                $("#unitTwo").attr('type', selected);
            }
        </script>      
    }
    

    PageModel:

    public class IndexModel : PageModel
    {
        public UnitTypes UnitTypes { get; set; }
        [BindProperty]
        public string UnitType { get; set; }
        public void OnGet()
        {
            
        }
    
        //more code...
    }