How to send data via form to php file and return the result in an html field

Question

I wanted to send the data via form, which would be used in my php class, and with javascript capture this result and play in my html field, with on click of js. But I’m not succeeding with "action" because it requests another page, in case my .php. file and I don’t get the return in my html file. What’s the best way to solve this?

I have the following form:

<form  class="form" method="GET">
     CEP: <input type="text" name="cep" placeholder="Insira o cep" required/>
     <input class="submit" type="submit" value="Buscar"/>
</form>

And a field to receive data in php:

<article class="data">
     <!--Dados PHP via JS-->
</article>

In the file . js:

$(document).ready(function(){
     $(document).on('click', '.submit', function(){
          $.post('testephp.php', function(retorna){
          $(".data").html(retorna);
          });
     });
});

Php class:

Class Controller{
    public $cep;

    public function ConsultaViaCEP(){
        $cep = Controller::setFormCEP();
        $cep = preg_replace("/[^0-9]/", "", $cep);
        $url = file_get_contents("http://viacep.com.br/ws/$cep/json/");
        $json = json_decode($url, true);
        return $json;
    }
    [...getters and setters]

    echo Controller::getCEP()."<br>";
    echo Controller::getLogradouro()."<br>";
    echo Controller::getComplemento()."<br>";
    echo Controller::getBairro()."<br>";
    echo Controller::getLocalidade()."<br>";
    echo Controller::getUF()."<br>";
}   

Answer 1

If the question is as I understand it, you can use preventDefault to prevent the page from being submitted and run only on JS.

$(document).on('click', '.submit', function( e ){
     e.preventDefault();

     $.post('testephp.php', function(retorna){
          $(".data").html(retorna);
     });
});