Edit inside a modal

Question

I have a table with data and one of the fields has 1 edit button. What I want is that, when clicking, it opens me a modal with all filled data of the respective line that I clicked. I already managed to do that, but it wasn’t with a modal, it was with a separate file, and now I wanted it in a modal. I wonder if you could help me?

Modal code

<div class="modal fade" id="large-Modal1" tabindex="-1" role="dialog">
   <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title text-center text-primary"><i class="fa fa-user-plus"></i> Alterar Cliente</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         </div>
         <form id="edit_equipa" method="POST" action="clientes.php?edit=1" enctype="multipart/form-data">
            <div class="modal-body">
               <input type="hidden" name="action" value="executeEdit">
               <input type="hidden" class="" name="alterar_cliente_id" id="alterar_cliente_id" value="<?php echo $row['cliente_id']; ?>">

               <div class="form-group form-float col-lg-12">
                  <label><strong>ID Cliente</strong></label>
                  <div class="form-line">
                     <input type="text" class="form-control" disabled required ><?php echo $row['cliente_id']; ?></input>
                  </div>
               </div>

               <div class="form-group form-float col-lg-12">
                  <label><strong>Nome</strong></label>
                  <div class="form-line">
                     <input type="text" class="form-control" name="alterar_nome" id="alterar_nome" value="<?php echo $row['nome'];?>" required >
                  </div>
               </div>
            </td>

               <div class="form-group form-float col-lg-12">
                  <label><strong>Morada</strong></label>
                  <div class="form-line">
                     <textarea class="form-control" name="alterar_morada" id="alterar_morada" required ><?php echo $row['morada'];?></textarea>
                     <!--<label class="form-label">Data</label>-->
                  </div>
               </div>

               <div class="form-group form-float col-lg-12">
                  <label><strong>Telefone</strong></label>
                  <div class="form-line">
                     <input type="text" class="form-control" name="alterar_telefone" id="alterar_telefone" value="<?php echo $row['telefone'];?>" required >
                     <!--<label class="form-label">Data</label>-->
                  </div>
               </div>
            </td>

               <div class="form-group form-float col-lg-12">
                  <label><strong>Email</strong></label>
                  <div class="form-line">
                     <input type="text" class="form-control" name="alterar_email" id="alterar_email" value="<?php echo $row['email'];?>" required >
                     <!--<label class="form-label">Data</label>-->
                  </div>
               </div>

               <div class="form-group form-float col-lg-12">
                  <label><strong>Contribuinte</strong></label>
                  <div class="form-line">
                     <input type="text" class="form-control" name="alterar_contribuinte" id="alterar_contribuinte" value="<?php echo $row['contribuinte'];?>" required >
                     <!--<label class="form-label">Data</label>-->
                  </div>
               </div>

               <div class="form-group form-float col-lg-12">
                  <label><strong>Horas</strong></label>
                  <div class="form-line">
                     <input type="time" class="form-control" name="alterar_horas" id="alterar_horas" value="<?php echo $row['horas'];?>" required >
                     <!--<label class="form-label">Data</label>-->
                  </div>
               </div>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-default waves-effect " data-dismiss="modal">Fechar</button>
               <button type="submit" class="btn btn-primary waves-effect waves-light" id="btn_inserir">Alterar</button>
            </div>
         </form>

Code of the table button

<td style="vertical-align: middle;">
   <div>
      <a id="btn_editar?<?php echo $row['cliente_id']; ?>" href="#div_editar" class="btn btn-info btn-xs waves-effect" data-toggle="modal" data-target="#large-Modal1">
         <i class="fa fa-lg fa-edit"></i><!--edit-->
      </a>
      <a href="#" onclick="if (confirm('Tem a certeza que deseja eliminar este Cliente?')) window.location='iframes/clientes_apagar.php?cliente_id=<?php echo $row['cliente_id']; ?>';return false" class="btn btn-danger btn-xs waves-effect">
         <i class="fa fa-lg fa-trash"></i><!--delete-->
      </a>
   </div>
</td>

Answer 1

The best way to bring the record data within the modal editing is using the AJAX.

In the object #btn_editar, you will have to define the attribute onclick in that way:

<a href="#" onclick="editar('<?php echo $row['cliente_id']; ?>');">...</a>

In his JS, must declare the function that will make the request via AJAX and that will place the data inside the modal:

function editar(id)
{
  $.ajax({
    url: 'http://host_da_aplicacao/ajax.php?id=' + id,
    type: 'get',
    cache: false,
    dataType: 'json',
    success: function (dados) {
      if (dados.status) {
        // Reseta o form para evitar conflitos, preenche os campos e chama o modal
        $('#edit_equipa')[0].reset();
        $('#alterar_cliente_id').val(id);
        $('#alterar_nome').val(dados.nome);
        $('#alterar_morada').val(dados.morada);
        $('#alterar_telefone').val(dados.telefone);
        $('#alterar_email').val(dados.email);
        $('#alterar_contribuinte').val(dados.contribuinte);
        $('#alterar_horas').val(dados.horas);
        $('#large-Modal1').modal('show');
      }
    }
  });
}

And in the archive ajax.php, you must perform the search in your table with the $_GET['id'] received and then create a array dynamic with the data that will be converted into JSON:

<?php
  // Consulta a tabela antes disso e traz os dados na variável $resultado

  $dados = [
    'status'       => TRUE, // Defina TRUE se a consulta retornar com sucesso, senão defina FALSE
    'nome'         => $resultado['nome'],
    'morada'       => $resultado['morada'],
    'telefone'     => $resultado['telefone'],
    'email'        => $resultado['email'],
    'contribuinte' => $resultado['contribuinte'],
    'horas'        => $resultado['horas']
  ];

  echo json_encode($dados);

Answer 2

If the data that the user will edit is already being displayed in the table can use this code example below:

$('body').on("click", ".edit", function() {
    
    $('#nomeEditar').val($(this).parents('tr').find('td').eq(1).text());
    $('#emailEditar').val($(this).parents('tr').find('td').eq(2).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="table-responsive">
  <table class="table table-hover table-striped">
    <thead>
      <tr>
        <th>ID</th>
        <th>Nome</th>
        <th>Email</th>
        <th>Ações</th>
      </tr>
    </thead>
    <tr>
      <td>1</td>
      <td>Carlos</td>
      <td>[email protected]</td>
      <td>
        <button type="button" class="btn btn-warning btn-sm edit" data-toggle="modal" data-target="#modalEditar"><span class="glyphicon glyphicon-edit"></span></button>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Cesar</td>
      <td>[email protected]</td>
      <td>
        <button type="button" class="btn btn-warning btn-sm edit" data-toggle="modal" data-target="#modalEditar"><span class="glyphicon glyphicon-edit"></span></button>
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>Luis</td>
      <td>[email protected]</td>
      <td>
        <button type="button" class="btn btn-warning btn-sm edit" data-toggle="modal" data-target="#modalEditar"><span class="glyphicon glyphicon-edit"></span></button>
      </td>
    </tr>
  </table>
</div>

<div class="modal fade" id="modalEditar">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Editar Registro</h4>
      </div>
      <div class="modal-body">
        <input type="text" id="nomeEditar">
        <input type="text" id="emailEditar">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-warning" id="confEditar">Editar</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
      </div>
    </div>
  </div>
</div>

The advantage here is not to make a new request for each new possible edition. If the data is not all visible, you will have no option but to request the data by ajax.