Is it possible to do Ubmit without refreshing, and without jQuery?

Question

My question is this::

• It is possible to do submit of a form, without having to go to the action of that form?

I mean, I click submit, I am on the same page but the form is validated, without refresh.

How can I do that?

Answer 1

To submit the form without refreshing you have to use AJAX and stop the event submit.

Stop the event submit:

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

Merge the data from form

To send via ajax you need to know the url you want to send to. If it’s the same as the form can do

var url = form.action;

If you do not join this string. Then join the data from form:

var formData = new FormData(form);

and everything together with AJAX could be like this:

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

---

Example: http://jsfiddle.net/t65u21xk/

Reading on the MDN: (link)

Answer 2

This example is pure javascript, the transaction is being performed through the API Xmlhttprequest and not by action conventional... I mean you wouldn’t even need the tag form with his attributes.

The form:

The issue of onsubmit="return false;", is due to the fact that in the absence of the same, the user will be able to submit the form, typing ENTER or in the case of any 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>

The Ajax:

In this code I am putting the return, to exemplify that the page will not be reloaded, as in your case it is only the sending and not the recovery there you change. However as Ajax is widely used for both shipping and recovery, I’ve already left it that way. For example, the moment a new user goes to register, you can check if the name already exists and ask him to put another one without reloading the page.

In summary Ajax serves both to send and to recover data... Or the 2 as in this case of example...

(
    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 !");
                }
            }
        }
    }
)();

And the validar.php, where you will receive the data... and put your rules.

<?php
$name = $_GET["entrada"];
echo $name; 
if(empty($_GET["entrada"]))
{
    $name = "Não Digitou !";
    echo $name; 
}
?>

I hope I’ve helped... Anything will comment...