CODEWITHSUNDEEP
jqueryrazor
DocSmiley
DocSmiley

Reputation: 123

Text element background color change

I'm a little new to jquery so please bear with me.

I'm working on a registration system and have a password and confirm password text box. I would like to set the background-color of the confirm box whenever the contents of the two boxes change. Color would be based on if the contents of the boxes match.

EDIT - My original code was not changing the background color at all. I would like to have it change as the user types rather than on focus/blur.

My code is as follows. 

<input type="password" name="password" id="newpassword"/>
<input type = "password" name = "confirm" id="confirm"/>
<input type="submit" value="Register" id="Register"/>

<script>
    $(document).ready(function () {
        $('#password').change(function () {
            if ($('#newpassword').val().Equals($('#confirm').val())) {
                $('#confirm').attr("backgroundcolor", "green");
                $('#Register').attr("disabled", "");
            } else {
                $('#confirm').attr("backgroundcolor", "red");
                $('#Register').attr("disabled", "disabled");
            }
        });
        $('#confirm').change(function () {
            if ($('#newpassword').val().Equals($('#confirm').val())) {
                $('#confirm').attr("backgroundcolor", "green");
                $('#Register').attr("disabled", "");
            } else {
                $('#confirm').attr("backgroundcolor", "red");
                $('#Register').attr("disabled", "disabled");
            }
        })
</script>

Thanks in advance

Upvotes: 0

Views: 765

Answers (3)

amatellanes
amatellanes

Reputation: 3735

Try this code http://jsfiddle.net/pQpYX/:

$(document).ready(function () {
    $('#confirm').keypress(function (event) {
        if ($('#newpassword').val() == ($('#confirm').val() + String.fromCharCode(event.keyCode))) {
            $('#confirm').css("background-color", "green");
            $('#newpassword').removeAttr("disabled");
        } else {
            $('#confirm').css("background-color", "red");
            $('#newpassword').attr("disabled", "disabled");
        }
    });
});

Upvotes: 1

Spokey
Spokey

Reputation: 10994

$(document).ready(function () {
    $('#newpassword, #confirm').change(function () {
        var $n = $('#newpassword'),
            $c = $('#confirm'),
            newp = $n.val(),
            conf = $c.val();
        if (newp === conf) {
            $c.css('background-color', 'green');
            $n.prop('disabled', false)
        } else {
            $c.css('background-color', 'red');
            $n.prop('disabled', true)
        }
    });
});

Hope this is what you wanted to do.

Fiddle

Upvotes: 1

Bernie
Bernie

Reputation: 5055

Use css method because backgroundcolor isn't an attribute.

$('#confirm').css("backgroundColor", "green");

Upvotes: 2

Related Questions