Get javascript values from calculation and insert them into mysql database

Question

i want to make calories calculator.the code below shows the result. and it is good. but i want the result in input field, so that i can submit the result of the calculation into mysql database. this calculation was automatically calculate. i want the calculation was not auto calculate and the result was in input field.

<?php
session_start();**strong text**
include 'dbconnection.php';
if(isset($_POST['submit'])){

$jantina = $_POST['jantina'];
$umur  = $_POST['umur'];
$berat = $_POST['berat'];
$tinggi = $_POST['tinggi'];
$totalCals = $_POST['totalCals'];
//yg bmr ni , nilai yang dah dikira auto

$query = "INSERT INTO kalori (jantina, umur, berat, tinggi, totalCals)"; 
$query .= "VALUES ('$jantina', '$umur', '$berat', '$tinggi', '$totalCals')";

$create_post_query = mysqli_query($connection, $query);


echo"<script language=javascript type=text/javascript> alert ('Anda berjaya 
daftar.')
</script>";


} 
?>
<form class="form" method="post" action="kalori1.php" autocomplete="off">
        <div class="form-group">
            <label for="gender">Jantina</label>
              <div class="input-group" data-toggle="buttons" >
                <label class="btn btn-default active"><input id="female" type="radio" name="jantina" onchange="calsPerDay()" checked="checked">Perempuan</label>
                <label class="btn btn-default"><input id="male" type="radio" name="jantina" onchange="calsPerDay()" >Lelaki</label>
              </div>
              </div>
            <div class="form-group">
                <label for="age">Umur</label>
                <div class="input-group" data-validate="number">
                    <input id="age" type="number" oninput="calsPerDay()" placeholder="tahun" name="umur" required>
                </div>
            </                <div class="form-group">
                <label>Berat</label>
                <div class="input-group" data-validate="number">
                    <input id="weight" type="number" oninput="calsPerDay()" placeholder="in kg" name="berat" required>
                </div>
            </div>
            <div class="form-group">
                <label>Tinggi</label>
                <div class="input-group" data-validate="number">
                    <input id="height" type="number" oninput="calsPerDay()" placeholder="in cm" name="tinggi" required>
                </div>
            </div>
           <br>**strong text**
                        <label><span id="totalCals" ></span></label><br>
                        <input  id="totalcals">
              <br>
                   <input name="submit" type="submit" id="submit" value="Submit" >
              </form>

  function calsPerDay() {
  function find(id) { return document.getElementById(id) }

  var age = find("age").value
  var height = find("height").value
  var weight = find("weight").value
  var result = 0
  if (find("male").checked) 
    result = 66.47 + (13.75 * weight) + (5.0 * height - (6.75 * age))
  else if (find("female").checked)
    result = 665.09 + (9.56 * weight) + (1.84 * height - (4.67 * age))
  find("totalCals").innerHTML = Math.round( result )
}
calsPerDay()