CODEWITHSUNDEEP
jquerytextbox
user2217303
user2217303

Reputation: 356

Remove/Delete textbox based on dropbox selection

I have this code below containing a dropdown list and two textboxes with ids "OtherName" and "OtherDesc". I want to remove/delete the two textboxes when any value other than "other" is selected from the dropdown list. Here is my code but it isnt working any idea why?

<div class="form-group">
            @Html.LabelFor(model => model.CategoryId, "Category", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("CategoryId", null, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.CategoryId, "", new { @class = "text-danger" })
            </div>
        </div>


            <div id="OtherName" class="form-group" >
                @Html.LabelFor(model => model.tbl_Category.CategoryName, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.tbl_Category.CategoryName, new { htmlAttributes = new { @class = "form-control" } })
                </div>
            </div>

        <div id="OtherDesc" class="form-group">
            @Html.LabelFor(model => model.tbl_Category.CategoryDesc, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.tbl_Category.CategoryDesc, new { htmlAttributes = new { @class = "form-control" } })
            </div>
        </div>

JQUERY

$(document).ready(function () {
        //this line fires no matter what
        $("#OtherName").hide();
        $("#OtherDesc").hide();

        $("#CategoryId").change(function () {
            var value = document.getElementById("CategoryId").value;
            if (value == "1011") {
                $("#OtherName").show();
                $("#OtherDesc").show();
            }
            else {
                $("#OtherName").remove();
                $("#OtherDesc").remove();
            }
        });
    })

Upvotes: 0

Views: 90

Answers (2)

eisbehr
eisbehr

Reputation: 12452

Some advice how to change your code:

  1. You can combine your element selector.

  2. Use hide instead of remove. Otherwise your elements are gone forever.

  3. You already uses jQuery, so thy not get the value over jQuery too?

  4. Because you only need the value once, there is no need for a variable declaration value.

  5. There is a shorthand $(function() {}); for $(document).ready(function() {});.

Code:

$(function() {
    var boxes = $("#OtherName, #OtherDesc").hide();

    $("#CategoryId").change(function() {
        if( $(this).val() == "1011" )
            boxes.show();
        else
            boxes.hide();
    });
});

Even shorter you can go with toggle instead of show and hide:

$(function() {
    var boxes = $("#OtherName, #OtherDesc").hide();

    $("#CategoryId").change(function() {
        boxes.toggle($(this).val() == "1011");
    });
});

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82241

.remove() removes the element from dom completely.You need to use .hide() instead of removing the elements.

also you can optimize your code in many ways. Like

1)use clicked context of select rather than getting it by id again

2)Use multiple selectors to target both element and then show/hide them with one call.

$("#CategoryId").change(function () {
        var value = this.value;
        $("#OtherName,#OtherDesc").toggle(value == "1011");
});

Upvotes: 0

Related Questions