Calculate total with javascript on click button

Question

I have a simple form with a few checkbox options and a submit button. What I would like to accomplish is that when a visitor selects one or more options, the total price (sum) will be shown after clicking the button.

The total (sum) must be placed in the last div with id 'uk-total-price'. The basic value is the price without extra options. The basic value, in this case 19.500, is visible.

Is it possible with javascript or jquery to make this work?

<form>

<div id="uk-form-checkbox">
<input id="option 1" class="uk-checkbox-box" value="100" name="option 1" type="checkbox">
<label for="option 1" >option 1</label>
<input id="option 2" class="uk-checkbox-box" value="250" name="option 2" type="checkbox">
<label for="option 2" >option 2</label>
<input id="option 3" class="uk-checkbox-box" value="500" name="option 3" type="checkbox">
<label for="option 3" >option 3</label>
</div>

<div id="uk-form-submit">
<button id="submit" class="uk-submit-button" type="submit">Calculate Total</button>
</div>

<div id="uk-total-price">19.500</div>

</form>

Did you do any research? What you are asking is very basic that means its also very easy to find on Google. — Granny, Jan 08 '18 at 13:24
[`click`](https://api.jquery.com/click/), [`val`](http://api.jquery.com/val/), [`sum`](https://stackoverflow.com/a/10624256/863110), [`html`](http://api.jquery.com/html/), — Mosh Feu, Jan 08 '18 at 13:29
Have you actually tried to do it? if you had upload your code — Luis felipe De jesus Munoz, Jan 08 '18 at 13:31
@Granny I did do a lot of research on Google and cannot find the answer, so that's why I post it here. — Viktor Horst, Jan 08 '18 at 15:47

Kostas Bakatselos · Accepted Answer · 2018-01-12T15:34:43.263

I think that if you just want to print the result you can use simple javascript code.The submit button will refresh your page.I changed a little bit your HTML code and I wrote the js code.Just copy my answer and paste it in your HTML file.Sorry for any English mistakes...Hope this helps! :)

<form>
<div id="uk-form-checkbox">
<input id="option-1" class="uk-checkbox-box" value="100" name="option 1" 
type="checkbox">
<label for="option-1" >option 1</label>
<input id="option-2" class="uk-checkbox-box" value="250" name="option 2" 
type="checkbox">
<label for="option-2" >option 2</label>
<input id="option-3" class="uk-checkbox-box" value="500" name="option 3" 
type="checkbox">
<label for="option-3" >option 3</label>
</div>
</form>

<div id="uk-form-submit" style="cursor:pointer;">
<div id="submit" class="uk-submit-button">Calculate Total</div>
</div>
<div id="uk-total-price"></div>

<script>
var button = document.getElementById("submit");
var result = document.getElementById("uk-total-price");

button.addEventListener( "click" , function(){

var options = document.getElementsByClassName('uk-checkbox-box');
var calc = 0;
var totalPrice = 19.5;    

 for (i = 0; i < options.length; i++) {
  if (options[i].checked) {
    calc = calc + parseInt( options[i].value );
  }
}
result.innerHTML = calc + totalPrice;

});
</script>

Thanks for the reply, but this doesn't work for me. The basic value isn't there anymore. — Viktor Horst, Jan 08 '18 at 16:10
I want to calculate the total price (checkboxes + basic price) and at the same time send an email with the checked checkboxes when a visitor clicks on the button 'Calculate total'. — Viktor Horst, Jan 12 '18 at 11:47
For the first part I added a variable 'totalPrice' in my javascript code.Try it and let me know please :) — Kostas Bakatselos, Jan 12 '18 at 15:35

Calculate total with javascript on click button

1 Answers1