How can I have this existing code update dynamically?

Ive included the php file Ive used to calculate my equation. I need to be able to display the answers without a page reload. Im new to the concept of Ajax and a novice in JS. Any help would be appreciated!

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ProNexis</title>
<link rel="stylesheet" href="assets/demo.css">
<link rel="stylesheet" href="assets/form-basic.css">
<script   src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">      </script>
 </head>
<div class="main-content">
    <form id="myForm" name="myForm" class="form-basic" action="equate.php"   method="POST">

        <div class="form-title-row">
            <h1>How much can ProNexis earn for you?</h1>
        </div>

        <div class="form-row">
            <label>
                <span>Locations</span>
                <input type="text" id="branches" name="branches" placeholder="#">
            </label>
        </div>

        <div class="form-row">
            <label>
                <span>Close Rate</span>
                <input type="text" id="closerate" name="closerate" placeholder="%">
            </label>
        </div>

        <div class="form-row">
            <label>
                <span>Average ticket size</span>
                <input type="text" id="ticketsize" name="ticketsize" placeholder="$">
            </label>
        </div>

        <div class="form-row">
            <button name="calculate" class="btn btn-primary">Calculate!</button>
        </div>

    </form>       
 </div>
</body>
</html>

<?php


$branches = $_POST['branches'];
$closerate = $_POST['closerate'];
$ticketsize = $_POST['ticketsize'];
$leadsperhour = 8;

$revenue = ($branches * $leadsperhour) * $closerate * $ticketsize;
$leadsmissed = $branches * $leadsperhour;

$panswerrate = .92 * $leadsmissed;

$pcloserate = $closerate * $leadsmissed;
$prevenue = $pcloserate * $ticketsize;


echo "Your company, on average, missed " . $leadsmissed . " leads in the   past hour. ";

echo "With Pronexis, you would have talked to " . $panswerrate . " of those leads, closed " . $pcloserate . " of them, and received $" . $prevenue . " more revenue!";


?>
<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ProNexis</title>
<link rel="stylesheet" href="assets/demo.css">
<link rel="stylesheet" href="assets/form-basic.css">

</head>
<body>
</body>
</html>

Solution

Your HTML script should be like below. Dont forget to include your jquery library.

calculate.html

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<title>Validation Test</title>
<head>
<script>
    $(document).ready(function(){
        $(document).on('click', '.btn.btn-primary', function(e){
            e.preventDefault();
            var branches = $('#branches').val();
            var closerate = $('#closerate').val();
            var ticketsize = $('#ticketsize').val();
            $.ajax({
                url: 'calculate.php',
                method : 'POST',
                datatType: 'JSON',
                data: {
                    branches : branches,
                    closerate : closerate,
                    ticketsize : ticketsize,
                },
                success: function(result){
                    obj = JSON.parse(result);
                    $('#result_1').text(obj.string1);
                    $('#result_2').text(obj.string2);
                }
            });
        })
    })
</script>
</head>
<body>
<div class="main-content">
    <form id="myForm" name="myForm" class="form-basic" action="calculate.php"   method="POST">
        <div class="form-title-row">
            <h1>How much can ProNexis earn for you?</h1>
        </div>

        <div class="form-row">
            <label>
                <span>Locations</span>
                <input type="text" id="branches" name="branches" placeholder="#">
            </label>
        </div>

        <div class="form-row">
            <label>
                <span>Close Rate</span>
                <input type="text" id="closerate" name="closerate" placeholder="%">
            </label>
        </div>

        <div class="form-row">
            <label>
                <span>Average ticket size</span>
                <input type="text" id="ticketsize" name="ticketsize" placeholder="$">
            </label>
        </div>

        <div class="form-row">
            <button name="calculate" class="btn btn-primary">Calculate!</button>
        </div>

    </form> 

    <div id="result">
        <p id="result_1"></p>
        <p id="result_2"></p>
    </div>      
 </div>
</body>
</html>

Your php script should be like below Calculate.php:

<?php
    $branches  = $_POST['branches'];
    $closerate  = $_POST['closerate'];
    $ticketsize  = $_POST['ticketsize'];
    $leadsperhour = 8;


    $revenue = ($branches * $leadsperhour) * $closerate * $ticketsize;
    $leadsmissed = $branches * $leadsperhour;

    $panswerrate = .92 * $leadsmissed;

    $pcloserate = $closerate * $leadsmissed;
    $prevenue = $pcloserate * $ticketsize;


    $result['string1'] = "Your company, on average, missed " . $leadsmissed . " leads in the   past hour. ";

    $result['string2'] =  "With Pronexis, you would have talked to " . $panswerrate . " of those leads, closed " . $pcloserate . " of them, and received $" . $prevenue . " more revenue!";




    echo json_encode($result);
?>