You will need to use ajax to set values in WooCommerce session variables first. Once your values are set in wc()->session, then you can access them anywhere within the WooCommerce hooks or actions.
See below code example:
/*Ajax Call Back*/
add_action( 'wp_ajax_my_action', 'my_action_callback' );
$shipping_charges;
function my_action_callback() {
$shipping_charges = $_POST['shipping_charges'];
WC()->session->set("th_shipping_charges", $shipping_charges );
}
/*Ajax code to get values from the form and post to WordPress backend*/
add_action( 'wp_footer', 'my_footer_code' );
function my_footer_code() {
$html="
jQuery("#th_sub_area").change(function(){
var shipping_charges;
var selected_sub_area = jQuery("#th_sub_area").find(":selected").val();
if(selected_sub_area="DHA'){
var shipping_charges= 150;
}
/ In front end of WordPress we have to define ajaxurl /
var ajaxurl = "'.admin_url('admin-ajax.php').'";
var data = {
"action": "my_action",
"shipping_charges" : shipping_charges,
};
jQuery.post(ajaxurl, data, function(response) {
jQuery("body").trigger("update_checkout");
});
});
';
echo $html;
}