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