<form action="#" class="calculator" onsubmit="return false;">
  <select id="goods">
    <option value="Item 1" data-price="500">Item 1</option>
    <option value="Item 2" data-price="1000">Item 2</option>
    <option value="Item 3" data-price="1500">Item 3</option>
   </select>
  <label for="inpt1">Value 1</label>
  <input type="text" id="inpt1" autocomplete="off">
  <label for="inpt1">Value 2</label>
  <input type="text" id="inpt2" autocomplete="off">
  <input type="submit" value="Submit">
</form>

<div class="calculator-total">0</div>
body {
  margin: 40px;
}

* {
  box-sizing: border-box;
}

.calculator {
  display: block;
  max-width: 500px;
}

.calculator label {
  display: block;
  font-family: sans-serif;
  padding: 5px 0;
}

.calculator select {
  width: 100%;
  appearance: none;
  padding: 10px 5px;
  margin-bottom: 10px;
}

.calculator input {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px 5px;
  font-size: 16px;
}

/* Fix bug for Safari */
.calculator input[type="submit"] {
  display: none;
}

.calculator-total {
  font-size: 22px;
  font-family: sans-serif;
  background-color: lightgreen;
  max-width: 500px;
  padding: 10px 5px;
  color: #FFF;
}

.calculator-total:before {
  content: 'Total: ';
}

.calculator-total:after {
  content: ' $';
}
$(document).ready(function() {
  $("#goods, #inpt1, #inpt2").on("change", function(e) {
    var item0 = $('#goods option:selected').attr('data-price');
    var item1 = $("#inpt1").val();
    var item2 = $("#inpt2").val();
    var total = Number(item0) + Number(item1) + Number(item2);

    totalnumber = $(".calculator-total");
    var countTo = total;

    if (isNaN(total)) {
      alert("Need to input only numbers");
      $(".calculator-total").text("0");
    } else {
      $({ countNum: totalnumber.text() }).animate(
        {
          countNum: countTo
        },

        {
          duration: 1000,
          easing: "linear",
          step: function() {
            totalnumber.text(Math.floor(this.countNum));
          },
          complete: function() {
            totalnumber.text((this.countNum).toLocaleString('ru'));
            //alert('finished');
          }
        }
      );
    };
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js