Detect if Dropdown has been changed by Javascript function

Question

I have a Javascript function that auto-populates form fields based on an available list of addresses. If a User selects an option that is a country other than the US, we are not going to require Zip Code / State fields in our form that gets populated (all "required" validation is handled through "data-required=true"). The form is dynamically generated, so I cannot use the .change() method that some people are suggesting.

I have a "Change" listener setup to remove the "data-required" attribute, which works if they click the Country dropdown and select a different country. However, it does not work when the Javascript function changes that same dropdown.

jQuery( document ).ready(function() {

    jQuery('body').on('change','#coHCOUN',function() {
        if(jQuery(this).val() == 'US') {
            jQuery('#coHPOST').attr('data-required','true');
            jQuery('#coHSTE').attr('data-required','true');
        } else {
            jQuery('#coHPOST').removeAttr('data-required');
            jQuery('#coHSTE').removeAttr('data-required');
        }
    });
});

The function that grabs hidden form values when selecting an address, and applies them to the form. This is older code written in vanilla javascript, not jQuery:

function SetShipTo(CIPID) {
    document.getElementById("coHNAME").value=document.getElementById("vSHIPTO" + CIPID + "HNAME").value;
    document.getElementById("coHATN").value=document.getElementById("vSHIPTO" + CIPID + "HATN").value;
    document.getElementById("coHAD1").value=document.getElementById("vSHIPTO" + CIPID + "HAD1").value;
    document.getElementById("coHAD2").value=document.getElementById("vSHIPTO" + CIPID + "HAD2").value;
    document.getElementById("coHAD3").value=document.getElementById("vSHIPTO" + CIPID + "HAD3").value;
    document.getElementById("coHSTE").value=document.getElementById("vSHIPTO" + CIPID + "HSTE").value;
    document.getElementById("coHPOST").value=document.getElementById("vSHIPTO" + CIPID + "HPOST").value;
    document.getElementById("coHCOUN").value=document.getElementById("vSHIPTO" + CIPID + "HCOUN").value;
    document.getElementById("coHVIA").value=document.getElementById("vSHIPTO" + CIPID + "HVIA").value;
    document.getElementById("coHSHPR").value=document.getElementById("vSHIPTO" + CIPID + "HSHPR").value;
    document.getElementById("coCIPLOC").value=document.getElementById("vSHIPTO" + CIPID + "CIPLOC").value;
    document.getElementById("SAVESHIPTOFU").checked=false;
}

Is there another event listener I can add to detect if a value changes from a javascript function? I do not want to add extra code to the auto-populate function if possible

Do you have control over the JavaScript that changes the dropdown? Can you provide it? — George, Jul 22 '15 at 14:55
@Thriggle It is similar but different. As I answered to Alex the element is dynamically generated so the .change() method from that question will not work. It is also in my question that it is not jQuery changing the dropdown value, it is vanilla javascript. — Bryan Zwicker, Jul 22 '15 at 15:23
@BryanZwicker Check out Clarence Liu's answer to that question. The reason the event doesn't trigger when changing the value via jQuery is because it doesn't trigger when changing the value via vanilla JS. The possible solutions are either to check the DOM regularly via a recurring function (yuck) or write a wrapper function that changes the value *and* triggers a custom event, which you can then attach your event listener to. — Thriggle, Jul 22 '15 at 15:30
@Thriggle Thank you for pointing that one out. After re-reading that answer, I am going to do something similar where I trigger the change event manually as pointed out in Naresh's answer when I call the form-population method. Obviously it is not ideal, but it works! — Bryan Zwicker, Jul 22 '15 at 15:34

score 4 · Accepted Answer · answered Jul 22 '15 at 14:59

4

Trigger Change inside the function where dropdown change, May help you here

$('#coHCOUN').trigger('change')

answered Jul 22 '15 at 14:59

Naresh217

410
1
6
19

This is probably what I will go with if there is not a listener for the added information I put to the question. We were mostly hoping to keep this code self-contained, but it might be necessary – Bryan Zwicker Jul 22 '15 at 15:12

score 1 · Answer 2 · answered Jul 22 '15 at 15:20

If the javascript that is setting the dropdown (I'm assuming it's a select tag) is using jQuery you could use hooks to force the change event to trigger when $('#select').val('option') is called. That way you don't need to modify the code that is changing the dropdown, which might be in a library.

Something like this:

$.valHooks.select = {
  get: function(elem) {
    return $(elem).val();
  },
  set: function(elem, value) {
    $(elem).val(value).trigger('change');
  }
};

It's possible that the value change might not have registered by the time the event triggers so the trigger may need to go in a setTimeout. You might be able to omit the get function, I'm not sure.

It is a select tag, but it is not using jQuery. Very interesting answer though! I never knew about those types of hooks. Thank you! — Bryan Zwicker, Jul 22 '15 at 15:26

score 0 · Answer 3 · answered Jul 22 '15 at 15:03

I think you have to point the on change listener to the dropdown element:

    $(#coHCOUN).change(function(){
        if(jQuery(this).val() == 'US') {
            jQuery('#coHPOST').attr('data-required','true');
            jQuery('#coHSTE').attr('data-required','true');
        } else {
            jQuery('#coHPOST').removeAttr('data-required');
            jQuery('#coHSTE').removeAttr('data-required');
        }

});

may this link be helpful http://www.w3schools.com/jquery/event_change.asp

I can't use this method because it is a dynamically generated form (which I did not mention in the question). This is why I am using the .on method — Bryan Zwicker, Jul 22 '15 at 15:07

Detect if Dropdown has been changed by Javascript function

3 Answers3