Get customer chosen shipping method with jQuery

Question

How could i find out the shipping method that the customer has chosen right after click of change?

I have tried to get shipping methods id or value that customer has chosen when he/she has clicked on radio button. The code I am using is:

require(['jquery'], function ($) {
 $(document).ready(function () {
 $( '.radio' ).click(function() {
 console.log('Test');
 });
 });
});

When i refresh the page then radio buttons are coloured grey and nothing in log after click. I have tried also with jQuery .on('change', function () {...}. I think that the problem is that inside input element has written data-bind="checked:... clicked:... ". What can i do to get shiping method id or value?

Answer 1

On Click radio Button

jQuery("input.shipping_type").change(function () {
 jQuery.ajax({
 type: 'post',
 url: '<?php echo $this->getUrl('checkout/cart/estimateUpdatePost') ?>',
 data: jQuery('#co-shipping-method-form').serialize(),
 beforeSend: function () {
 jQuery("#loading-image").show();
 },
 success: function () {
 //you can alert value here
 window.location.reload(true);
 }
 });
 });

• user3748173: Still not working in Magento (I tried this code without ajax to see if i get any response). Also i noticed that magento signs different names to the radio buttons.

Answer 2

I know it's an old question, but i think i have solution. Maybe it will be helpful for someone. If you want to get the Shipping Method title, you can use this code:

$(document).on("click", 'input.radio', function () {
 console.log($(this).parent().siblings('.col-method').html()); 
});

Maybe it is not nice solution, but it works. enter image description here

As you can see in td.col-method you have title of shipping method, so using above code you can get this title. Hope this help