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);
            }

        });
    });

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.

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