How to clear inputs after performing an ajax request?

Question

I have an AJAX function that while loading the database information to feed the inputs is written "Loading...". If you do not find any information it continues with this loading written in inputs until I refresh the page or do another search. I made a if at the end to clean the input but I’m not getting it, someone has some idea?

Follows code:

//-----------------------------------------------------
//Funcao: functionjson
//Autor: Rafael Assmann <[email protected]>
//Sinopse: Json para capturar código do produto e reali
//zar a busca no banco de dados e preencher os demais campos deste produto
//Parametro:
//   codProduto[] : código do produto digitado para pesquisa
//Retorno: nomeProduto[], qtProduto[] e valorProduto[] : informações do BD
//-----------------------------------------------------
$(document).ready(function(){
  $(document).delegate(".codigoProduto", "blur", function() {
         var parent = $(this).parent();
         var nomeProduto = parent.children("input:eq(1)");
         var qtProduto = parent.children("input:eq(2)");
         var valorProduto = parent.children("input:eq(3)");

             $( nomeProduto ).val('Carregando...');
             $( qtProduto ).val('Carregando...');
             $( valorProduto ).val('Carregando...');

             $.getJSON(
                 'function.php',
                 { codProduto: $( this ).val() },
                 function( json ) 
                 {
                      $( nomeProduto ).val( json.nomeProduto );
                      $( qtProduto ).val("1");
                      $( valorProduto ).val( json.valorProduto);
                     }
             );
                      if(json.nomeProduto == null)
                      $( nomeProduto ).val( " " ); // caso não encontre o produto no banco não esta caindo nesta condição para zerar o campo.   
     });
});

The database query file function.php:

<?php
    /**
     * função que devolve em formato JSON os dados do cliente
     */
    function retorna( $nome, $db )
    {
        $sql = "SELECT `identProduto`, `codProduto`, `qtProduto`, `nomeProduto`, `valorProduto` FROM `t_estoque` WHERE `codProduto` = '{$nome}' ";

             $query = $db->query( $sql );

             $arr = Array();
             if( $query->num_rows )
             {
                 while( $dados = $query->fetch_object() )
                 {
                     $arr['nomeProduto'] = $dados->nomeProduto;
                     $arr['qtProduto'] = $dados->qtProduto;
                     $arr['valorProduto'] = $dados->valorProduto;
                 }
             }
             if($arr['qtProduto'] == 0){
                $arr['nomeProduto'] = 'sem estoque';
                $arr['qtProduto'] = '0';
             }
             return json_encode( $arr );
        }

    /* só se for enviado o parâmetro, que devolve os dados */
    if( isset($_GET['codProduto']) )
    {
        $db = new mysqli('localhost', 'root', '', 'buchm613_buchmann');
        echo retorna( filter ( $_GET['codProduto'] ), $db );
    }

    function filter( $var ){
        return $var;//a implementação desta, fica a cargo do leitor
    }
?>

Answer 1

Your problem is where you put the condition. You have put out the request, and as the JS will run asynchronously, your condition runs before the return of your server.

To perform at the right time, you need to add the condition within the callback function. What would your call look like:

$.getJSON(
    'function.php',
    { codProduto: $( this ).val() },
    function( json ) 
    {
        $( nomeProduto ).val( json.nomeProduto );
        $( qtProduto ).val("1");
        $( valorProduto ).val( json.valorProduto);

        if(json.nomeProduto == null)
            $( nomeProduto ).val( "" );
    }
);

Answer 2

Try it this way

if(json.length < 1){
  $(nomeProduto).empty();
}

ou 

if(!json.nomeProduto){
  $(nomeProduto).empty();
}