2016-11-14 1 views
0

Ich erstelle ein WordPress Theme, in dem ich einige Werte auf eine Gravity Forms Seite mit dynamisch aufgefüllten Feldern kopieren muss. Ich lade Optionen (Klimaanlage) als ACF Repeater-Feld zusammen mit dem Preis für diese spezielle Einheit gespeichert. Ich muss diesen Preis basierend auf dem überprüften Radio in ein statisches Div-Feld plus in ein verstecktes Eingabefeld kopieren, damit es im Formular verwendet werden kann.Kopiere einen Wert basierend auf Radio-Eingangsstatus

Unten ist die einfache Struktur, die ich erreichen muss und ein Code, den ich bis jetzt habe. Alles, was ich brauche, ist, den irgendwo gespeicherten Preis (kann eine PHP-Variable oder irgendetwas sein) zu einem div (wahrscheinlich von jQuery) und in ein verstecktes Feld gleichzeitig zu kopieren und dynamisch zu ändern, basierend auf der Wahl des Benutzers.

code structure

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

Antwort

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>

+0

Es funktioniert! Danke vielmals! Ich musste ein Skript ein wenig ändern, aber es funktioniert alles super. Dies ist ein Endergebnis btw https://www.klimajednoduce.cz/klimatizace/sencor-sac-mt7011c/ – Machi

Verwandte Themen