Is it possible to submit without giving refresh, and without jQuery?

To send the form without refresh you must use AJAX and stop the submit event.

Stop event submit :

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

Add data from form

To send via ajax you need to know the url to which you want to send. If it's the same as% action you can do

var url = form.action;

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

var formData = new FormData(form);

And all together, with AJAX it might look 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: link

Reading in MDN: ( link )

This example is pure javascript, the transaction is being performed through the XMLHttpRequest API and not by the conventional% wrapper. .. That is you would not even need the action tag with your attributes.

The form:

The question of form is due to the fact that in the absence of it, the user can submit onsubmit="return false;" , typing form or in case of some ENTER ...

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

Ajax:

In this code I'm putting the return, to exemplify that the page will not be reloaded, as in your case it's just the sending and not the recovery there you change. However since Ajax is heavily used for both shipping and retrieval, 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 the user to add another one without reloading the page.

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

(
    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 type="submit" , 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 have helped ... Anything goes on commenting ...