Get PHP variable and display in input

4

Good afternoon, everyone. I want to get the value of the cpf variable, after it is treated, and display it inside an input.

practicando.php

    <fieldset style="width:50%; margin: 0px auto; ">
        <legend>Colocando PONTO no CPF</legend>
        <form method="POST" action="validaPraticando.php">
            <label for="cpf">CPF</label>
            <input type="number" name="cpf" placeholder="Sem pontos e traço" required />
            <input type="submit" value="ENVIAR" name="button"/><br/><br/>
            <input name='recebe' value="QUERO_EXIBI-LA_AQUI" readonly style='width:100%;'/>
        </form>
    </fieldset>

validaPraticando.php

<?php
$cpf = $_POST['cpf'];
$campoRecebe = $_POST['recebe'];

if(strlen($cpf) == 11){
    $pegaCpf = substr($cpf,0,3).'.'.substr($cpf,3,3).'.'.substr($cpf,6,3).'-'.substr($cpf,9,2);
    echo $pegaCpf;
}else{
    echo "CPF inválido";
}
  ?>
    
asked by anonymous 06.09.2017 / 19:17

2 answers

3

This is a very simple thing to do, using asynchronous requests (ajax), well come on ..

Ajax is the use of the XMLHttpRequest object to communicate with server-side scripts. What makes ajax a great tool, is its asynchronous requests, which means that it can do all of this without the need to refresh the page.

This is true of what you want, the form will be sent, and the value of cpf will appear in input after its validation. This without updating the page, not to lose data and etc.

You can read more about ajax here

To use ajax , it is very common for people to use a javascript library called jquery . It is a library that we as web developers have an obligation to know, it makes our life much easier.

You can read more about jquery here .

Well let's go to the code!

  

NOTE: Do not forget to import jquery at the bottom of the page!

O Html

<fieldset style="width:50%; margin: 0px auto; ">
        <legend>Colocando PONTO no CPF</legend>
        <form id="form">
            <label for="cpf">CPF</label>
            <input type="number" name="cpf" placeholder="Sem pontos e traço" required />
            <input type="submit" value="ENVIAR" name="button"/><br/><br/>
            <input name='recebe' id="recebe" value="QUERO_EXIBI-LA_AQUI" readonly style='width:100%;'/>
        </form>
    </fieldset>

There is no need to set attrs to action and method to tag form , since we will use ajax . If you look, I put a id form and also input that will receive the formatted cpf, this was done so that we can find the input correct when putting the value with jquery

JavaScript

Let's start with the function ready of jquery , it says the following: "After the document (page) is loaded, execute this function ..

Syntax

$(document).ready(function(){
  // tudo que estiver aqui poderá ser executado, após o documento ser carregado
});

Let's continue ..

$(document).ready(function(){
  // tudo que estiver aqui poderá ser executado, após o documento ser carregado

  $("#form").on("submit", function(e){
    // está função diz, que quando esse formulario for enviado, tudo oque estiver aqui será executado.
    e.preventDefault(); // está função é usada pro form não ir para outra pagina, pois o evento padrão de um formulario é ir para outra pagina.
    var data = $("#form").serialize(); // a function serialize serve para pegar todos os valores que foram colocados nos inputs do form
    $.ajax({
      // está é a função ajax, do jquery, ela será usada para fazer a requisição assícrona.
      url: "validaPraticando.php", // aqui vai a url da requisição, nela é colocado o valor do atributo action da tag form
      data:  data, // aqui vai os dados para o servidor, geralmente é os inputs do form
      method: "POST", // aqui vai o método da requisição, acho que você já sabe sobre o get e post !
      dataType: "json", // aqui será o tipo de resposta que vamos receber, será no formato json, um formato simples e mais usado.
      success: function(data){
        // essa é a function success, ela ira ser executada se a requisição for feita com sucesso
        $("#retorno").val(data); // aqui estamos setando o valor retornado do php, no input
         // a variavel data, veio do parametro da function, e será a resposta do php.
      },
      error: function(){
        // essa é funcion error, ela será executada caso ocorrer algum erro na requisição
        alert("erro na requisição");
      }
    });
  });

});

Finally, php .. It will be exactly as it is, what will change is the way you will return cpf.

<?php
$cpf = $_POST['cpf'];

if(strlen($cpf) == 11){
    $pegaCpf = substr($cpf,0,3).'.'.substr($cpf,3,3).'.'.substr($cpf,6,3).'-'.substr($cpf,9,2);
    echo json_encode($pegaCpf);
}else{
    echo json_encode("CPF Invalido");
}
  ?>

To return responses in json format (it's the format we set in the ajax request) it's common to use the function json_encode(data) .

I hope I have helped! At first it may seem very confusing for these things. jquery , ajax , json , and so on ... but you'll find it very simple and easy to learn.

    
06.09.2017 / 20:01
2

The answer above is very good and will work perfectly. If your idea is something simpler, because from what I understand you are starting your studies, you can put all the data in a single page

practicando.php:

<?php

        if (isset($_POST['cpf'])) {
            $cpf = $_POST['cpf'];

            if(strlen($cpf) == 11){
                $pegaCpf = substr($cpf,0,3).'.'.substr($cpf,3,3).'.'.substr($cpf,6,3).'-'.substr($cpf,9,2);

            }else{
                echo "CPF inválido";
            }
        }

  ?>


<fieldset style="width:50%; margin: 0px auto; ">
    <legend>Colocando PONTO no CPF</legend>
    <form method="POST" action="praticando.php">
        <label for="cpf">CPF</label>
        <input type="number" name="cpf" placeholder="Sem pontos e traço" required />
        <input type="submit" value="ENVIAR" name="button"/><br/><br/>
          <?php
            if (isset($_POST['cpf'])) {
            echo"<input name='recebe' value='" + $pegaCpf + "' readonly style='width:100%;'/>"
            }
            else{
                echo"<input name='recebe' value='CPF inválido' readonly style='width:100%;'/>"
            }
          ?>
    </form>
</fieldset>

But remembering that this only works for your studies.

    
06.09.2017 / 20:11