Link to home
Start Free TrialLog in
Avatar of Robert Granlund
Robert GranlundFlag for United States of America

asked on

jQuery on Change Function not working

jQuery Radio Button on Change Function not working.

<script>
    (function ($) {
   $("input[name=shipping_method[0]]:radio").change(function () {
        alert('HOLA');
 });
}) (jQuery);
    </script>


	<ul id="shipping_method" class="woocommerce-shipping-methods">
									<li>
						<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate1" value="flat_rate:1" class="shipping_method"  /><label for="shipping_method_0_flat_rate1">Flat rate: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#36;</span>102.00</span></label>					</li>
									<li>
						<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate3" value="flat_rate:3" class="shipping_method"  /><label for="shipping_method_0_flat_rate3">Fed Ex: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#36;</span>39.00</span></label>					</li>
									<li>
						<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate4" value="flat_rate:4" class="shipping_method"  checked='checked' /><label for="shipping_method_0_flat_rate4">UPS: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#36;</span>39.00</span></label>					</li>
									<li>
						<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate5" value="flat_rate:5" class="shipping_method"  /><label for="shipping_method_0_flat_rate5">DHL: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#36;</span>39.00</span></label>					</li>
									<li>
						<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate6" value="flat_rate:6" class="shipping_method"  /><label for="shipping_method_0_flat_rate6">Other: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&#36;</span>39.00</span></label>					</li>
							</ul>

Open in new window


What am I doing wrong here?
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
or try this instead:

$(document).ready(function () {
                            $('input[type=radio][name="shipping_method[0]"]').change(function () {
                                alert('HOLA');
                            });
                        });

Open in new window

Avatar of Robert Granlund

ASKER

I get either:
ReferenceError: $ is not defined
OR
ReferenceError: jQuery is not defined
When I run either of the above
so include the jQuery script just before the <script> tag
try get the jQuery CDN from:

jQuery CDN
https://code.jquery.com/

to implement:

<script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>

Open in new window