How to use jQuery onChange with if / else statement's?

Question

I have a problem with javascript running because it is cashed.

Example

//Init onClick event
$(document).on('click', '.select', function(){
    //Check if select has value
    if( $(this).val() ){
        console.log( $(this).val() )
    } else {
        console.log('no value')

        $(this).on('change', function(){
            console.log('Changed!')
        }
    }
}

PROBLEM
Now consider i have a select. From start the value is empty and the option is disabled. First time i click the select, console will log "no value".
You click and you change option/value to something in the list.

Second time i click the select, an option is selected and it has a value. Console will now log "the value", but it will also log "changed".

I guess it's because i have run the else statement before and the onChange function is cashed in my browser or something like it...

How can i prevent this from happen.. or how should i write my code instead?
I need to check if a value is selected from start.. and i need to use the onChange function...

UPDATE
When you click the select, i'd like to know if the select has a selected value. (To know if you change/edit a value OR if you choose value for first time) This is why i have a onClick function. Here i check the value.

After you clicked and i have checked the value, i like to trigger a onChange function.. that will do this for the edit route.. or that for the new route..

`change` listener will not invoke its handler if it is disabled.. Use `$('.select').on('change', function(){ console.log('Changed!') }` as you have `click` listener.. — Rayon, Nov 21 '16 at 09:52
@Rayon my select's are dynamic added. I cannot use a selector like ".select" i need to use document to find it.. and this to specify it.. — Björn C, Nov 21 '16 at 10:02
@Mjukis — Well in that case, Read about [__`Event delegation`__](https://learn.jquery.com/events/event-delegation/) — Rayon, Nov 21 '16 at 10:03

ScanQR · Accepted Answer · 2016-11-21T10:16:50.650

2

You should only add "change" event on the select. Operations on a select element must be done in terms of it's state changed w.r.t it's options

 var pervious;
 //Init onClick event
$(document).on('focus','.select', function () {
    // Store the current value on focus and on change
    previous = this.value;
}).
on('change', '.select', function(){
    //Check if select has value
    if( $(this).val() ){
      console.log( $(this).val() );
      previous = this.value;
    }
    else{
      console.log('no value')
      // YOUR choice, reset it i.e. previous = null;
    }
});

edited Nov 21 '16 at 10:16

answered Nov 21 '16 at 09:53

ScanQR

3,542
1
10
27

I need the click.. to do my first check.. if the change is an edit..or first choice.. – Björn C Nov 21 '16 at 10:03
@Mjukis - no, you probably don't need a `click`, you simply need to trigger the `change` event to fire the function when you start your app. `$('.select').trigger('change')` – vsync Nov 21 '16 at 10:04
@Mjukis click on select always end's up on 'change' event as you are going to select some option. I dont understand your logic here. Also you can as suggested trigger an change event for your app initialization if really requires to do so – ScanQR Nov 21 '16 at 10:08
I use the onClick to get the value that is chosen before i change.. maby i can get that in the change to? – Björn C Nov 21 '16 at 10:09
@Mjukis yes that is correct. So register only change event as i suggested. If that helped please accept answer :) – ScanQR Nov 21 '16 at 10:10
Like this: http://stackoverflow.com/questions/4076770/getting-value-of-select-dropdown-before-change – Björn C Nov 21 '16 at 10:11
But your answer will give me the newly SELECTED value... not the value that is selected BEFORE i change it to a new?! – Björn C Nov 21 '16 at 10:12
@Mjukis your question no where expects this :) but if link suggested what you want then you should try that. – ScanQR Nov 21 '16 at 10:14
@Mjukis I have updated my answer from your current clear requirement. check if that helps now. – ScanQR Nov 21 '16 at 10:17

score 0 · Answer 2 · answered Nov 21 '16 at 10:16

The main problem I see on your code is that you are binding the change listener inside the click listener, so every time you click you bind another change event, giving you the idea of cashed onchange function. Take your change function outside the click delegating it properly. Something like:

$(document).on('click', '.select', function(){
    //Check if select has value
    if( $(this).val() ){
        console.log( $(this).val() )
    } else {
        console.log('no value')
    }
})
$(document).on('change', '.select', function(){
    console.log('Changed!')
})

How to use jQuery onChange with if / else statement's?

2 Answers2