Detect input change OR select change [duplicate]

Question

I have this script I made, but I need help to complete it. I want to show a message if isotope filters return no results.

So far, the script works if I use one function at a time (one function is for input field and one function is for select fields), but I need to combine functions so if I use input or select (or both) it will work.

My select function is commented out because, like I said, they don't work together so far.

Here's my code so far:

let selectChange = $('#filters select');
let inputChange = $('#filters input');
let noResults = $('.no-results');
let reset = $('#isotope-reset');
    
selectChange.change(function() {
    if($('.container.isotope').children(':visible').length == 0) {
              //noResults.show();
    }else {
        //noResults.hide();
    }
});
inputChange.on('input', function() {
    if($('.container.isotope').children(':visible').length == 0) {
      noResults.show();
    }else {
        noResults.hide();
    }
});

    reset.on('click', function() {
        noResults.hide();
});

Any help would be appreciated. Thanks!

Please provide html and css as well. That will help the community to help you — Jay Nyxed
– Jay Nyxed, Commented Feb 27, 2022 at 17:50
selectChange.change(function() { suggest you use this syntax selectChange.on('change', function() { — Mark Schultheiss
– Mark Schultheiss, Commented Mar 16, 2022 at 16:48
This was closed but there is a way to do both the filter of the visibility of the $('.container.isotope') and use both these inputs, the reset all in 13 lines of code — Mark Schultheiss
– Mark Schultheiss, Commented Mar 17, 2022 at 13:17

ionalchemist · Accepted Answer · 2022-03-16 23:26:50Z

2

There's a number of ways you can do this. I'll show a couple. You can combine selectors/events like so:

let filtersChange = $('#filters').find('select,input');

And then combine the events:

filtersChange.on('input change', function(e) {
    code here
});

And if you need to detect which selector/event is triggered. By putting the "e" as the argument to the function, that gives us access to the event object. You can use whatever variable you want to bind the event object to, but "e" is commonplace, e for event, and a lot of people like to be more explicit and use "event". So this:

filtersChange.on('input change', function(e) {

Or this:

filtersChange.on('input change', function(event) {

Choice is yours. By passing the event object into the function, you can determine the type of event:

filtersChange.on('input change', function(event) {
    if (event.type === 'change') {
        \\do something
    } else {  \\event.type will equal 'input'
        \\do something else
    }
});

And then if you need to determine the selector:

filtersChange.on('input change', function(event) {
    if ($(this).is('select')) {
        \\do something with select boxes only
    } else {  \\$(this).is('input')
        \\do something else with input boxes only
    }
});

This is what I would probably have done in your situation:

<select class="filter" name="mySelect">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<input class="filter" name="mySelect" value="myValue" />

And then any element with class "filter" will respond to those events:

$('.filter').on('change input', function(e) {
    if ($('.container.isotope').children(':visible').length == 0) {
        noResults.show();
    } else {
        noResults.hide();
    }
});

That was more than I had intended to write.

edited Mar 16, 2022 at 23:26

answered Mar 16, 2022 at 16:38

ionalchemist

4085 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mark Schultheiss Over a year ago

Or simply noResults.toggle(!$('.container.isotope').children(':visible').length); and no need for the if/else here at all

Mark Schultheiss Over a year ago

.on('change,input' should be .on('change input'

Collectives™ on Stack Overflow

Detect input change OR select change [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related