How to send a form without refreshing the page

[Luiz]

I make a form in Wordpress Template that makes certain calculation and displays the result in a modal Bootstrap.

HTML:
 

     //FORM
    <form method="post" id="myForm">   
     <span>Name</span><br><input type="text" name="name" id="name" required>

     <span>Email</span><br>
     <input type="email" name="email"  id="email" required>

     <span>Altura</span><br>
     <input type="number" name="altura" id="altura" required>
       
    <span>Peso</span><br>
    <input type="number" name="peso" id="peso" required>
       <br><br>

    <button type="submit" id="enviar" onclick="calcularIMC();">Enviar</button>

     //MODAL
    <div class="modal fade" id="ajax-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
       <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <div id="corpo_modal">
                      <p> ALL FIELDS </p>
             </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
       </div>
      </div>
    </div>

JAVASCRIPT:

    function calcularIMC(){  
    var nome = document.getElementById("nome").value; 
    var email = document.getElementById("email").value; 
    var estilo = document.getElementById("estilo").value; 
    var experiencia = document.getElementById("experiencia").value; 
    var altura = document.getElementById("altura").value; 
    var peso = document.getElementById("peso").value;  
    var resultado = 5;
    
    var corpo = document.getElementById("corpo_modal");
    
    
    var imc = 0;
    if(altura >0 && peso >0){
      imc = peso / (altura * altura);
    }
    
    
     if(estilo == "Surf"){            
             if((imc<=25) && (resultado == 5)){          
              corpo.innerHTML = '<img src="1.png" style="width: 150px; height:150px">';
            }
          else{         
             corpo.innerHTML = '<img src="2.png" style="width: 150px; height:150px">';
              }
         } 
    
    
      else if(estilo == "SUP"){  
    
            if((experiencia >= 3) && (imc <=29)){
              corpo.innerHTML = '<img src="3.png" style="width: 150px; height:150px">';
            } else{
              corpo.innerHTML = '<img src="4.png" style="width: 150px; height:150px">';
            }                       
         }
    }

The problem is that when I send the form, it updates the page and does not display the modal.<br>
After some research, I found that to solve this problem I will need to use Ajax - jQuery.ajax.

I found this code:

    $(function() {
      $('form#myForm').on('submit', function(e) {
          $.post('', $(this).serialize(), function (data) {
              // This is executed when the call to mail.php was succesful.
              // 'data' contains the response from the request
          }).error(function() {
              // This is executed when the call to mail.php failed.
          });
          e.preventDefault();
      });
    });

When I create a form in a SEPARATE page without putting in wordpress template, it works. But when I put the code in wordpress template it updates the page after 3 seconds.

I also discovered that I can use a native function `ajax` in `jquery`, the function `$.ajax();` and inside of oneself I use tags like `url`, `type`, `data` and so on. I'm a beginner in Ajax and I'm lost on how to do this.

> Why the function `e.preventDefaul();` not works when I put in wordpress template?? It's possible make it work in wordpress template?

or

> How I can use the `$.ajax()` to solve this problem??

I want send the form without refresh the page!