Fill modal Bootstrap with value of a div

0

I have a table in which the loader value inside it through PHP needs to be in the value of some inputs that are in a modal window of the boostrap. I've tried several solutions, but it does not work. When I click on the table row, it loads the modal, but the field is empty. I intend to do so, using the table line to load the modal, and not a button to load the modal. follows the code: HTML Table

<tr data-toggle="modal" data-target="#modal_editar_veiculo">
   <td id="teste"><?php echo $linha['PLACA'] ?></td>
    <td><?php echo $linha['NOME'] ?></td>
    <td><?php echo $linha['ANO'] ?></td>
    <td><?php echo $linha['CPF'] ?></td>
</tr>

Modal window:

<!-- Modal editar cadastro veículo -->
        <div class="modal fade bd-example-modal-lg" id="modal_editar_veiculo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Alterar dados do veículo</h5>
              </div>
              <div class="modal-body">
                    <form class="modal_novo_item">
                <div class="row">
                    <div class="col-md-12">
                        <input type="text" placeholder="Nome" id="nome" name="nome">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <input type="text" placeholder="Ano" id="ano" name="ano"> 
                    </div>
                </div>
                <div class="row">
                     <div class="col-md-12">
                        <input type="text" placeholder="Placa" id="placa"  name="placa">
                     </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <select name="proprietario">
                        <?php listar_editar( $link ); ?>
                        </select>
                    </div>
               </div>
              </form>

                </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar janela</button>
                <button type="button" class="btn btn-primary">Alterar</button>
                <button type="button" class="btn btn-danger">Excluir</button>
              </div>
            </div>
          </div>
        </div>

The window opens, but does not work. In another project already done tinah, with another jQuery code, however, what carried the modal was a button. I tried to fit my code, but nothing. Thank you in advance.

Jquery that should be working:

 <!--Open modal for editions -->
