Get radio input value display on same page, no refresh

Question

I cannot take the value of the type of freight that the user chooses and display it on the same page in the checkout box.

This is the page the user enters the freight

<div class="delivery">
                                <div class="section_title">Calcule o frete</div>
                                <div class="section_subtitle">Entregue pelos Correios</div> 
                                <div class="coupon_form_container">
                                    <div class="coupon_form">

                                    <input type="text" class="coupon_input" placeholder="Digite seu CEP" id="frete_cart" name="frete_cart" required="required">
                                    <button class="button coupon_button" ><span>Calcular</span></button>
                                </div>
                            </div>
                            <div class="resposta" id='resposta'></div>


                </div>

<li class="d-flex flex-row align-items-center justify-content-start">
                                <div class="cart_total_title">Frete</div>
                                <div class="cart_total_value ml-auto">AQUI VAI O VALOR DO FRETE ESCOLHIDO</div>
                            </li>

<script> //calculo frete
var frete_cart = $("#frete_cart"); 
    frete_cart.change(function() { 
        $.ajax({ 
            url: 'calcularFrete.php?peso=<?php echo $peso ?>&total=<?php echo $total ?>', 
            type: 'POST', 
            data:{"frete_cart" : frete_cart.val()}, 
            success: function(data) { 
            console.log(data); 
            data = $.parseJSON(data); 
           // $("#resposta").text(data.email);
           //$("#submit").attr("disabled", true);

            $("#resposta").html(data.frete_cart);


        } 
    }); 
}); 

calculate Payment.php

if(isset($_POST['frete_cart'])){ 
include('conn.php');



$peso = $_GET['peso'];
$valor = (int)$_GET['total']; // transforma o valor do produto em inteiro

#Recebe o cep de destino
$cepDestino = $_POST['frete_cart'];

if(isset($cepDestino)){ // se existir o cep de pesquisa faz a consulta

$sedex = (calcular_frete('88960000', $cepDestino, $peso,$valor,'04014'));
$pac = (calcular_frete('88960000', $cepDestino,$peso,$valor,'04510'));

// $exibe ="<p>Receba em até " . $sedex->PrazoEntrega . " dias úteis: " . $sedex->Valor . "</p> <p> Receba em até " . $pac->PrazoEntrega . " dias úteis: " . $pac->Valor . "</p>" ;


        $exibe ="<div class='delivery_options'>
                        <label class='delivery_option clearfix'>Receba em até  " . $sedex->PrazoEntrega . " dias úteis. 
                            <input type='radio' name='frete' id='frete'  value='". $sedex->Valor ."'>
                            <span class='checkmark'></span>
                            <span class='delivery_price'> R$ ". $sedex->Valor . "</span>
                        </label>
                        <label class='delivery_option clearfix'>Receba em até  " . $pac->PrazoEntrega . " dias úteis: 
                            <input type='radio' name='frete' id='frete'  value='". $pac->Valor ."'>
                            <span class='checkmark'></span>
                            <span class='delivery_price'> R$ " . $pac->Valor . "</span>
                        </label>

                    </div>



                    ";




echo json_encode(array('frete_cart' => $exibe)); 
}
}

How do I when the user chooses one of the shipping options or the value will be displayed on the same page without needing to update? .................................................. ..................................................

Answer 1

if you want the freight value to be shown after clicking on the corresponding radio input, just create a script about the selection action:

$('#frete').change(function (event) {
    $("#resposta").html(data.frete_cart);
});

This way the value of the reply div will be changed as soon as selected the freight, without refresh of the page.

Answer 2

First thing is that you should not repeat the same id in more than one element. A id should be unique. See that you put the id="frete" on both radios. Remove these id’s because it is not even necessary to use id on the radios in this case. You can select the radios by the name or by the class of div where they are, which is .delivery_options.

It would be interesting to put the id="frete" in the div that will receive the amount:

<div id="frete" class="cart_total_value ml-auto">AQUI VAI O VALOR DO FRETE ESCOLHIDO</div>

This is because this div has only classes, and as another element may have one of these classes, will give problem.

You will select the radios as follows, passing the value to the div #frete:

$(document).on("click", ".delivery_options :radio", function(){
   $("#frete").html(this.value);
});

Take an example:

$(document).on("click", ".delivery_options :radio", function(){
   $("#frete").html(this.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='delivery_options'>
   <label class='delivery_option clearfix'>Receba em até  5 dias úteis. 
      <input type='radio' name='frete' value='36,80'>
      <span class='checkmark'></span>
      <span class='delivery_price'> R$ 36,80</span>
   </label>
   <br>
   <label class='delivery_option clearfix'>Receba em até  8 dias úteis: 
      <input type='radio' name='frete' value='32,48'>
      <span class='checkmark'></span>
      <span class='delivery_price'> R$ 32,48</span>
   </label>
</div>
<h2>Frete</h2>
<div id="frete" class="cart_total_value ml-auto"></div>