Zkk Zkk - 2 years ago 94
HTML Question

How to send a form without refreshing the page

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.

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
, the function
and inside of oneself I use tags like
and so on. I'm a beginner in Ajax and I'm lost on how to do this.

Why the function
not works when I put in wordpress template?? It's possible make it work in wordpress template?


How I can use the
to solve this problem??

I want send the form without refresh the page!

Answer Source

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 $


   //your code


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() {
      $('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) {

         }).error(function() {
             console.log('XHR error')

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


How do I return the response from an asynchronous call?

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download