根据无线电输入状态复制值

Question

I'm creating a WordPress theme in which I need to copy some values to a Gravity Forms page with dynamically populated fields. I'm loading options (air-conditioning power) as an ACF repeater field saved together with price of this particular unit. I need to copy this price based on the checked radio into a static div field plus into a hidden input field so it can be used in the form.

Below is the simple structure I need to achieve and a code I have so far. All I need is to copy the price saved somewhere (can be a PHP varible or anything) to a div (probably by jQuery) and into a hidden field in the same time and change it dynamically based on users choice.

<form class="order" action="<?php echo get_permalink(26); ?>">
<div>
<?php if($power) { ?>
    <div class="power">
        <?php $power_counter = 1; while(have_rows('power')) { the_row();
            $power= get_sub_field('power');
            $price = get_sub_field('price');
        ?>
            <input type="radio" name="power" id="power<?php echo $power_counter; ?>" value="<?php echo get_the_title() . ' ' . $power; ?>"<?php if($power_counter == 1) { echo "checked"; }; ?>><label for="power<?php echo $power_counter; ?>"><?php echo $power; ?></label>
            <input type="hidden" name="price_wo_vat" id="price<?php echo $power_counter; ?>" value="<?php echo $price; ?>">
            <div id="price<?php echo $power_counter; ?>" class="price"><?php echo $price. __(' CZK','klima'); ?></div>
        <?php $power_counter++; }; ?>
    </div>
<?php }; ?>
<input type="number" name="pcs" value="1" min="1" max="99">
<input type="submit" value="<?php _e('Order','klima'); ?>">
</div>

Answer 1

$(document).ready(function() { 
    var selPrice = parseInt($('#selected_price').val()),
        chosenPrice = parseInt($('input[name="power"]:checked').val()),
        qty = parseInt($('input[name="pcs"]').val()),
        initTotal = calcTotal(chosenPrice, qty);
  
    $('#total').text(initTotal);
  
    $('input[name="pcs"]').on('change', function() { 
        var myQty = $(this).val(),
            chooseQty = parseInt($('input[name="power"]:checked').val()),
            newQty = calcTotal(chooseQty, myQty);

        $('#total').text(newQty);
    });
  
    $('input[name="power"]').on('click', function() { 
        var myPrice = $(this).val(),
            myQty = parseInt($('input[name="pcs"]').val()),
            newTotal = calcTotal(myPrice, myQty);
      
        $(this).attr('checked',true);
        $('#total').text(newTotal);
    });
  
});

function calcTotal(price, qty) {
    var total = price * qty;
    return total
}

.power {
    margin-bottom: 10px; 
}

.total-container {
    padding: 5px;
    background-color: #DDD;
    width: 50px;
    margin-bottom: 10px;
}

input[name='pcs'] {
    padding: 5px;
    text-align: center;
    width: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="order" action="#">
<div>
    <div class="power">
        <!-- #Power 1 -->
        <input type="radio" name="power" id="power1" value="62" data-xvat="80" checked="true">
        <label for="power1">Option 1 - £62</label>
        <br>
  
        <!-- #Power 2 -->
        <input type="radio" name="power" id="power2" value="114" data-xvat="160">
        <label for="power2">Option 2 - £114</label>
        <br>
      
        <!-- #Power 3 -->
        <input type="radio" name="power" id="power3" value="139" data-xvat="240">
        <label for="power3">Option 3 - £139</label>
        <br>

      
    </div>
    <div class="total-container">£<span id="total"></span></div> 
    <input type="hidden" name="selected_price" id="selected_price" value="0">
    <input type="number" name="pcs" value="1" min="1" max="99">
    <input type="submit" value="Order">
</div>

</div>