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>
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...
}