Home › Forums › JavaScript › How to send a form without refreshing the page
- This topic is empty.
-
AuthorPosts
-
April 22, 2016 at 9:16 am #240820gtw73755Participant
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 >= 3) && (imc <=29)){ corpo.innerHTML = '<img src="3.png" />'; } else{ corpo.innerHTML = '<img src="4.png" />'; } }
}
`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
injquery
, the function$.ajax();
and inside of oneself I use tags likeurl
,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!
April 22, 2016 at 9:45 am #240822gtw73755ParticipantI found the erro guys! It’s is a conflict in some files jquery. Topic solved – “Locked”.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.