Selecting/changing shipping method - JS event?

Developer
Fra Czech Republic
Member since apr. 2018

Selecting/changing shipping method in checkout - it is possible to catch via JS/jQuery (any event)?
I need to detect selected shipping method/module and trigger another event via JS/jQuery.
How best to do it?
Thanks for help.

tim
Founder
Fra Sweden
Member since maj 2013
tim

Use regular jQuery Events:


  alert('You clicked option: ' + $(this).val());
});```

This willl not work as the content is refreshed by ajax and the set events are lost upon that refresh:

```$('input[name="shipping[option_id]"]').change(function(){
  alert('You clicked option: ' + $(this).val());
});```
Developer
Fra Czech Republic
Member since apr. 2018

I've tried that, but it doesn't work in Google Chrome or in any other browser.

I found "There's no reliable cross-browser event that gets fired when the content of a DIV (as opposed to a form element, say) changes.".

tim
Founder
Fra Sweden
Member since maj 2013
tim

You are right, "click" as an event works but not change. I wonder why.

Developer
Fra Czech Republic
Member since apr. 2018

I spent several hours doing this, but I could not find a solution.
Manually triggering a change event on the input (shipping[option_id]) is probably the only one solution.

tim
Founder
Fra Sweden
Member since maj 2013
tim

Click should do if you check the check state between the clicks.
Still, I'm very surprised. The radio buttons are hidden, but the label wrapper should delegate the onchange event.

Try triggering the event like this:

In includes/templates/default.catalog/pages/checkout.inc.php

Find

$(this).find('input[name="shipping[option_id]"]').prop('checked', true);

Replace with

$(this).find('input[name="shipping[option_id]"]').prop('checked', true).trigger('change');

This thread has been closed due to long inactivity. Posting to it is not possible.
This website uses no cookies and no third party tracking technology. We think we can do better than others and really think about your privacy.