<script type="text/javascript">
$(document).ready(function (){
    var valorDaDiv = $("#teste").text();    
    $("#placa").val(valorDaDiv);
 };
</script>
    
asked by anonymous 01.05.2018 / 00:48

2 answers

0

You can get the text of the first td and play in the modal field with the .click event:

$(document).ready(function (){
   $("[data-toggle='modal']").click(function(){
      var valorDaDiv = $("td:first", this).text();
      $("#placa").val(valorDaDiv);
   });
});

Example:

$(document).ready(function (){
   $("[data-toggle='modal']").click(function(){
      var valorDaDiv = $("td:first", this).text();
      $("#placa").val(valorDaDiv);
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<table>
<tr data-toggle="modal" data-target="#modal_editar_veiculo">
   <td>123</td>
    <td>nome</td>
    <td>ano</td>
    <td>cpf</td>
</tr>
<tr data-toggle="modal" data-target="#modal_editar_veiculo">
   <td>456</td>
    <td>nome</td>
    <td>ano</td>
    <td>cpf</td>
</tr>
</table>
<!-- Modal editar cadastro veículo -->
        <div class="modal fade bd-example-modal-lg" id="modal_editar_veiculo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Alterar dados do veículo</h5>
              </div>
              <div class="modal-body">
                    <form class="modal_novo_item">
                <div class="row">
                    <div class="col-md-12">
                        <input type="text" placeholder="Nome" id="nome" name="nome">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <input type="text" placeholder="Ano" id="ano" name="ano"> 
                    </div>
                </div>
                <div class="row">
                     <div class="col-md-12">
                        <input type="text" placeholder="Placa" id="placa"  name="placa">
                     </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <select name="proprietario">
                        <?php listar_editar( $link ); ?>
                        </select>
                    </div>
               </div>
              </form>

                </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar janela</button>
                <button type="button" class="btn btn-primary">Alterar</button>
                <button type="button" class="btn btn-danger">Excluir</button>
              </div>
            </div>
          </div>
        </div>

If you want to put each text in the appropriate modal fields, use .eq() , where .eq(0) is the text of the first td and so on:

$(document).ready(function (){
   $("tr[data-toggle='modal']").click(function(){
      var placa = $("td:eq(0)", this).text();
      var ano = $("td:eq(1)", this).text();
      var nome = $("td:eq(2)", this).text();
      $("#placa").val(placa);
      $("#nome").val(ano);
      $("#ano").val(nome);
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<table>
<tr data-toggle="modal" data-target="#modal_editar_veiculo">
   <td>123</td>
    <td>fulano</td>
    <td>1997</td>
    <td>cpf</td>
</tr>
<tr data-toggle="modal" data-target="#modal_editar_veiculo">
   <td>456</td>
    <td>ciclano</td>
    <td>2000</td>
    <td>cpf</td>
</tr>
</table>
<!-- Modal editar cadastro veículo -->
        <div class="modal fade bd-example-modal-lg" id="modal_editar_veiculo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Alterar dados do veículo</h5>
              </div>
              <div class="modal-body">
                    <form class="modal_novo_item">
                <div class="row">
                    <div class="col-md-12">
                        <input type="text" placeholder="Nome" id="nome" name="nome">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <input type="text" placeholder="Ano" id="ano" name="ano"> 
                    </div>
                </div>
                <div class="row">
                     <div class="col-md-12">
                        <input type="text" placeholder="Placa" id="placa"  name="placa">
                     </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <select name="proprietario">
                        <?php listar_editar( $link ); ?>
                        </select>
                    </div>
               </div>
              </form>

                </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar janela</button>
                <button type="button" class="btn btn-primary">Alterar</button>
                <button type="button" class="btn btn-danger">Excluir</button>
              </div>
            </div>
          </div>
        </div>
    
01.05.2018 / 01:38
1

$(document).ready(function(){ 
  $("tr[data-toggle='modal']").click(function(){
    
    //valores das células da linha clicada
    var a = $(this).text();

    //split de a porque cada valor está separado por um \n (nova linha)
    var n = a.split('\n');

    //atribuindo os valores aos devidos inputs
    $("#placa").val(n[1]);
    $("#nome").val(n[2]);
    $("#ano").val(n[3]);
  });
});              
                
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.js"></script>

<table width="300">

<tr data-toggle="modal" data-target="#modal_editar_veiculo">
    <td>ASD 123</td>
    <td>Igor</td>
    <td>2018</td>
    <td>CPF</td>
</tr>

<tr data-toggle="modal" data-target="#modal_editar_veiculo">
   <td>QWE 456</td>
    <td>dvd</td>
    <td>19eAntigamente</td>
    <td>CPF 2</td>
</tr>

<tr data-toggle="modal" data-target="#modal_editar_veiculo">
   <td>AAA 001</td>
    <td>Leo</td>
    <td>2021</td>
    <td>CPF 3</td>
</tr>

</table>
    
    
 <div class="modal fade bd-example-modal-lg" id="modal_editar_veiculo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-md" role="document">
     <div class="modal-content">
        <div class="modal-header">
             <h5 class="modal-title" id="exampleModalLabel">Alterar dados do veículo</h5>
              </div>
              <div class="modal-body">
                    <form class="modal_novo_item">
                <div class="row">
                    <div class="col-md-12">
                        <input type="text" placeholder="Nome" id="nome" name="nome">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <input type="text" placeholder="Ano" id="ano" name="ano"> 
                    </div>
                </div>
                <div class="row">
                     <div class="col-md-12">
                        <input type="text" placeholder="Placa" id="placa"  name="placa">
                     </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <select name="proprietario">
                        <?php listar_editar( $link ); ?>
                        </select>
                    </div>
               </div>
              </form>

                </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar janela</button>
                <button type="button" class="btn btn-primary">Alterar</button>
                <button type="button" class="btn btn-danger">Excluir</button>
              </div>
            </div>
          </div>
        </div>
    
01.05.2018 / 02:47