How to enable or disable textboxes or textareas on dropdownlist values on Page load

Question

User-826336654 posted

Hi All,

I have created a new ASP.NET MVC 5 application. I have 3 dropdownlists on my page. What I am doing is that when I select "Yes" then related or corresponding TextBox or TextArea should be "enabled" but disabled when I select any other value. 

The code currently working correctly on dropdownlist "onchange" event but I want it work on Page load as well. How can we do this, can somebody help me.

The screenshot and code is below.

View:

@model StudentLMS.Models.Employee.EmployeeModel
@using StudentLMS.Models.Shared

@{
    ViewBag.Title = "Employee Information";
}


@using (Html.BeginForm("EmployeeInfo", "Employee", FormMethod.Post, new { enctype = "multipart/form-data" }))
{

    @Html.AntiForgeryToken()

    <div class="form">
        <div class="row">
            <div class="col-md-2">
                @Html.Partial("~/Views/Employee/Shared/_EmployeeMenu.cshtml")
            </div>
            <br /> <br />

            <div class="col-md-10">
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">Employee Information</h3>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="form-group">
                                <div class="col-md-12">
                                    @*<input type="button" id="btnSave" value="Save Record" class="btn btn-primary" />*@
                                    <input type="submit" value="Save Record" class="btn btn-success" />
                                    <a href='@Url.Action("EmployeesList", "Employee")' class="btn btn-default">Close</a>

                                    <div class="pull-right">
                                        <a href="#" class="btn btn-default"><i class="fas fa-print"></i> Print</a>
                                        <a href="#" class="btn btn-default" data-target="#SendEmailModel" data-toggle="modal" data-backdrop="static" data-keyboard="false"><i class="fas fa-envelope"></i> Send Email</a>
                                        <div class="modal fade" id="SendEmailModel">@Html.Partial("~/Views/Shared/Models/_SendEmailModel.cshtml", new EmailModel { EmailTo = "" })</div>

                                        <!-- -->
                                        <a href="#" class="btn btn-default" data-target="#SendTextMessageModel" data-toggle="modal" data-backdrop="static" data-keyboard="false"><i class="fas fa-sms"></i> Send Text Message</a>
                                        <div class="modal fade" id="SendTextMessageModel">@Html.Partial("~/Views/Shared/Models/_SendTextMessageModel.cshtml", new TextMessageModel { MobileNumber = "", TextMessage = "Javed Iqbal" })</div>
                                    </div>
                                    <hr />
                                </div>
                            </div>
                            <br /><br />
                            <div class="col-md-3">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.EmployeeID, htmlAttributes: new { @class = "control-label" })
                                    @Html.EditorFor(model => model.EmployeeID, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", @style = "max-width:50%;" } })
                                    @Html.ValidationMessageFor(model => model.EmployeeID, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.EmployeeName, htmlAttributes: new { @class = "control-label" })
                                    @Html.EditorFor(model => model.EmployeeName, new { htmlAttributes = new { @class = "form-control", @placeholder = "Enter Employee Name here" } })
                                    @Html.ValidationMessageFor(model => model.EmployeeName, "", new { @class = "text-danger" })
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.Gender, htmlAttributes: new { @class = "control-label " })
                                    @Html.EditorFor(model => model.Gender, new { htmlAttributes = new { @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.Gender, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.Mobile, htmlAttributes: new { @class = "control-label" })
                                    @Html.EditorFor(model => model.Mobile, new { htmlAttributes = new { @class = "form-control", @placeholder = "Enter Mobile No here" } })
                                    @Html.ValidationMessageFor(model => model.Mobile, "", new { @class = "text-danger" })
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.HomePhone, htmlAttributes: new { @class = "control-label" })
                                    @Html.EditorFor(model => model.HomePhone, new { htmlAttributes = new { @class = "form-control", @placeholder = "Enter Home Phone No here" } })
                                    @Html.ValidationMessageFor(model => model.HomePhone, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.CNIC, htmlAttributes: new { @class = "control-label" })
                                    @Html.EditorFor(model => model.CNIC, new { htmlAttributes = new { @class = "form-control", @placeholder = "Enter CNIC No here" } })
                                    @Html.ValidationMessageFor(model => model.CNIC, "", new { @class = "text-danger" })
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label" })
                                    @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control", @placeholder = "Enter Email here" } })
                                    @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "control-label" })
                                    @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control", @style = "resize: none; max-width: 83%; overflow-y:scroll;", rows = 5 } })
                                    @Html.ValidationMessageFor(model => model.Address, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.Doyouhaveanydisability, htmlAttributes: new { @class = "control-label" })
                                    @Html.EditorFor(model => model.Doyouhaveanydisability, new { htmlAttributes = new { @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.Doyouhaveanydisability, "", new { @class = "text-danger" })
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.Areyoutakinganymedication, htmlAttributes: new { @class = "control-label " })
                                    @Html.EditorFor(model => model.Areyoutakinganymedication, new { htmlAttributes = new { @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.Areyoutakinganymedication, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.ifdisabilityyesthengiveusdetail, htmlAttributes: new { @class = "control-label" })
                                    @Html.EditorFor(model => model.ifdisabilityyesthengiveusdetail, new { htmlAttributes = new { @class = "form-control", @disabled = "disabled", @style = "resize: none;", rows = 5 } })
                                    @Html.ValidationMessageFor(model => model.ifdisabilityyesthengiveusdetail, "", new { @class = "text-danger" })
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.ifmedicationyesthengiveusdetail, htmlAttributes: new { @class = "control-label " })
                                    @Html.EditorFor(model => model.ifmedicationyesthengiveusdetail, new { htmlAttributes = new { @class = "form-control", @style = "resize: none;", @disabled = "disabled", rows = 5 } })
                                    @Html.ValidationMessageFor(model => model.ifmedicationyesthengiveusdetail, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.AnyCriminaloffcenceagainstyou, htmlAttributes: new { @class = "control-label" })
                                    @Html.EditorFor(model => model.AnyCriminaloffcenceagainstyou, new { htmlAttributes = new { @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.AnyCriminaloffcenceagainstyou, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.ifcriminaloffcenceyesthengiveusdetail, htmlAttributes: new { @class = "control-label" })
                                    @Html.EditorFor(model => model.ifcriminaloffcenceyesthengiveusdetail, new { htmlAttributes = new { @class = "form-control", @disabled = "disabled", @style = "resize: none; max-width: 83%; overflow-y:scroll;", rows = 5 } })
                                    @Html.ValidationMessageFor(model => model.ifcriminaloffcenceyesthengiveusdetail, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                        <div>
                            @Html.HiddenFor(model => model.IsUpdate)
                        </div>
                        <div class="row">
                            <div class="form-group">
                                <div class="col-md-10">
                                    @*<input type="button" id="btnSave" value="Save Record" class="btn btn-primary" />*@
                                    <input type="submit" value="Save Record" class="btn btn-success" />
                                    @Html.ActionLink("Close", "EmployeesList", "Employee", null, new { @class = "btn btn-default" })
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
}

Javascript Code

function enabledisabletxtbox(e, txt) {
    var ddlseltext = e[e.selectedIndex].text;

    if (ddlseltext === 'Yes') {
        document.getElementById(txt).disabled = false;
        document.getElementById(txt).value = "";
    }
    else {
        document.getElementById(txt).disabled = true;
    }
}

Editor Templates

@using StudentLMS.ViewModels.General
@using StudentLMS.Models.General

@Html.DropDownList("", new SelectList(ListTypeViewModels.GetDropDownList(ListType.YesNo), "Value", "Text",
ViewData["Doyouhaveanydisability"]), "--Select--", new
{
    @class = "form-control",
    @onchange = "enabledisabletxtbox(this, 'ifdisabilityyesthengiveusdetail')"
})

Thanks in advance.

Answer 1

User475983607 posted

eaak79

but I want it work on Page load as well. How can we do this, can somebody help me.

I would do this on the server in the View.

If you want a JS solution then simply execute execute the JavaScript function after the elements load or in the .ready() event.

This assumes the script tag is below the HTML.

<script>
  enabledisabletxtbox($('elementSelector'), "Some text");
</script>

Answer 2

User-826336654 posted

Thanks mgebhard for the reply. Can you give an example please.

Answer 3

User475983607 posted

Thanks mgebhard for the reply. Can you give an example please.

I provided an example.  I'm not sure what else I can provide.

Answer 4

User839733648 posted

Hi eaak79,

As mgebhard has suggested, you could apply the enabledisabletxtbox function in $( document ).ready().

$( document ).ready(function() {
    enabledisabletxtbox($("#selectID"), ' ')
});
function enabledisabletxtbox(e, txt) {
    var ddlseltext = e[e.selectedIndex].text;
    if (ddlseltext === 'Yes') {
        document.getElementById(txt).disabled = false;
        document.getElementById(txt).value = "";
    }
    else {
        document.getElementById(txt).disabled = true;
    }
}

Best Regards,

Jenifer

Answer 5

User-826336654 posted

Thanks Jenifer for your reply. Sometimes, developers are not expert in all technologies. In my case, javascript/jquery so a specific example code is needed. I did struggle but eventually fixed the issue. For future reference, I am posting the modified code here.

I have changed the JavaScript code. The new code is below.

function enabledisabletxtbox(ddl, txt) {
    var e = document.getElementById(ddl);

    var ddlseltext = e[e.selectedIndex].text;

    if (ddlseltext === 'Yes') {
        document.getElementById(txt).disabled = false;
    }
    else {
        document.getElementById(txt).disabled = true;
    }
}

View:

@model StudentLMS.Models.Employee.EmployeeModel
@using StudentLMS.Models.Shared

@{
    ViewBag.Title = "Employee Information";
}


@using (Html.BeginForm("EmployeeInfo", "Employee", FormMethod.Post, new { enctype = "multipart/form-data" }))
{

    @Html.AntiForgeryToken()

    <div class="form">
        <div class="row">
            <div class="col-md-2">
                @Html.Partial("~/Views/Employee/Shared/_EmployeeMenu.cshtml")
            </div>
            <br /> <br />

            <div class="col-md-10">
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">Employee Information</h3>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="form-group">
                                <div class="col-md-12">
                                    @*<input type="button" id="btnSave" value="Save Record" class="btn btn-primary" />*@
                                    <input type="submit" value="Save Record" class="btn btn-success" />
                                    <a href='@Url.Action("EmployeesList", "Employee")' class="btn btn-default">Close</a>

                                    <div class="pull-right">
                                        <a href="#" class="btn btn-default"><i class="fas fa-print"></i> Print</a>
                                        @*<a href="#" class="btn btn-default" data-target="#SendEmailModel" data-toggle="modal" data-backdrop="static" data-keyboard="false"><i class="fas fa-envelope"></i> Send Email</a>
                                        <div class="modal fade" id="SendEmailModel">@Html.Partial("~/Views/Shared/Models/_SendEmailModel.cshtml", new EmailModel { EmailTo = "" })</div>*@

                                        <!-- -->
                                        @*<a href="#" class="btn btn-default" data-target="#SendTextMessageModel" data-toggle="modal" data-backdrop="static" data-keyboard="false"><i class="fas fa-sms"></i> Send Text Message</a>
                                        <div class="modal fade" id="SendTextMessageModel">@Html.Partial("~/Views/Shared/Models/_SendTextMessageModel.cshtml", new TextMessageModel { MobileNumber = "", TextMessage = "Javed Iqbal" })</div>*@
                                    </div>
                                    <hr />
                                </div>
                            </div>
                            <br /><br />
                            <div class="col-md-3">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.EmployeeID, htmlAttributes: new { @class = "control-label" })
                                    @Html.EditorFor(model => model.EmployeeID, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", @style = "max-width:50%;" } })
                                    @Html.ValidationMessageFor(model => model.EmployeeID, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.EmployeeName, htmlAttributes: new { @class = "control-label" })
                                    @Html.EditorFor(model => model.EmployeeName, new { htmlAttributes = new { @class = "form-control", @placeholder = "Enter Employee Name here" } })
                                    @Html.ValidationMessageFor(model => model.EmployeeName, "", new { @class = "text-danger" })
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.Gender, htmlAttributes: new { @class = "control-label " })
                                    @Html.EditorFor(model => model.Gender, new { htmlAttributes = new { @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.Gender, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.Mobile, htmlAttributes: new { @class = "control-label" })
                                    @Html.EditorFor(model => model.Mobile, new { htmlAttributes = new { @class = "form-control", @placeholder = "Enter Mobile No here" } })
                                    @Html.ValidationMessageFor(model => model.Mobile, "", new { @class = "text-danger" })
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.HomePhone, htmlAttributes: new { @class = "control-label" })
                                    @Html.EditorFor(model => model.HomePhone, new { htmlAttributes = new { @class = "form-control", @placeholder = "Enter Home Phone No here" } })
                                    @Html.ValidationMessageFor(model => model.HomePhone, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.CNIC, htmlAttributes: new { @class = "control-label" })
                                    @Html.EditorFor(model => model.CNIC, new { htmlAttributes = new { @class = "form-control", @placeholder = "Enter CNIC No here" } })
                                    @Html.ValidationMessageFor(model => model.CNIC, "", new { @class = "text-danger" })
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label" })
                                    @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control", @placeholder = "Enter Email here" } })
                                    @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "control-label" })
                                    @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control", @style = "resize: none; max-width: 83%; overflow-y:scroll;", rows = 5 } })
                                    @Html.ValidationMessageFor(model => model.Address, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.Doyouhaveanydisability, htmlAttributes: new { @class = "control-label" })
                                    @Html.EditorFor(model => model.Doyouhaveanydisability, new { htmlAttributes = new { @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.Doyouhaveanydisability, "", new { @class = "text-danger" })
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.Areyoutakinganymedication, htmlAttributes: new { @class = "control-label " })
                                    @Html.EditorFor(model => model.Areyoutakinganymedication, new { htmlAttributes = new { @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.Areyoutakinganymedication, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.ifdisabilityyesthengiveusdetail, htmlAttributes: new { @class = "control-label" })
                                    @Html.EditorFor(model => model.ifdisabilityyesthengiveusdetail, new { htmlAttributes = new { @class = "form-control", @disabled = "disabled", @style = "resize: none;", rows = 5 } })
                                    @Html.ValidationMessageFor(model => model.ifdisabilityyesthengiveusdetail, "", new { @class = "text-danger" })
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.ifmedicationyesthengiveusdetail, htmlAttributes: new { @class = "control-label " })
                                    @Html.EditorFor(model => model.ifmedicationyesthengiveusdetail, new { htmlAttributes = new { @class = "form-control", @style = "resize: none;", @disabled = "disabled", rows = 5 } })
                                    @Html.ValidationMessageFor(model => model.ifmedicationyesthengiveusdetail, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.AnyCriminaloffcenceagainstyou, htmlAttributes: new { @class = "control-label" })
                                    @Html.EditorFor(model => model.AnyCriminaloffcenceagainstyou, new { htmlAttributes = new { @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.AnyCriminaloffcenceagainstyou, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.ifcriminaloffcenceyesthengiveusdetail, htmlAttributes: new { @class = "control-label" })
                                    @Html.EditorFor(model => model.ifcriminaloffcenceyesthengiveusdetail, new { htmlAttributes = new { @class = "form-control", @disabled = "disabled", @style = "resize: none; max-width: 83%; overflow-y:scroll;", rows = 5 } })
                                    @Html.ValidationMessageFor(model => model.ifcriminaloffcenceyesthengiveusdetail, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                        <div>
                            @Html.HiddenFor(model => model.IsUpdate)
                        </div>
                        <div class="row">
                            <div class="form-group">
                                <div class="col-md-10">
                                    @*<input type="button" id="btnSave" value="Save Record" class="btn btn-primary" />*@
                                    <input type="submit" value="Save Record" class="btn btn-success" />
                                    @Html.ActionLink("Close", "EmployeesList", "Employee", null, new { @class = "btn btn-default" })
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
}

@section scripts
{
    <script type="text/javascript">
        $(function () {

            // Disable or enable textboxes on page load
            enabledisabletxtbox('Doyouhaveanydisability', 'ifdisabilityyesthengiveusdetail');
            enabledisabletxtbox('Areyoutakinganymedication', 'ifmedicationyesthengiveusdetail');
            enabledisabletxtbox('AnyCriminaloffcenceagainstyou', 'ifcriminaloffcenceyesthengiveusdetail');

        });
    </script>
}

EditorTemplates:

@using StudentLMS.ViewModels.General
@using StudentLMS.Models.General

@Html.DropDownList("", new SelectList(ListTypeViewModels.GetDropDownList(ListType.YesNo), "Value", "Text",
ViewData["Doyouhaveanydisability"]), "--Select--", new
{
    @class = "form-control",
    @onchange = "enabledisabletxtbox('Doyouhaveanydisability', 'ifdisabilityyesthengiveusdetail')"
})

Thanks alot