ラジオ入力ステータスに基づいて値をコピーします

Question

私は動的に入力されたフィールドを持つ重力フォームページにいくつかの値をコピーする必要があるWordPressテーマを作成しています。このユニットの価格とともに保存されたACFリピーターフィールドとしてオプション（空調パワー）をロードしています。私は、チェックされたラジオに基づいてこの価格を静的なdivフィールドと隠し入力フィールドにコピーして、フォームで使用できるようにする必要があります。

以下は、私が達成しなければならない単純な構造とこれまでのコードです。私が必要とするのは、どこかに保存された価格（PHP変数など）をdiv（おそらくjQuery）と隠しフィールドにコピーして、ユーザーの選択に基づいて動的に変更することだけです。

<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>