2

Olá pessoal tudo bem com vocês? Minha primeira dúvida que posto aqui no stack, sempre consulto o forum pra sanar algumas dúvidas e sempre encontro o que procuro. Sei que existem alguns tópicos com o mesmo título, mas o que eu preciso realmente não estou conseguindo encontrar.

Eu estou fazendo um pequeno trabalho em php, uma requisição eletrônica de materiais, a requisição funciona da seguinte forma o usuário digita o código do produto e assim que mudar de campo a descrição do produto é preenchida, até aqui beleza eu consigo fazer.

O problema é que eu tenho um botão para adicionar mais produtos e ao clicar ele clona os inputs e adiciona uma outra linha ao formulário e ao digitar outro código de produto a descrição dele não é preenchida. Meu conhecimento com php é de básico a médio e com ajax e jquery ainda sou bem iniciante.

Vou postar aqui os códigos se puderem me ajudar serei muito grato! Obrigado

requisicoes.php (html)

<form id="clone-form" class="requisicao formrequisicao" method="post" action="">
    <div class="col-7">
    <label>Codigo
        <input type="text" name="Cod" id="Cod" class="inputform" placeholder="Código do produto"/>
    </label>
    </div>

    <div class="col-5">
    <label>Descrição
        <input type="text" name="cDesc" id="Desc" class="inputform" placeholder="Descrição do produto"/>
    </label>
    </div>

    <div class="col-6">
    <label>Necessidade Mensal
        <input type="text" name="cDesc" id="cDesc" class="inputform" placeholder="Descrição do produto"/>
    </label>
    </div>

    <div class="col-6">
    <label>Saldo Atual
        <input type="text" name="cDesc" id="cDesc" class="inputform" placeholder="Descrição do produto"/>
    </label>
    </div>

    <div class="col-6">
    <label>Solicitado
        <input type="text" name="cDesc" id="cDesc" class="inputform" placeholder="Descrição do produto"/>
    </label>
    </div>
  </div>
  <div class="col-submit-2">
    <input type="button" id="botao2" class="centro enviar clonador" value="Adicionar Produto">
  </div>
  <div class="col-submit-2">
      <input type='submit' id='botao2' class='enviar' value='Enviar'/>
  </div>
</form>

produtos-requisicao.php

