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>