Capture a record on a table and then insert it into the bank

Question

Capture a record on a table and then insert it into the bank

Navigation

#1 by (0 votes)

1

I am developing an order 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 customers and select only one.

No 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 shown in the div id="data", the data is displayed after a query in the DB. To search 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 carries the data is the client_name.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 this table, by selecting a row the value is displayed in a label, for example the customer name, and the customer id is stored in a variable so I can do the insert in the service table.

I already searched the net and did not see anything like it, if anyone can help me.

javascript jquery ajax

asked by anonymous 08.01.2018 / 22:02

1 answer

WebClient C # ending download before downloading How to change the conjunction between the authors of the hepthesis model in Overleaf?

score 0 · Accepted Answer

First observation is to create a single id for the td on the foreach loop. Put the client id 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 jQuery below to capture id and play in variable var id_cliente and add client name in <caption> (this caption I just put as an 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><tableclass="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 id_cliente variable 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
});