I need to make a jQuery selector to find all inputs that don't have the class "clear" to make their values uppercase.

Currently I have this code:

$("form").submit(function () {
    $("input[type=text]").val(function () {
        if (!$(this).hasClass("clear")) {
            return this.value.toUpperCase();
        } else {
            return this.value;
        }
    });

    $("input[type=text].lower").val(function () {
        return this.value.toLowerCase();
    });
});

This code is working well, but if I could make it using only the selector, I can skip the if/else code. I've searched for this selector, but without success.

Any idea?

Final Code

My final code looks like this:

$("form").submit(function () {
    $("input[type=text]").not(".clear").not(".lower").val(function () {
        return this.value.toUpperCase();
    });

    $("input[type=text].lower").val(function () {
        return this.value.toLowerCase();
    });
});

Thanks for all replies.

I need to make a jQuery selector to find all inputs that don't have the class "clear" to make their values uppercase.

Currently I have this code:

$("form").submit(function () {
    $("input[type=text]").val(function () {
        if (!$(this).hasClass("clear")) {
            return this.value.toUpperCase();
        } else {
            return this.value;
        }
    });

    $("input[type=text].lower").val(function () {
        return this.value.toLowerCase();
    });
});

This code is working well, but if I could make it using only the selector, I can skip the if/else code. I've searched for this selector, but without success.

Any idea?

Final Code

My final code looks like this:

$("form").submit(function () {
    $("input[type=text]").not(".clear").not(".lower").val(function () {
        return this.value.toUpperCase();
    });

    $("input[type=text].lower").val(function () {
        return this.value.toLowerCase();
    });
});

Thanks for all replies.

• javascript
• jquery

• 1 The way you're currently doing it is actually more efficient. I'd even move the .lower handling into the first if else. – Kevin B Commented Sep 23, 2013 at 17:17
• @KevinB I can't do this because I have three states: everything to lower, everything to upper or everything as user inputted. – Wellington Zanelli Commented Sep 23, 2013 at 17:24
• You can have an if elseif else, or simply return from each if such as Travis J's answer. – Kevin B Commented Sep 23, 2013 at 17:30

4 Answers 4

Use :not()

$("input[type=text]:not(.clear)").val(function () {
    return this.value.toUpperCase();
});

Use .not()

$("input[type=text]").not("YOUR_CLASS").val(function () {
        return this.value.toUpperCase();
    });

Take the original selector and then keep your condition statements. Just do them both at once. Note that returning this.value is redundant so it is removed here.

$("input[type=text]").val(function () {
    var $t = $(this);
    if ( $t.hasClass("lower") ) return this.value.toLowerCase();
    if ( !$t.hasClass("clear") ) return this.value.toUpperCase();
});

You can use the jQuery pseudo-selector :not -

$("input[type=text]:not(.clear)")

Here is some documentation on it

EDIT: Use the .not() function instead of :not when you can - it performs better