A minha pergunta é a seguinte:
- É possível fazer
submit
de um formulário, sem ter que ir para oaction
desse formulário?
Ou seja, eu clico submit
, fico na mesma página mas o formulário é validado, sem dar refresh.
Como posso fazer isso?
Para enviar o formulário sem fazer refresh tens de usar AJAX e parar o evento submit
.
submit
:var form = document.querySelector('form');
form.addEventListener('submit', function(e){
e.preventDefault(); // <--- isto pára o envio da form
form
Para enviar via ajax tens de saber o url para o qual queres enviar. Se for o mesmo do action do form
podes fazer
var url = form.action;
Se não junta essa string. Depois juntas os dados da form
:
var formData = new FormData(form);
e tudo junto, com o AJAX poderia ser assim:
var form = document.querySelector('form');
form.addEventListener('submit', function(e) {
e.preventDefault(); // <--- isto pára o envio da form
var url = this.action; // <--- o url que processa a form
var formData = new FormData(this); // <--- os dados da form
var ajax = new XMLHttpRequest();
ajax.open("POST", url, true);
ajax.onload = function() {
if (ajax.status == 200) {
var res = JSON.parse(ajax.responseText); // a resposta do servidor
// fazer algo com a resposta do servidor
alert(res);
} else {
alert('Algo falhou...');
}
};
ajax.send(formData);
});
Este exemplo é puro javascript, a transação está sendo realizada através da API XMLHttpRequest e não pelo action
convencional... Ou seja você nem precisaria da tag form
com seus atributos.
O formulário:
A questão do onsubmit="return false;"
, é devido ao fato de que na ausência do mesmo, o usuário poderá submeter o form
, teclando ENTER
ou no caso de algum type="submit"
...
<form onsubmit="return false;">
<label>Entrada:</label><input type="text" id="ajaxTextbox" />
<input type="button" id="ajaxButton" value="Enviar"/><br/>
<div>Dados Enviados :<div id="envio" style="display: inline-block"></div></div>
</form>
O Ajax:
Nesse código eu estou colocando o retorno, para exemplificar que a página não será recarregada, como no seu caso é só o envio e não a recuperação aí você altera. Entretanto como o Ajax é muito usado tanto para envio como para recuperação, já deixei desse jeito. Por exemplo, no momento em que um novo usuário vá realizar o cadastro, pode verificar se o nome já existe e pedir para ele colocar outro sem recarregar a página.
Em resumo Ajax serve tanto para enviar como para recuperar dados...Ou os 2 como nesse caso do exemplo...
(
function()
{
var httpRequest;
document.getElementById("ajaxButton").onclick = function()
{
var entrada = document.getElementById("ajaxTextbox").value;
requisita("validar.php", entrada);
};
function requisita(url, entrada)
{
httpRequest = new XMLHttpRequest();
if(!httpRequest)
{
alert("Algo está errado verifique a compatibilidade do Navegador !");
return false;
}
httpRequest.onreadystatechange = mostraconteudo;
httpRequest.open("GET", "validar.php?entrada=" + entrada, true);
httpRequest.send();
}
function mostraconteudo()
{
if(httpRequest.readyState === XMLHttpRequest.DONE)
{
if(httpRequest.status === 200)
{
document.getElementById("envio").innerHTML = httpRequest.responseText;
}
else
{
alert("Algum problema !");
}
}
}
}
)();
E o validar.php
, onde você vai receber os dados... E colocar suas regras.
<?php
$name = $_GET["entrada"];
echo $name;
if(empty($_GET["entrada"]))
{
$name = "Não Digitou !";
echo $name;
}
?>
Espero ter ajudado...Qualquer coisa vai comentando...
header('Location: index.php');
ou jogar o conteúdo de validar com um include e no action se deixa em branco ou aponta para si ?