Question

I am trying to use a dropdown which as 2 values yes/no to change whether a field is displayed or not. I still want element to exist just no visible.

I am using Razor and MVC3 to render the page.

So I have tried the following code:

$(function () {
    $("DiscountOn").change(function () {
        if ($("DiscountOn").Value == 0) {
            $("DiscountPercentage").fadeOut('fast');
        }
        else {
            $("DiscountPercentage").fadeIn('fast');
        }
    });
});

DiscountOn is the dropdown which has values of either 0 or 1, text no or yes respectively. I want it to make DiscountPercentage dissappear when DiscountOn is turned to 0 and reappear when DiscountOn is turned 1. And for value added, if you can make it appear or or disappear when the page has loaded depending on which option is set in the dropdown that would be excellent.

Answer 1

$("DiscountOn")

does not select the element properly. If the ID of the element that you wish to select then you need to either do:

document.getElementById("DiscountOn") // Pure JS

or

$("#DiscountOn") // jQuery

Your other problem is how you are getting the value. You either need to do this

.value // Pure JS

or

.val() // jQuery

Remember that JS is case-sensitive!