Jquery Sum Total

Question

I have a script that sums 2 values. And im planning to add more values, but first I need to get it to work. People told me to give them the NUMBER value, so I did but now it doesnt even give an output.

base = 0;
$("#FenceCorners").on("change", function() {
  var total = (base * 100 + $(this).find(":selected").data("price") * 100) / 100; // selector
  $("#yett").val('Total €' + number(total.toFixed(2).replace(/\./g, ','))); // total value
});

$(function() {
  var begin = 720; // standard value (start value)
  $("#yett").val('Total €' + number(begin.toFixed(2).replace(/\./g, ','))); // total value
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="iFenceCorners" id="FenceCorners" class="AutosubmitCalculator" tabindex="3">
  <option value="0" selected="selected" data-price="00.00">Geen hoeken</option>
  <option value="1" data-price="20.00">1 hoek</option>
  <option value="2" data-price="40.00">2 hoeken</option>
  <option value="3" data-price="60.00">3 hoeken</option>
  <option value="4" data-price="80.00">4 hoeken</option>
  <option value="5" data-price="100.00">5 hoeken</option>
  <option value="6" data-price="120.00">6 hoeken</option>
  <option value="7" data-price="140.00">7 hoeken</option>
  <option value="8" data-price="160.00">8 hoeken</option>
  <option value="9" data-price="180.00">9 hoeken</option>
  <option value="10" data-price="200.00">10 hoeken</option>
</select>

<div class="SummaryRow">
  <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: 275px; margin-top: -40px; color: black; font-weight: bold;" />
  </h1>
</div>

The idea was that i had an standard 720 value and let the selector add value to that and make it sum a total and print that in the output.

Could you please add your HTML to the question so we can see a working example of the issue — Rory McCrossan
– Rory McCrossan, Commented Dec 17, 2018 at 11:39
Note that number needs to be Number. Also input type="yeets" is invalid. — Rory McCrossan
– Rory McCrossan, Commented Dec 17, 2018 at 11:43

Udhay Titus · Accepted Answer · 2018-12-17 12:00:22Z

1

replace input type="yeets" into input type="text" because yeets is not a type of html input.

instead of this line // $("#yett").val('Total €' + number(total.toFixed(2).replace(/\./g, ','))); try this $("#yett").val('Total €' + total.toFixed(2)); because number is not defined.

As same thing instead of this $("#yett").val('Total €' + number(begin.toFixed(2).replace(/\./g, ','))); try this $("#yett").val('Total €' + begin.toFixed(2)); because here also number is not defined.

$(document).ready(function(){
base = 0;
$("#FenceCorners").on("change", function() {
  var total = (base * 100 + $(this).find(":selected").data("price") * 100) / 100; // selector
 
 // $("#yett").val('Total €' + number(total.toFixed(2).replace(/\./g, ','))); // total value
   $("#yett").val('Total €' + total.toFixed(2));
});

$(function() {
  var begin = 720; // standard value (start value)
  $("#yett").val('Total €' + begin.toFixed(2)); // total value
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="SummaryRow">
<h1><input type="text" name="_mdjm_event_cost" id="yett" class="mdjm-input-currency required"  value="" placeholder="Totaal €0.00" style="
  height: 100px;
  width: 275px;
  margin-top: -40px;
  color: black;
  font-weight: bold;"/>
</h1>
</div>
<select name="iFenceCorners" id="FenceCorners" class="AutosubmitCalculator" tabindex="3">
  <option value="0" selected="selected" data-price="00.00">Geen hoeken</option>
  <option value="1" data-price="20.00">1 hoek</option><option value="2" data-price="40.00">2 hoeken</option><option value="3" data-price="60.00">3 hoeken</option><option value="4" data-price="80.00">4 hoeken</option>
  <option value="5" data-price="100.00">5 hoeken</option><option value="6" data-price="120.00">6 hoeken</option><option value="7" data-price="140.00">7 hoeken</option><option value="8" data-price="160.00">8 hoeken</option>
  <option value="9" data-price="180.00">9 hoeken</option><option value="10" data-price="200.00">10 hoeken</option>
</select>

edited Dec 17, 2018 at 12:00

answered Dec 17, 2018 at 11:53

Udhay Titus

5,8674 gold badges26 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

J. Coderino Over a year ago

Hey Udhay thanks for your answer. But this show 2 different outputs. And english isnt my mother language but doesnt sum mean that 2 values get added up together? And that was my goal. (If I asked it wrong, sorry and I will flag your answer as correct)

Udhay Titus Over a year ago

do you have two selectors to sum the values or update your question what do you want exactly?

J. Coderino Over a year ago

I meant i wanted the value of the selector to add itself to the total value. Didnt I ask that correctly? If so what should I ask?

Udhay Titus Over a year ago

If previous value is 20, then if you select new value it will be sum with previous value. For eg:- Prev Total : 720 if you select 20 then total should be 740.. may I correct

Udhay Titus Over a year ago

@J.Coderino I created your expected result check here jsfiddle.net/z4v5r09s

Collectives™ on Stack Overflow

Jquery Sum Total

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related