onchange() in JavaScript or Jquery

Question

Good day,

I have a drop down list where have a onchange function call updateView(). jsp code is as follow:

<s:select name="accountDateRange" onchange="updateView();" id="function" >

However, there is not only this drop down list using this function. Some other function may call updateView() to proceed.

I have some code need to run when user do onchange on this drop down list, but I do not want this code to be run when other function call updateView().

Following is part of code of updateView():

function updateView() {

    // some other code here

        // here is the code that I only want to run during onchange
        $("#fromDate").val("");

    // some other code here

}

I have try to put in a onclick function in the dropdown, in this onclick function, I will set a variable to true.

So that I can using this variable to do checking before run the $("#fromDate").val("");, like:

if (onchangeOnly = true){
  $("#fromDate").val("");
}

However, I found that the onchange will run first compare with onclick.

Any way or idea to doing this? kindly advise.

EDIT :

function updateView() {

    // some other code here
    if ($("#function").val() == "TODAY") {
        // some other code here..
    }
    else if ($("#function").val() == "DATERANGE") {
        // here is the code that I only want to run during onchange
        $('[name="accountDateRange"]').on('change',function(){
                    alert('this is specific to this dropdown only');
                });
     } 
    // some other code here

}

I found that, even my $("#function").val() is not equal to "DATERANGE", it will also print out the alert('this is specific to this dropdown only'). Kindly point out what is my mistake.

why not add a parameter to your function updateView like this updateView(para). Send true to this from where you want to happen this change for others don't send — nraina
– nraina, Commented Jul 18, 2014 at 10:29
Hi, this is a way to solve it. But I have a lot of function is using this updateView, if I add in a parameter, I need to do many modification. Thus, I prefer not to do this. — Panadol Chong
– Panadol Chong, Commented Jul 18, 2014 at 10:32
As you're already using jQuery, why attach a handler like this onchange="updateView();", if you could just do it like posted in the answer below (by @LIUFA)? That way you'll know exactly which element fired up the event. — emerson.marini
– emerson.marini, Commented Jul 18, 2014 at 10:33

Matas Vaitkevicius · Accepted Answer · 2014-07-18 10:32:25Z

4

You can add more than one handler to same event, this means you can leave the existing function and write a new one and then add this function to dropdown so that other mechanisms triggering updateView() would be unaffected.

$('[name="accountDateRange"]').on('change',function(){
alert('this is specific to this dropdown only');
})

answered Jul 18, 2014 at 10:32

Matas Vaitkevicius

61.9k37 gold badges254 silver badges278 bronze badges

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

2 Comments

Panadol Chong Over a year ago

@LIUFA, have edit on my question. Kindly help again.

Matas Vaitkevicius Over a year ago

$('[name="accountDateRange"]').on('change',function(){ alert('this is specific to this dropdown only'); }) goes into the page in separate <script></script>, and not into the function updateView()

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

I'd do that in just jQuery without adding onchange to select element

js

$(document).ready(function(){
  $('#mySelect').bind('change', function(e){
    updateView(e.currentTarget.id)
  })
})

updateView = function (selectId) {
  if(selectId !== 'mySelect'){
    return;
  }
  alert('called from mySelect')
}

working plunker http://plnkr.co/edit/EmSowz6osgse2Ou8g6FC?p=preview

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 18, 2014 at 10:36

maurycy

8,4201 gold badge30 silver badges44 bronze badges

1 Comment

Bhojendra Rauniyar Over a year ago

Your idea is better. +1

Bhojendra Rauniyar · Accepted Answer · 2014-07-18 10:40:03Z

0

onclick is not well for dropdown list just in the onchange function you need to use your function. And decide to use a parameter like this:

function updateView(bool) {
   if(bool){
    //do your stuff
   }
}

Another way is to add your new function in new onchange as mentioned by LIUFA but please make sure to use stopPropagation or return false to make it work.

answered Jul 18, 2014 at 10:40

Bhojendra Rauniyar

86.1k36 gold badges179 silver badges241 bronze badges

Collectives™ on Stack Overflow

onchange() in JavaScript or Jquery

3 Answers 3

2 Comments

js

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

js

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related