CODEWITHSUNDEEP
jquery
patesz
patesz

Reputation: 65

jQuery change method multiple elements

I would like to when I change #town and #animal value, then inputs background will be red. My code is change the inputs background, when I change one input, but I would like to, if I change both input, after the code will be change the background color.

My code:

<!DOCTYPE html>
<html>
<head>
    <title>Test page</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

    <script>
    $(document).ready(function() {
        $('#town, #animal').on('change', function() {
            $('input').css('background', 'red');
        });
    });
    </script>
</head>
<body>

<input type="text" id="town">
<input type="text" id="animal">

</body>
</html>

Upvotes: 2

Views: 3907

Answers (2)

Bharatsing Parmar
Bharatsing Parmar

Reputation: 2455

You can try this Working Fiddle

$('#town, #animal').on('change', function() {
    if($.trim($('#town').val())!='' && $.trim($('#animal').val())!=''){
        $('input').css('background', 'red');
    }
});

Upvotes: 5

Polymer
Polymer

Reputation: 1108

If you're wanting it so that you want to wait until both inputs have changed, then that's pretty simple! :)

Simply, have two variables:

var townChanged = false;
var animalChanged = false;

Then, do two jQuery functions:

$('#town').on('change', function() {
    townChanged = true;
    if (animalChanged) {
        $('input').css('background', 'red');
    }
});

$('#animal').on('change', function() {
    animalChanged = true;
    if (townChanged) {
        $('input').css('background', 'red');
    }
});

Obviously you're going to want to clean it up a bit, but I hope that's a good start for you

Upvotes: 1

Related Questions