Hey there, I'm working on a project where the output value changes based on the selection made. I'd like to display the text "Total €" in front of the value like this:
.
However, the current output looks like this:
.
Additionally, I want to replace the "." in the value with a ",". But whenever I try to make adjustments, the blocks start overlapping. I'm hoping someone here has some solutions or ideas.
This is how I've styled the value output in my HTML:
<h1><input type="yeets" name="_mdjm_event_cost" id="yett" class="mdjm-input-currency required" readonly="readonly" value="" placeholder="Totaal €0.00" style="
height: 100px;
width: 150px;
margin-top: -40px;
color: black;
font-weight: bold;"/>
</h1>
Here's the value selector I'm using:
<select name="iFenceCorners" id="FenceCorners" class="AutosubmitCalculator" tabindex="3">
<option value="0" selected="selected" data-price="00.00">No corners</option>
<option value="1" data-price="20.00">1 corner</option><option value="2" data-price="40.00">2 corners</option><option value="3" data-price="60.00">3 corners</option><option value="4" data-price="80.00">4 corners</option>
<option value="5" data-price="100.00">5 corners</option><option value="6" data-price="120.00">6 corners</option><option value="7" data-price="140.00">7 corners</option><option value="8" data-price="160.00">8 corners</option>
<option value="9" data-price="180.00">9 corners</option><option value="10" data-price="200.00">10 corners</option>
</select>
And here is the Jquery Script I'm using:
base = 0;
$("#FenceCorners").on("change", function () {
var total = (base * 100 + $(this).find(":selected").data("price") * 100) / 100;
$("#yett").val(total.toFixed(2).replace('.', ','));
});