Skip to content
Advertisement

jQuery onChange only running once

I have jQuery function in a WordPress Woo form that basically based on the dropdown fills in certain fields, the jQuery only executes once however. The code:

jQuery(document).ready(function() {
  // Your code in here
  jQuery(document).on('change', '#billing_complex_name', function() {
    myFunc();
  })

  function myFunc() {
    // your function code
    var complex_name = jQuery('#billing_complex_name').val();

    var suburb = jQuery('#billing_suburb').val();

    if (complex_name == 'eldogleneast') {
      jQuery("#billing_suburb").val('ELD');
      jQuery('#billing_postcode').val('0157');
    } else if (complex_name == 'Reldoglen') {
      jQuery("#billing_suburb").val('LPN');
      jQuery('#billing_postcode').val('0133');
    } else if (complex_name == 'eldin') {
      jQuery("#billing_suburb").val('STK');
      jQuery('#billing_postcode').val('2147');
      jQuery("#billing_complex_address").val('Lion St');
    } else if (complex_name == 'elm') {
      jQuery("#billing_suburb").val('ELD');
      jQuery('#billing_postcode').val('0147');
      jQuery("#billing_complex_address").val('Lor Ave');
    }
  }
})

How do I get it to always run onChange not just the once.

Advertisement

Answer

If 1st time select working and 2nd time not then need to reset value of select on mouseenter event like in my snippet code.

Don’t need to write document ready statement For both static and dynamic select changes.
Something like this.

jQuery(document).on(‘change’, ‘select’, function (e) {
// do something
});

I hope below snippet will help you a lot.

function myFunc(getvalue) {
    var complex_name = getvalue;
    if (complex_name == 'eldogleneast') {
        jQuery("#billing_suburb").val('ELD');
        jQuery('#billing_postcode').val('0157');
    } else if (complex_name == 'Reldoglen') {
        jQuery("#billing_suburb").val('LPN');
        jQuery('#billing_postcode').val('0133');
    } else if (complex_name == 'eldin') {
        jQuery("#billing_suburb").val('STK');
        jQuery('#billing_postcode').val('2147');
        jQuery("#billing_complex_address").val('Lion St');
    } else if (complex_name == 'elm') {
        jQuery("#billing_suburb").val('ELD');
        jQuery('#billing_postcode').val('0147');
        jQuery("#billing_complex_address").val('Lor Ave');
    }
}
jQuery(document).on('change', '#billing_complex_name', function () {
    var getname = jQuery('#billing_complex_name').val();
    jQuery("#billing_suburb, #billing_postcode, #billing_complex_address").val('')// first reset
    myFunc(getname);
});

jQuery(document).on('mouseenter', '#billing_complex_name', function () {
    $(this).val(''); // need to reset after change 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="billing_complex_name">
    <option value="" selected>---</option>
    <option value="eldogleneast">eldogleneast</option>
    <option value="Reldoglen">Reldoglen</option>
    <option value="eldin">eldin</option>
    <option value="elm">elm</option>
</select>
<br><br>
<label>Suburb</label><br>
<input type="text" id="billing_suburb">
<br><br>
<label>Post Code</label><br>
<input type="text" id="billing_postcode">
<br><br>
<label>Address</label><br>
<input type="text" id="billing_complex_address">
User contributions licensed under: CC BY-SA
9 People found this is helpful
Advertisement