<?php
if(isset($_GET['Cod'])){
    $cod = $_GET['Cod'];
}
    $host = "localhost";
    $db = "rem";
    $user = "root";
    $pass = "";

    $conecta = new mysqli($host, $user, $pass, $db);
        $conecta->query("
            SET NAMES utf8;
        ");
    if(!$conecta){
        echo "Não foi possivel conectar no banco de dados";
    }
    date_default_timezone_set('America/Sao_Paulo');

    $prod = $conecta->query("
      SELECT * FROM tab_produto where codproduto = '".$cod."';
    ");

    $linha = mysqli_fetch_array($prod);
    $total = mysqli_num_rows($prod);

    if($total > 0){
        if($linha['tipo_id'] == 3){
            $Desc = $linha['descricao'];
            $produtos[$cod]['Desc'] = $Desc;
            echo $produtos [$cod]['Desc'];
        }
        else if($linha['tipo_id'] == 4){
            $produtos[$cod]['Desc'] = $linha['descricao'];
            echo $produtos[$cod]['Desc'];
        }
    }else{
        $produtos[$cod]['Desc'] = "Código não cadastrado";
        echo $produtos[$cod]['Desc'];
    }

Ajax e script para clonar os inputs

        $(function () {

            $("#Cod").blur(function () {

            var Cod = $(this).val();

            $.ajax({

                type: "GET",

                url: "../ajax/produtos-requisicao.php",

                data: "Cod="+Cod,

                success: function(produtos){

                    $("#Desc").val(produtos);

                }

            });

            });

        });
$(document).ready(function(){

      var elm_html = $('#clone-form').html();   //faz uma cópia dos elementos a serem clonados.

      $(document).on('click', '.clonador', function(e){
          e.preventDefault();
          var i = $('.requisicao').length;    //pega a quantidade de clones;
          var elementos = elm_html.replace(/\[[0\]]\]/g, '['+i+++']');  //substitui o valor dos index e incrementa++
          $('#clone-form').append(elementos);  //exibe o clone.
      });

});

1 Resposta 1

1

Boa noite. Fiz uma modificação no seu código e agora está funcionando como você quer. Também não tenho muito conhecimento com jQuery mas espero poder ajudar.

Lembrando que o HTML só é válido quando cada campo (div, inputs...) tem um ID especifico (os IDs não podem ser os mesmos).

Ao clonar o HTML o ID dos inputs se tornam duplicados, dessa forma tornando seu HTML inválido.

Como disse, fiz uma mudança em seu JavaScript/jQuery para clonar de forma com que os IDs se tornem únicos.

$(document).ready(function() {
        var i = 1; // 1 indica que já temos uma div com inputs (a que vamos clonar) (isso pode ser alterado da forma que você preferir)
        $('.clonador').click(function(e) { // a ação do click no botão clonar
            e.preventDefault();
            i++; // incrementando nosso numero inicial, que antes era 1 (adiciona mais 1 a cada click no ".clonador"
            var clone = $('#dados1').clone().removeAttr("id"); // clonando tudo que está dentro da div #dados1 e removendo o ID
            var inputs = $('#dados').append(clone).children().last().attr('id', 'dados' + i).find("input"); // inserindo o clone na div #dados, pegando a ultima div inserida e adicionando um novo ID para ela, e por fim, pegando os inputs existentes ali.
            inputs.each(function() { // aqui pegamos cada input novo
                var input = $(this);
                var inputID = input.attr('id'); // pegamos o nome do input
                input.removeAttr("id").attr("id", inputID.split("-")[0] + "-" + i).val(""); // e atualizamos o input com um numero (i), tornando esse ID único, depois limpamos o campo (.val("")).
            })
        });
        $(document).on("click", function() { // para que a ação blur funcione nos novos inputs utilizei o ".on click" do documento, assim ele atualiza o html da página e envia ao jQuery corretamente.
            $("input[id^='Codigo']").on("blur", function() { // pegando o evento blur de todos os inputs com os IDs iniciados com "Codigo"
                var inputID = $(this).attr('id'); // Pegamos o nome do ID (pra checar qual o numero, pra usar mais a frente)
                var Cod = $(this).val(); // O valor do input
                $.ajax({
                    type: "GET",
                    url: "../ajax/produtos-requisicao.php",
                    data: "Cod=" + Cod,
                    success: function(produtos) {
                        $("#Descricao-" + inputID.split("-")[1]).val(produtos); // Aqui indicamos que o input que receberá os dados é o com ID "Descrição", seguido do numero que conseguimos na variável inputID
                    }
                });
            });
        });
    });

Como queremos que cada ID seja único, também fiz alterações em seu HTML:

  <form id="clone-form" class="requisicao formrequisicao" method="post" action="">
    <div id="dados">
        <div id="dados1">
            <div class="col-7">
                <label>Código
                    <input type="text" name="Cod[]" id="Codigo-1" class="inputform" placeholder="Código do produto" />
                </label>
            </div>

            <div class="col-5">
                <label>Descrição
                    <input type="text" name="Desc[]" id="Descricao-1" class="inputform" placeholder="Descrição do produto" />
                </label>
            </div>

            <div class="col-6">
                <label>Necessidade Mensal
                    <input type="text" name="Necessidade[]" id="Necessidade-1" class="inputform" placeholder="Descrição do produto" />
                </label>
            </div>

            <div class="col-6">
                <label>Saldo Atual
                    <input type="text" name="Saldo[]" id="Saldo-1" class="inputform" placeholder="Descrição do produto" />
                </label>
            </div>

            <div class="col-6">
                <label>Solicitado
                    <input type="text" name="Solicitado[]" id="Solicitado-1" class="inputform" placeholder="Descrição do produto" />
                </label>
            </div>
        </div>
    </div>
    <div class="col-submit-2">
        <input type="button" id="botao2" class="centro enviar clonador" value="Adicionar Produto">
    </div>
    <div class="col-submit-2">
        <input type='submit' id='botao2' class='enviar' value='Enviar' />
    </div>
    </div>
</form>

É isso, espero ter ajudado.

1
  • Cara muitíssimo obrigado, era exatamente o que tinha conversado ontem com a minha professora da faculdade, ela falou que ao clonar a div o id dos inputs continuava o mesmo e que pra resolver eu teria que encontrar uma forma de incrementar os ids para eles não se repetirem, cara valeu você me salvou, eu estava tentando encontrar uma outra solução, agora vou dar continuidade aqui. Commented 12/05/2019 às 3:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .