CODEWITHSUNDEEP
javascriptjquery
user3579614
user3579614

Reputation: 63

Class not removing on click

$(document).ready(function (){

            var postcode = $('#postcode-form').val();

            function errors(){
                if(postcode == ""){
                    $('#postcode-form').addClass("form-error");
                }else{
                    $('#postcode-form').removeClass("form-error");
                }
            }

            $('#submit-form').click(errors);
        });

The class adds when the form is empty but doesn't remove when I enter details in the form. I don't understand why?

Upvotes: 0

Views: 39

Answers (2)

humbolight
humbolight

Reputation: 690

So now you know why it isn't working. I would take advantage of the blunder though, and refactor to cache the selector! 

$(document).ready(function (){

        var $postcode = $('#postcode-form');

        function errors(){
            if($postcode.val() == ""){
                $postcode.addClass("form-error");
            }else{
                $postcode.removeClass("form-error");
            }
        }

        $('#submit-form').click(errors);
    });

Upvotes: 0

j08691
j08691

Reputation: 208022

Move the postcode chunk of code within your function. Otherwise it gets the value only once when the page loads. By placing it within the function, it'll check the value on each click.

function errors() {
    var postcode = $('#postcode-form').val();
    if (postcode == "") {
        $('#postcode-form').addClass("form-error");
    } else {
        $('#postcode-form').removeClass("form-error");
    }
}

Upvotes: 2

Related Questions