Fill out form fields with php and ajax

Question

Hello guys, are you all right? My first question put here in the stack, I always consult the forum to remedy some doubts and always find what I’m looking for. I know there are some topics with the same title, but what I need I’m really not able to find.

I’m doing a little work in php, an electronic request for materials, the request works as follows the user type the product code and as soon as change field the product description is filled in, so far beauty I can do.

The problem is that I have a button to add more products and when clicking it clones the inputs and adds another line to the form and when entering another product code its description is not filled. My knowledge with php is basic to medium and with ajax and jquery I’m still pretty beginner.

I will post here the codes if you can help me I will be very grateful! Thank you

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>

requisicao.php products

<?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 and script to clone 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.
      });

});

Answer 1

Good evening. I made a modification to your code and now it’s working as you want. I don’t know much about jQuery either but I hope I can help.

Remember that HTML is only valid when each field (div, inputs...) has a specific ID (Ids cannot be the same).

When cloning HTML the input ID becomes duplicated, thus rendering your HTML invalid.

As I said, I made a change to your Javascript/jQuery to clone so that Ids become unique.

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

Since we want each ID to be unique, I also made changes to its 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>

That’s it, I hope I helped.