For office dom manipulation.

 @model ResumeManager.Models.IndividualTest


@{

    ViewData["Title"] = "Create";

}


<h1>Create</h1>


<h4>IndividualTest</h4>

<hr />


<div class="raj">

<select autofocus placeholder="watches" id="watches" class = "selector"

    type="text">   

      <option value="Institutional">Institutional</option>

      <option value="Individual" selected>Individual</option>    

    </select>

</div>

<div class="row">

    <div class="col-md-4">

        <form asp-action="Create">

            <div asp-validation-summary="ModelOnly" class="text-danger"></div>

            <div class="form-group">

                <label asp-for="Name" class="control-label"></label>

                <input asp-for="Name" class="form-control" />

                <span asp-validation-for="Name" class="text-danger"></span>

            </div>

            <div class="form-group">

                <label asp-for="RollNumber" class="control-label"></label>

                <input asp-for="RollNumber" class="form-control" />

                <span asp-validation-for="RollNumber" class="text-danger"></span>

            </div>

            

            <p1></p1>

            

            <div class="form-group">

                <input type="submit" value="Create" class="btn btn-primary" />

            </div>

        </form>

    </div>

</div>


<div>

    <a asp-action="Index">Back to List</a>

</div>


@section Scripts {

    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

}

<script>

     document.addEventListener('DOMContentLoaded', function() {

            document.querySelector('.selector').onchange = function() {

                const name = document.querySelector('#watches');

                alert(name.value);

               

                if (name.value === 'none') {

                    let con = document.querySelector('.row');

                    con.innerHTML = '';

                }


                if (name.value === 'Institutional') {

                    let con = document.querySelector('p1');

                    con.innerHTML = '<div class="form-group" id="raj2"><label>class</label>@Html.EditorFor(m => m.Class)<span asp-validation-for="Class" class="text-danger"></span></div>';

                }


                else if (name.value === 'Individual') {

                    let son = document.querySelector('#raj2');

                    son.innerHTML = '';

                }

                

                

                //alert(select.selectedOptions[0].innerHTML);


            };

        });

</script>

Comments