3

A minha pergunta é a seguinte:

  • É possível fazer submit de um formulário, sem ter que ir para o action 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?

10
  • Apontar o action para a mesma página ?
    – MagicHat
    Commented 4/11/2016 às 19:28
  • Não, por exemplo, eu estou na página index.php, e o action="validar.php", eu clico submit e continuo na index.php sem ter que ir para a validar.php
    – Gonçalo
    Commented 4/11/2016 às 19:29
  • 1
    Sim, é possível. Você deve utilizar AJAX.
    – LuKs Sys
    Commented 4/11/2016 às 19:34
  • E que tal ir para validar e lá colocar um 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 ?
    – MagicHat
    Commented 4/11/2016 às 19:35
  • Poderiam-me dar um exemplo?
    – Gonçalo
    Commented 4/11/2016 às 19:35

2 Respostas 2

5

Para enviar o formulário sem fazer refresh tens de usar AJAX e parar o evento submit.

Parar o evento submit:

var form = document.querySelector('form');
form.addEventListener('submit', function(e){
    e.preventDefault(); // <--- isto pára o envio da form

Juntar os dados da 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:

Enviar via ajax:

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);
});

Exemplo: http://jsfiddle.net/t65u21xk/

Leitura na MDN: (link)

2

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

5
  • Vou editar a minha pergunta.
    – Gonçalo
    Commented 4/11/2016 às 20:11
  • Pronto a minha duvida, agora ta melhor explicada.
    – Gonçalo
    Commented 4/11/2016 às 20:12
  • Ah sem dar refresh....
    – MagicHat
    Commented 4/11/2016 às 20:26
  • Bom é isso aí, embora fora marcada como duplicada sua questão, e a questão solicita Javascript e não Jquery, talvez agora que está editada e a dúvida está clara, vou solicitar que seja reaberta se assim os moderadores acharem proveitoso @bigown
    – MagicHat
    Commented 5/11/2016 às 9:36
  • A edição a que vc se refere não mudou a pergunta, só o termo usado. Agora eu editei para que fique realmente diferente, o "sem jQuery" no título talvez ajude ;) Já tinha pensado nisso ontem, quando deixei este comentário para o @Randrade: pt.stackoverflow.com/questions/163498/…
    – Largato
    Commented 5/11/2016 às 13:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .