How to prevent refresh after Ubmit on the same page?

Question

I have a basic HTML form that sends the data through the POST method to the same page, that is, I do Submit to the page itself.
As this page has Javascript actions, after this Ubmit the page reset, happening a refresh, resetting checkbox for example and I would like the choices that the person performed to be maintained.
It is possible to prevent this refresh after clicking the Submit button of the form?

Answer 1

The logical and easiest way would be to perform this post request with Ajax! What would keep the selection of fields as the user chose.

But if you are submitting to the same page, you can access the values through the variable $_POST php.

test example.php:

 <form action='teste.php' method='POST'>
   <input type='text' name='nome' value="<?= (!empty($_POST['nome']))? 
   $_POST['nome'] : '' ?>">
 </form>

That is if there is value in the variable NAME sent by POST add in the value attribute of the text field called name otherwise add empty.

Additional content : PHP POST

Answer 2

No, it is not possible to prevent this refresh by making the form Submit to the page itself.

You must perform this request via ajax - stored in the Database but did not return anything to html.

So I could input the data and keep the data.

Alternative

If your goal is to keep the data, you can check whether $_POST contains data (after Submit will contain it). If it does, you can write this data into the values of the form’s insputs. This way I would do the refresh however I would fill the fields with the values entered before Submit and that were sent.

Answer 3

One: - Stop Ubmit. Second: - Send Submit via ajax. Third: Depending on the ajax answer, quit, show msg, etc.

EXAMPLE: To prevent Submit: Using jQuery:

jQuery(function($){
  $("#formulario_tal").on("submit",function(e){
    e.preventDefault(); // impedir o evento submit

    // aqui entra o codigo ajax. pesquisar no google "jquery ajax" para mais detalhes

  });
});

A practical example: https://codepen.io/fixonweb/pen/jOOPwPL

Answer 4

Just insert the Return false in the Submit code.

ex:

<input type="submit" onclick="calcular();return false" />