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.
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">