How do i echo my results in a bootstrap modal without the page reloading automatically

Question

I want to echo my results in the bootstrap modal class without the page reloading or refreshing but each time i click the submit button, it reloads and it escapes the modal class... I am using foreach loop and i guess each time the loop counts after the first time, it clears everything...

<?php 
$count_main_odd = 0;
$main_odds_error = $main_odds = "";
if(isset($_POST["submit"])){
    if(empty($_POST["total_odds"])){
    echo $main_odds_error = "<div class='error-msg'>You have not selected any odds</div>";
    }else{
    $main_odds      = $_POST["total_odds"];
    $total = 1;
    if(!empty($main_odds)){

        echo "You have selected the following games ";
        foreach ($main_odds as $final_odd){
            echo $final_odd;
                $total   = $total * $final_odd;
                $total1  = $final_odd . ", ";
        }
    }
    $count_main_odd = count($main_odds);
    echo number_format($total, 2);  
}
}
// calculating selected games
?>

This is the submit button from the page

<input type="submit" name="submit" value="Calculate Selected odds" class="btn btn-outline-success btn-sm card-link" data-toggle="modal" data-target="#exampleModalOdds"/>

This is the modal class, i had to remove the code because it looks untidy

<!-- Modal -->
<div class="modal fade" id="exampleModalOdds" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

How can i not make the page reload after clicking the submit button...

This is the input type

<input type="checkbox" name="total_odds[]"  value="<?= $game->odds; ?>-<?= $game->home; ?>-<?= $game->away; ?>"/>