Passing data to a Bootstrap modal window

Question

I’m not able to pass the data from a table I have on a page . php to a modal window that shows this data, which would be for editing.

The only thing I can pass is the id, which in turn can be used to perform the update in the database without problems if I fill in the inputs.

I would like to know how to pass this table data to Texts input by Javascript, or by other means if possible.

Trigger to open the modal:

<i class="fas fa-edit ml-1" title="Editar" data-toggle="modal" data-target="#modalCliente" id="btnEditar" onclick="editar(<?= $cliente->id ?>)"></i>

Inputs from modal window:

<div class="col-md-6">
    <label for="nomeCliente">Nome do Cliente</label>
    <input class="form-control" type="text" id="nomeCliente" name="nomeCliente">
</div>
<div class="col-md-3">
    <label for="cpfCliente">CPF</label>
    <input class="form-control" type="text" id="cpfCliente" name="cpfCliente" onkeydown="javascript: fMasc( this, mCPF );">
</div>
<div class="col-md-3">
    <label for="cnpjCliente">CNPJ</label>
    <input class="form-control" type="text" id="cnpjCliente" name="cnpjCliente" onkeydown="javascript: fMasc( this, mCNPJ );">
</div>

Table listing the data:

<table class="table table-sm table-bordered table-striped" id="tabelaClientes">

<thead>
    <tr>
        <th>Nome</th>
        <th>CPF</th>
        <th>CNPJ</th>
        <th>ID</th>
        <th>Opções</th>
    </tr>
</thead>

<tbody>

    <? foreach ($listaCliente as $indice => $cliente) { ?>

        <tr><td>
                <?= $cliente->nome ?>
            </td>

            <td>
                <?= $cliente->cpf ?>
            </td>

            <td>
                <?= $cliente->cnpj?>
            </td>

            <td>
                <?= $cliente->id ?>
            </td>

            <td class="opcoes">

                <i class="fas fa-edit ml-1" title="Editar" data-toggle="modal" data-target="#modalCliente" id="btnEditar" onclick="editar(<?= $cliente->id ?>)"></i>

                <i class="fas fa-trash-alt ml-1" title="Excluir" data-toggle="modal" data-target="#modalExcluir" ></i>

            </td>

        </tr>

    <? } ?>

</tbody>

Answer 1

In modal inputs you did not enter where you want to pass id, but one way to fill modal inputs is to change the way you call the function editar. First change the onclick to:

onclick="editar(this)"

The this as argument represents the element clicked. So it is easy to take the data of the respective line.

And the function editar would look like this to pick up the values of the columns:

function editar(e){

   var linha = $(e).closest("tr");
   var nome = linha.find("td:eq(0)").text().trim(); // texto da primeira coluna
   var cpf  = linha.find("td:eq(1)").text().trim(); // texto da segunda coluna
   var cnpj = linha.find("td:eq(2)").text().trim(); // texto da terceira coluna
   var id   = linha.find("td:eq(3)").text().trim(); // texto da quarta coluna

   $("#nomeCliente").val(nome);
   $("#cpfCliente").val(cpf);
   $("#cnpjCliente").val(cnpj);

}

Behold:

function editar(e){

   var linha = $(e).closest("tr");
   var nome = linha.find("td:eq(0)").text().trim(); // texto da primeira coluna
   var cpf  = linha.find("td:eq(1)").text().trim(); // texto da segunda coluna
   var cnpj = linha.find("td:eq(2)").text().trim(); // texto da terceira coluna
   var id   = linha.find("td:eq(3)").text().trim(); // texto da quarta coluna

   $("#nomeCliente").val(nome);
   $("#cpfCliente").val(cpf);
   $("#cnpjCliente").val(cnpj);
   
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">


<table class="table table-sm table-bordered table-striped" id="tabelaClientes">

<thead>
    <tr>
        <th>Nome</th>
        <th>CPF</th>
        <th>CNPJ</th>
        <th>ID</th>
        <th>Opções</th>
    </tr>
</thead>

<tbody>

        <tr><td>
                Fulano
            </td>

            <td>
                cpf123
            </td>

            <td>
                cnpj123
            </td>

            <td>
                1
            </td>

            <td class="opcoes">

                <i class="fas fa-edit ml-1" title="Editar" data-toggle="modal" data-target="#modalCliente" class="btnEditar" onclick="editar(this)"></i>

                <i class="fas fa-trash-alt ml-1" title="Excluir" data-toggle="modal" data-target="#modalExcluir" ></i>

            </td>

        </tr>

        <tr><td>
                Ciclano
            </td>

            <td>
                cpf456
            </td>

            <td>
                cnpj456
            </td>

            <td>
                2
            </td>

            <td class="opcoes">

                <i class="fas fa-edit ml-1" title="Editar" data-toggle="modal" data-target="#modalCliente" class="btnEditar" onclick="editar(this)"></i>

                <i class="fas fa-trash-alt ml-1" title="Excluir" data-toggle="modal" data-target="#modalExcluir" ></i>

            </td>

        </tr>


</tbody>

<div class="modal fade" id="modalCliente" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

         <div class="col-md-6">
             <label for="nomeCliente">Nome do Cliente</label>
             <input class="form-control" type="text" id="nomeCliente" name="nomeCliente">
         </div>
         <div class="col-md-3">
             <label for="cpfCliente">CPF</label>
             <input class="form-control" type="text" id="cpfCliente" name="cpfCliente" onkeydown="javascript: fMasc( this, mCPF );">
         </div>
         <div class="col-md-3">
             <label for="cnpjCliente">CNPJ</label>
             <input class="form-control" type="text" id="cnpjCliente" name="cnpjCliente" onkeydown="javascript: fMasc( this, mCNPJ );">
         </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>