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

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

    Thursday, April 25, 2019 2:18 PM

Answers

  • 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>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 25, 2019 2:27 PM
  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 26, 2019 7:56 AM
  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, April 27, 2019 6:32 PM

All replies

  • 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>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 25, 2019 2:27 PM
  • User-826336654 posted

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

    Thursday, April 25, 2019 2:37 PM
  • 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.

    Thursday, April 25, 2019 2:47 PM
  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 26, 2019 7:56 AM
  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, April 27, 2019 6:32 PM