Capture a record in a table and then insert it into the database

Question

I’m developing a service order registration form for a workshop. I need the registered service to be linked to an already registered customer.

For this I created a search form where the user can search the registered clients and select only one.

In the form I have:

<div class="form-group">
    <label>Localize o Cliente</label>
    <div class="input-group">
        <input type="text" class="form-control" name="cliente" id="cliente" placeholder="Informe o nome do cliente para fazer a busca">
        <span class="input-group-btn">                                                                                  
           <button class="btn btn-secondary" type="button" id="buscar">Buscar!</button>                                                                              
       </span>
   </div>
</div>
<div id="dados">aparece os dados aqui</div>

As demonstrated in div id="data", the data is displayed after a query in the BD. To fetch the data without refresh in the browser I used AJAX.

function buscar(cliente) {
       var page = "busca_cliente.php";
       $.ajax({
           type: 'POST',
           dataType: 'html',
           url: page,
           beforeSend: function () {
               $("#dados").html("Carregando...");
           },
           data: {palavra: cliente},
           success: function (msg) {
               $("#dados").html(msg)
           }
       });
   }
   $("#buscar").click(function (){
       buscar($("#cliente").val())
   });

The file that brings the data is the search client.php

// claro, antes existem as linhas de conexão e busca, estão funcionando e os dados estão na variável $query 
<table class="table" id="tabela">
        <tbody>
        <tr>
            <th>
                <i>
                    Cliente
                </i>
            </th>
            <th>
                <i>
                    Telefone
                </i>
            </th>
        </tr>
        <?php
        foreach ($query as $linha) {
        ?>
            <tr> 
                <td id="selecao"> <?php echo $linha->nome ?> </a></td>
                <td> <?php echo $linha->telefone . ' ou ' . $linha->celular ?></td>
            </tr>
        <?php
        }
        ?>
        </tbody>
    </table>
    <?php
} else {
    echo "Cliente não encontrado";

I need to allow the user to select only one value in that table, when selecting a row the value is displayed in a label, for example the client’s name, and the client’s id is stored in a variable for then I do the Insert in the service table.

I’ve searched the net and I haven’t seen anything like it, if anyone can help me.

Answer 1

First observation is to create a id only for the td in the loop foreach. Put the id of the customer instead of selecao:

<tr> 
    <td id="<?=$id_cliente?>"> <?php echo $linha->nome ?> </a></td>
    <td> <?php echo $linha->telefone . ' ou ' . $linha->celular ?></td>
</tr>

Use the jQuery below to capture the id and play in the variable var id_cliente and add the client name to the <caption> (that caption I put just as example, you create something else):

$(document).on("click","#tabela td a",function(e){
   e.preventDefault();
   var id_cliente = $(this).parent().attr("id");
   $("#tabela caption").text($(this).text());
});

See an example working:

$(document).on("click","#tabela td a",function(e){
   e.preventDefault();
   var id_cliente = $(this).parent().attr("id");
   $("#tabela caption").text($(this).text());
   console.log(id_cliente); // apenas para verificar o valor
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="tabela">
     <caption></caption>
     <tbody>
     <tr>
         <th>
             <i>
                 Cliente
             </i>
         </th>
         <th>
             <i>
                 Telefone
             </i>
         </th>
     </tr>
      <tr> 
          <td id="id1"> <a href="">Nome 1</a></td>
          <td> telefone</td>
      </tr>
      <tr> 
          <td id="id2"> <a href="">Nome 2</a></td>
          <td> telefone</td>
      </tr>
      <tr> 
          <td id="id3"> <a href="">Nome 3</a></td>
          <td> telefone</td>
      </tr>
     </tbody>
 </table>

If you are going to use the variable id_cliente in another function, remove the var:

$(document).on("click","#tabela td a",function(e){
   e.preventDefault();
   id_cliente = $(this).parent().attr("id");
   $("#tabela caption").text($(this).text());
   console.log(id_cliente); // apenas para verificar o valor
});