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.