kaushik guru

kaushik guru

  • 1.4k
  • 252
  • 27.3k

how to disable text box based on values from dropbox

Dec 14 2022 1:22 PM

i have a model like follows

public partial class CanditateReference
    {

 public titles? CanditateRelationToRef1 { get; set; }
        public string? CanditateReference1Relation { get; set; }

 public enum titles
        {
            select,
            Manager,
            Others
        }

}

 

i am populating the values in dropdown from enum .

 

What i am tring to do is if in the dropdown others is selected there is a text box named others which should be enabled , rest of the time it should be disbaled 

 

what i tried is 

 

<script type="text/javascript">
        function changetextbox() {
            if (document.getElementById("reference1").value === "others") {
                document.getElementById("otherreference1").disable = 'true';
            } else {
                document.getElementById("otherreference1").disable = 'false';
            }
        }
    </script>

 

<div class="row mb-2">
                        <label class="col-sm-2 col-form-label">Relationship to  Employer</label>
                        <div class="col-sm-3">
                            <select asp-for="CanditateRelationToRef1" name="reference1" onChange="reference1();" class="form-control" asp-items="Html.GetEnumSelectList<EmployeeJoiningPortal.Data.CanditateReference.titles>()">
                            </select>
                            <span asp-validation-for="CanditateRelationToRef1" class="text-danger"></span>
                        </div>
                    </div>
                    &nbsp;
                    <div class="row mb-2">
                        <label class="col-sm-2 col-form-label">Others</label>

                        <div class="col-sm-3">
                            <input asp-for="CanditateReference1Relation" id="otherreference1" class="form-control" placeholder="1.2 years" />
                            <span asp-validation-for="CanditateReference1Relation"  class="text-danger"></span>
                        </div>
                    </div>


Answers (2)