How to send a form without refreshing the page

Question

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.
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!

Answer 1

Zkk, You actually don't need to submit anything...
2 quick solutions here:

1. Change your input type to button; or
2. Add the following to your javascript tag

:

var meuFormulario = document.getElementById("myForm");
meuFormulatio.onsubmit = function(event){
    event.preventDefault();
}

This will cancel your submit action and only run your javascript function to calculate the Índice de Massa Corporea (IMC) you need ;)

Answer 2

Take a look in your javsacript console for errors f12 in your web browser

You'll likely see undefined variable "$" or similar error message.

To avoid conflict with other javascript libraries WordPress invokes jQuery noConflict by default.

The easiest solution is to wrap your code inside an iife passing in the jQuery object and redefining it as $

(function($){

   console.log($);
   //your code

})(jQuery)

Further information

Wordpress has a special url for handling ajax requests and expects an action field for which function at the backend should be called:

(function($){
    $(function() {
      $('form#myForm').on('submit', function(e) {
          var data = $(this).serialize();
          data += '&action=my_action'
          $.post('<?php echo admin_url('admin-ajax.php'); ?>', data, function (response) {
            console.log(response)            

         }).error(function() {
             console.log('XHR error')
          });
          e.preventDefault();
      });
    });
})(jQuery)

You would then add a handler function into your functions.php file:

add_action( 'wp_ajax_my_action', 'my_action_callback' );
add_action( 'wp_ajax_nopriv_my_action', 'my_action_callback' );

function my_action_callback() {
    global $wpdb; // this is how you get access to the database

    $whatever = intval( $_POST['whatever'] );

    $whatever += 10;

        echo $whatever;

    wp_die(); // this is required to terminate immediately and return a proper response
}

Further reading

https://codex.wordpress.org/AJAX_in_Plugins

How do I return the response from an asynchronous call?

Answer 3

When posting data in wordpress you should handle the request in the functions.php file in your wordpress theme.

And you shouldn't use the dollar sign when working with wordpress replace it with jQuery which would make the code you posted like this:

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

Functions.php

add_action( 'wp_ajax_[action]', 'my_function' );

function my_function() {
    var_dump($_POST);
}

The [action] placeholder needs to be replaced with the action matched from your ajax call, say for example 'my_action'

var data = {
    action: 'my_action',
    form: jQuery(this).serialize()
}

jQuery(function() {
    jQuery('form#myForm').on('submit', function(e) {
        $.post('', data, function(data) {
          }).error(function() {
        });
        e.preventDefault();
    });
});