Javascript message not appearing in input

Asked

Viewed 153 times

1

Good morning. I want to make the result of the variable Cpf is displayed in the input 'gets'.

practicing.php

<head>
    <meta charset="UTF-8"/>
    <script type="text/javascript" src="pratica.js"></script>
</head>
<body>
    <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" readonly style='width:100%;'/>
        </form>
    </fieldset>
</body>

validationPraticando.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");
}

js practice.

$(documento.ready(function(){
$("#form").on("submit",function(e){

    e.preventDefault();
    var data = $("#form").serialize();
    $.ajax({
        url: "validaPraticando.php",
        data: data,
        method: "POST",
        dataType: "json",
        success: function(data){
            $("#retorno").val(data);
        },
        error: function(){
            alert("erro na requisição");
        }
    });
  });
});
php javascript html

  • Check in the browser what happens when you call the page validatingPraticando.php, in the Success of an Alert(data); just to check if it is returning correctly.

  • 2

    Only by complementing what @Caiqueromero said, instead of Alert(data) put console.log(data) and press F12 to see the result on the console, because if it is an object or an array will not show the values using Alert.

  • There is no element with the id "return" in your html.

  • 1

    change $("#return"). val(date); for $("#receive"). val(date);

  • The browser is warning this error "Uncaught Syntaxerror: Missing ) after argument list". Refers to line 23 of the Javascript file. That line is the last one "});".

2 answers

0

Updating the answer here, if you want to use Cpf mask, use this example, along with my tip below and when typing, you will already do everything automatically:

Masks with jQuery: Phone, CPF and CNPJ

But if you just want to validate the amount of characters, just use one minlength="11" and maxlength='14' inside your input by staying:

<input type="number" name="cpf" minlength="11" `maxlength='14' placeholder="Sem pontos e traço" required />

Finally, if you want to see if Cpf is true, you can use a ready-made, easy-to-find feature on many sites like this:

How to validate client-side CPF with script?

or

http://www.devmedia.com.br/validar-cpf-com-javascript/23916

0

You are assigning the value to an element that does not exist retorno. Check that the page returns the desired information and correct the field where it will be assigned.

Change of 

success: function(data){
   $("#retorno").val(data);
},

To:

success: function(data){
       //console.log() ou alert() apenas para verificar o que retornou.
       console.log(data); 
       $("#recebe").val(data);
    },

  • I did this Caique Romero. Pressing F12 informs an error in the Javascript file, shows the message, "Uncaught Syntaxerror: Missing ) after argument list". Referring to line 23 of the Javascript file. This line is the last one that contains "});"

Browser other questions tagged php javascript html

You are not signed in. Login or sign up in order to post.