How to send a form without refreshing the page

1 posts, 0 answers
  1. Luiz
    Luiz avatar
    1 posts
    Member since:
    Apr 2016

    Posted 22 Apr Link to this post

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


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

         <input type="email" name="email"  id="email" required>

         <input type="number" name="altura" id="altura" required>
        <input type="number" name="peso" id="peso" required>

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

        <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 class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>


        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">';
                 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.

    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?


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

    I want send the form without refresh the page! 
Back to Top