根据广播输入状态复制一个值

Question

我正在创建一个WordPress主题，我需要将一些值复制到具有动态填充字段的Gravity Forms页面。我正在加载选项（空调电源）作为与此特定单位的价格一起保存的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>