How to add and search BD products with JSON in HTML dynamic fields?

Question

Personal I cannot get values from performing research with JSON and database after adding new dynamic product line with Javascript.

HTML form, the product is searched by code:

<form id="adicionarformProdutos" method"post" action"" enctype="multipart/form-data">
     <a href="#" id="adicionarProduto">Adicionar Faixa</a>      
    <fieldset class="fieldsetProduto">
        <legend>Produto 1</legend>
        <div class="produtos">
            <label for="codProduto1">Código:</label><input type="text" id="codProduto1" size="5" name="codProduto[1]" />
            <label for="nomeProduto1">Nome:</label> <input type="text" id="nomeProduto1" size="9" disabled name="nomeProduto[1]" />
            <label for="qtProduto1">Qt.:</label> <input type="number" min="1" max="999" size="1" id="qtProduto1" name="qtProduto[1]" onblur="calcValor()" />
            <label for="valorProduto1">Valor und. R$:</label> <input type="text" id="valorProduto1" disabled name="valorProduto[1]" size="6" onkeypress="mascara(this,float)" />
        </div>
     </fieldset>
</form>

JSON section that searches the products and fills the other variables:

//-----------------------------------------------------
//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(){
    $("input[name='codProduto[1]']").blur(function(){
         var nomeProduto = $("input[name='nomeProduto[1]']");
         var qtProduto = $("input[name='qtProduto[1]']");
         var valorProduto = $("input[name='valorProduto[1]']");

         $( 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);
                 }
             );
     });
});

Excerpt where you add more products, than where JSON interaction does not work:

$(function () {
    var i = 1;
    $("#adicionarProduto").click(function () {
        i++;
        novoProduto = $(".fieldsetProduto:first").clone();
        novoProduto.find("input").each(function () {
            $(this).val("")
        });

        $("#adicionarformProdutos").append("
        " + novoProduto.html().replace(/1/g, i) + "")
    });
});

Insert in the database, OBS: the variables that are fed by JSON seem to be empty:

<?php
$Ficha = filter_input(INPUT_GET,'id');
?>

<div id="painelcadastro2" align="center">
<?php   if (isset($_GET['cadastra']) && $_GET['cadastra'] == 'add') {
  $datacompra = implode("-", array_reverse(explode("/",$_GET['datacompra'])));
  $nomeProduto = filter_input(INPUT_GET, 'nomeProduto1');
  $qtProduto = filter_input(INPUT_GET, 'qtProduto1');
  $valorProduto = filter_input(INPUT_GET, 'valorProduto1');
  $parcelas = filter_input(INPUT_GET, 'select_parcelas');
  $entrada = filter_input(INPUT_GET, 'entrada');
  $total = filter_input(INPUT_GET, 'total');
  $pagamento = "CREDIARIO";
  $cadastra = mysql_query("INSERT INTO t_cadcontratos (Ficha, DataContrato, QuantParcelas, ValorContrato, Entrada, Saldo, DescricaoProduto, QuantProdutos, FormaPagamento) 
                          VALUES ('$Ficha', '$datacompra', '$parcelas', '$valorProduto', '$entrada', '$total', '$nomeProduto', '$qtProduto', '$pagamento')");
  if($cadastra == '1') {
        echo "Venda Crediário realizada com sucesso !";
  }else{
        echo "Erro ao realizar a venda Crediário, tente novamente !";
  }
}
?>

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;
             }
         }else{
             $arr['nomeProduto'] = 'produto não encontrado';
         }
         if($arr['qtProduto'] == 0)
            $arr['nomeProduto'] = 'sem estoque';

         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
}

How can I proceed to fill in the dynamically added fields via the Javascript section above?

Answer 1

I suggest a new approach as @mgibsonbr referred to the way it’s going to change properties you don’t want.

Create a function that returns the clone with the right product number.

Something like:

function novoProduto(nr){
    var html = '<fieldset class="fieldsetProduto">' +
        '<legend>Produto ' + nr + '</legend>' +
        '<div class="produtos">' +
        '<label for="codProduto' + nr + '">Código:</label><input type="text" id="codProduto' + nr + '" size="5" name="codProduto[' + nr + ']" />' +
        '<label for="nomeProduto' + nr + '">Nome:</label> <input type="text" id="nomeProduto' + nr + '" size="9" dis' + nr + 'bled name="nomeProduto[' + nr + ']" />' +
        '<label for="qtProduto' + nr + '">Qt.:</label> <input type="number" min="1" max="999" size="1" id="qtProduto1" name="qtProduto[' + nr + ']" onblur="calcValor()" />' +
        '<label for="valorProduto' + nr + '">Valor und. R$:</label> <input type="text" id="valorProduto' + nr + '" disabled name="valorProduto[' + nr + ']" size="6" onkeypress="mascara(this float)" />' +
        '</div>' +
        '</fieldset>';
    return html;
}

There whenever you want a new element you just have to do novoProduto(i).

Another suggestion related to code maintenance is: instead of using $("input[name='codProduto[1]']").blur(function(){ etc... that will force you to have a similar code for each new product, I suggest to use so:

function carregarJSON() {
    var index = this.id.slice(-1);
    var self = this;
    var nomeProduto = $("input[name='nomeProduto[" + index + "]']");
    var qtProduto = $("input[name='qtProduto[" + index + "]']");
    var valorProduto = $("input[name='valorProduto[" + index + "]']");

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

    $.getJSON(
        'function.php', {
        codProduto: self.value
    },

    function (json) {
        $(nomeProduto).val(json.nomeProduto);
        $(qtProduto).val(nr);
        $(valorProduto).val(json.valorProduto);
    });
}

$(document).ready(function () {
    $(document).on("blur", "input[name^='codProduto[']", carregarJSON);
});

Notice also that I removed the this within the $getJSON. If I’m not mistaken the thisthere not tip more for your input but yes for the jquery function.

And by the way, optimization suggestion here too:

$(function () {
    var i = 1;
    $("#adicionarProduto").click(function () {
        i++;
        $("#adicionarformProdutos").append(novoProduto(i))
    });
});

If you keep the code you have here, I don’t think you need the .each(). Suffice:

novoProduto.find("input").val("") //não precisa do .each() aqui

Answer 2

Your code $("input[name='codProduto[1]']").blur(...) only assigns a Handler pro event blur of the elements that are already on the page from the beginning - that is, the first product. If you want to do this for a new product, I suggest using the method on (or live, if it is a very old version of jQuery).

First, add a class to your input to facilitate your selection (for some reason I don’t know, the selector .produtos > input:first is not working as I expected):

<input class="codigoProduto" type="text" id="codProduto1" size="5" name="codProduto[1]" />

Second, when you clone don’t just take the elemento.html (that would be the innerHTML). Instead, update the HTML and then add the element itself (taking care not to overwrite too much, as pointed out in the comments, but here I will ignore it):

//$("#adicionarformProdutos").append("" + novoProduto.html().replace(/1/g, i) + "")
novoProduto.html(novoProduto.html().replace(/1/g, i));
$("#adicionarformProdutos").append(novoProduto)

Third, use the on:

$(document).on("blur", ".codigoProduto", function(){

Finally, select the right elements to update - not just the first:

 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)");

Example in jsFiddle. I would also like to mention that it is not necessary to use the operator $ again in $( nomeProduto ), etc, because they are already jQuery objects. But also does not disturb...