Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript How to send a form without refreshing the page

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #240820
    gtw73755
    Participant

    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>
    <div>
    <div>
    <div>
    <div>
    <p> ALL FIELDS </p>
    </div>
    </div>
    <div>
    <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” />’;
    }
    else{
    corpo.innerHTML = ‘<img src=”2.png” />’;
    }
    }

    else if(estilo == “SUP”){

        if((experiencia &gt;= 3) &amp;&amp; (imc &lt;=29)){
          corpo.innerHTML = '&lt;img src="3.png" /&gt;';
        } else{
          corpo.innerHTML = '&lt;img src="4.png" /&gt;';
        }                       
     }
    

    }
    `

    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!

    #240822
    gtw73755
    Participant

    I found the erro guys! It’s is a conflict in some files jquery. Topic solved – “Locked”.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.