What I want:

I want to make a form where I show different input fields based on the contact type (the user can choose the contact type from a dropdown). I tried with jQuery, but I have two errors with it.

How I tried:

function showContact() {
/* */
    $('#userType').change(function(){
        var value = $(this).val();

        console.log(value);
        var member = document.getElementById("private");
        var corporation = document.getElementById("corporation");

        if (value == 1) {
            member.removeClass('hidden');
            corporation.removeClass('hidden').addClass('hidden');

            return;
        } else if (value == 2) {
            member.removeClass('hidden').addClass('hidden');
            corporation.removeClass('hidden');

            return;
        } else {
            member.removeClass('hidden').addClass('hidden');
            corporation.removeClass('hidden').addClass('hidden');

            return;
        }
    });
}

What's the error:

1: The script only starts on the second dropdown change. I want to start at the first change.

2: When I change I got this error:

TypeError: member.removeClass is not a function

What's the problem?

What I want:

I want to make a form where I show different input fields based on the contact type (the user can choose the contact type from a dropdown). I tried with jQuery, but I have two errors with it.

How I tried:

function showContact() {
/* */
    $('#userType').change(function(){
        var value = $(this).val();

        console.log(value);
        var member = document.getElementById("private");
        var corporation = document.getElementById("corporation");

        if (value == 1) {
            member.removeClass('hidden');
            corporation.removeClass('hidden').addClass('hidden');

            return;
        } else if (value == 2) {
            member.removeClass('hidden').addClass('hidden');
            corporation.removeClass('hidden');

            return;
        } else {
            member.removeClass('hidden').addClass('hidden');
            corporation.removeClass('hidden').addClass('hidden');

            return;
        }
    });
}

What's the error:

1: The script only starts on the second dropdown change. I want to start at the first change.

2: When I change I got this error:

TypeError: member.removeClass is not a function

What's the problem?

• javascript
• jquery
• html

• Since I don't have the full code just will make a guess: instead of var member = document.getElementById("private"); please try var member = $("#private"); – ihpar Commented Aug 13, 2017 at 20:00
• 2 Your member and corporation vars are not jQuery vars and addClass and removeClass functions are defined in jQuery. – Alex Kudryashev Commented Aug 13, 2017 at 20:02

5 Answers 5

1: The script only starts on the second dropdown change. I want to start at the first change.

This will depend on how showContact is invoked. It's tough to tell without knowing that information. Note that it should only be invoked once, likely when the DOM has loaded, since it binds an event handler.

2: When I change I got this error:

TypeError: member.removeClass is not a function

member, a DOM node, does not have a removeClass method. To fix this, you could do one of the two:

• member.classList.remove("hidden") (uses the native API)
• $(member).removeClass("hidden") (creates a jQuery object, and uses jQuery's API)

Furthermore, each call first removes the hidden class, and then adds it back in. This would seem to have no effect in the end.

// What has been gained here?
$(member).removeClass('hidden').addClass('hidden');

If you were hoping to ensure that the class wouldn't be duplicated on the element, you don't need to worry. Both the native API and jQuery will prevent that from happening.

Assuming everything else is working. Change:

var member = document.getElementById("private");

to

var member = $("#private");

Because corporation is a DOM element, not a jQuery node, and you're trying to use a jQuery function on it. Wrap it in a jQuery selector like $(corporation)

jsFiddle example

The problem you are having is that you are mixing jQuery with regular javasript, and it is only if you use jQuery that you can use removeClass on an object like you are trying to do.

Another things is that it can not find :

var member = document.getElementById("private");

It is not finding the "private" in other words member does not get created.

This is related to the # sign, that makes it an id. A . is a class, and a # is an id.

If private is an id, you do this:

var member = document.getElementById("#private");

Whem $ is missing from $("#updateItemCat").addClass("d-none");

like ("#updateItemCat").addClass("d-none");

this also gives "addclass is not a function"