JQuery Calculation Button

Question

Currently I have this GPA Calculator that calculates the data as it is inputted. I want to add a calculation button called "Calculate" that will calculate all of the inputted data but only when pressed. So the calculation will only occur when this button is pressed, not on the fly like it is currently doing.

Here is the code:

var $oBox = $('.outer-box');
var $gpa = $('#gpa');
var $result = $('.result').hide();

$('.btn').click(function() {
  $('.block').last().clone().children().val("").parent().appendTo($('.inner-box'));
});

$oBox.on('keyup', '.credits', function() {
  $gpa.text(getTotal());
});

$oBox.on("change", ".grade-select", function() {
  $gpa.text(getTotal());
  $result.is(":hidden") && $result.show();
});

function getTotal() {
  var gradeTotal = 0;
  var sum = 0;
  $(".credits").each(function() {
    var $this = $(this);
    if (!isNaN($this.val()) && !isNaN($this.parent().find('.grade-select').val())) {
      sum += parseFloat($this.val() || 0) * parseFloat($this.parent().find('.grade-select').val() || 0);
      gradeTotal += parseFloat($this.val() || 0)
    }
  });
  return (sum / gradeTotal).toFixed(2);
}

$(".btn").on("click", function() {

  $('html, body').animate({
    scrollTop: $(document).height()
  }, 'slow');
  return false;
});

body {
  background-color: #A00000;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.outer-box {
  border: 3px solid black;
  height: true;
  width: 75%;
  padding: 10px;
  margin: 10px auto 10px auto;
  border-radius: 10px;
  background-color: white;
}
.block {
  margin: 5px;
}
.class {
  border: 1px solid gray;
  border-radius: 5px;
  width: 150px;
  height: 35px;
  margin: 10px;
  padding: 5px;
}
.credits {
  border: 1px solid gray;
  border-radius: 5px;
  width: 100px;
  height: 35px;
  margin: 10px;
  padding: 5px;
}
.grade-select {
  border: 1px solid gray;
  border-radius: 5px;
  width: 100px;
  height: 35px;
  margin: 10px;
  padding: 5px;
}
.btn {
  border: 2px solid black;
  border-radius: 5px;
  width: 150px;
  height: 35px;
  margin: 10px;
  padding: 5px;
  font-weight: bold;
  text-align: center;
}
.result {
  border: 2px solid black;
  border-radius: 5px;
  width: 200px;
  height: 100px;
  margin: 20px auto 20px auto;
  padding: 5px;
  font-weight: bold;
  text-align: center;
}
#gpa {
  font-size: 4rem;
  color: black;
  font-weight: bold;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class='outer-box'>
  <div class='inner-box'>
    <form class='block'>
      <input type="text" class='class' placeholder="Class">
      </br>
      <select class='credits'>
        <option value="">Credits</option>
        <option value="0.5">Half Year</option>
        <option value="1">Full Year</option>
      </select>
      </br>
      <select class='grade-select'>
        <option value="">Grade</option>
        <option value="4.6">A+</option>
        <option value="4.0">A</option>
        <option value="3.6">B+</option>
        <option value="3.0">B</option>
        <option value="2.6">C+</option>
        <option value="2.0">C</option>
        <option value="1.0">D</option>
        <option value="0.0">F</option>
      </select>
    </form>
  </div>
  <div class='btn btn-default'>Add Class</div>
  <div class='result'>
    <h3 id="gpa">GPA</h3>
  </div>
</div>

Answer 1

change the calling of calulate funtionality from drop down change event to button on click

var $oBox = $('.outer-box');
var $gpa = $('#gpa');
var $result = $('.result').hide();

$('.btn').click(function() {
  $('.block').last().clone().children().val("").parent().appendTo($('.inner-box'));
});

$oBox.on('keyup', '.credits', function() {
  $gpa.text(getTotal());
});

$oBox.on("change", ".grade-select", function() {
 
});

function getTotal() {
  var gradeTotal = 0;
  var sum = 0;
  $(".credits").each(function() {
    var $this = $(this);
    if (!isNaN($this.val()) && !isNaN($this.parent().find('.grade-select').val())) {
      sum += parseFloat($this.val() || 0) * parseFloat($this.parent().find('.grade-select').val() || 0);
      gradeTotal += parseFloat($this.val() || 0)
    }
  });
  return (sum / gradeTotal).toFixed(2);
}

$("#Calculate").on("click", function() {
 $gpa.text(getTotal());
  $result.is(":hidden") && $result.show();
  $('html, body').animate({
    scrollTop: $(document).height()
  }, 'slow');
  return false;
});

body {
  background-color: #A00000;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.outer-box {
  border: 3px solid black;
  height: true;
  width: 75%;
  padding: 10px;
  margin: 10px auto 10px auto;
  border-radius: 10px;
  background-color: white;
}
.block {
  margin: 5px;
}
.class {
  border: 1px solid gray;
  border-radius: 5px;
  width: 150px;
  height: 35px;
  margin: 10px;
  padding: 5px;
}
.credits {
  border: 1px solid gray;
  border-radius: 5px;
  width: 100px;
  height: 35px;
  margin: 10px;
  padding: 5px;
}
.grade-select {
  border: 1px solid gray;
  border-radius: 5px;
  width: 100px;
  height: 35px;
  margin: 10px;
  padding: 5px;
}
.btn {
  border: 2px solid black;
  border-radius: 5px;
  width: 150px;
  height: 35px;
  margin: 10px;
  padding: 5px;
  font-weight: bold;
  text-align: center;
}
.result {
  border: 2px solid black;
  border-radius: 5px;
  width: 200px;
  height: 100px;
  margin: 20px auto 20px auto;
  padding: 5px;
  font-weight: bold;
  text-align: center;
}
#gpa {
  font-size: 4rem;
  color: black;
  font-weight: bold;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class='outer-box'>
  <div class='inner-box'>
    <form class='block'>
      <input type="text" class='class' placeholder="Class">
      </br>
      <select class='credits'>
        <option value="">Credits</option>
        <option value="0.5">Half Year</option>
        <option value="1">Full Year</option>
      </select>
      </br>
      <select class='grade-select'>
        <option value="">Grade</option>
        <option value="4.6">A+</option>
        <option value="4.0">A</option>
        <option value="3.6">B+</option>
        <option value="3.0">B</option>
        <option value="2.6">C+</option>
        <option value="2.0">C</option>
        <option value="1.0">D</option>
        <option value="0.0">F</option>
      </select>
    </form>
  </div>
  <div class='btn btn-default'>Add Class</div>
 <button id=Calculate class='btn btn-default' >Calculate</button>
  <div class='result'>
    <h3 id="gpa">GPA</h3>
  </div>
</div>

Answer 2

You are calling your getTotal function in listeners for keyup and change. Hence it is being calculated immediately. If you want it to happen on click of some button, assign a listener to the click of button and call getTotal there.

Something like:

$("#calculate").click(function(){
 // code for getting values from input box using .val()
 //then call getTotal();
});

Hope it helps, let us know if you still are unable to achieve it.