Pass a button's id inside a while (in php) to a code in java script and start the id inside a modal

2

I have two buttons in a table that stays within a while (in the php code) and I have a modal outside of that while structure. My question is how can I get the individual id inside my table that is inside the loop repeat and play in the input field with javascript?

Note: I had already asked a similar question and I deleted it, because the question was very vague and I decided to try to see if I could get something, but I could not.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script><!--Tabela--><divstyle='white-space:nowrap;'><tableclass='tabletable-striped'><thead><tr><th>Situação</th><th>Contrato</th><th>Número</th><th>ConclusãoPrevista</th><th>Alterar</th><th>Detalhes</th></tr></thead><tbodystyle='color:white;'><tr><tdstyle='background-color:#ad2525'>$situacao</td><tdstyle='background-color:#CD5555'>$contrato</td><tdstyle='background-color:#ad2525'>$numero</td><tdstyle='background-color:#CD5555'>$dataàs$hora</td><tdstyle='background-color:#ad2525'align='center'><buttonclass='btnbtn-sucess'data-toggle='modal'data-target='#Alt'data-whatevernome='$rows_cursos['codigo']'></button></td><tdstyle='background-color:#CD5555'align='center'><buttonclass='btnbtn-warning'data-toggle='modal'data-target='#Modal$codigo'></button></td></tr></tbody></table></div><!--Tabela--><!--Modal2--><divclass="modal fade" id="Alt" role="dialog" data-backdrop="false" style=" background: rgba(0,0,0,0.5);">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<div class='row'>
<div class='col-sm-5'>
<h4 class="modal-title" style='margin-right: 140px;'>Alterar</h4> 
</div>
<form method="post" action="func/define.php" enctype="multipart/form-data">
<div class='col-sm-5 text-right' style='float: right'>
<button type='submit' class='btn btn-danger'>Alterar</button>
<button type='button' class='btn btn-primary' data-dismiss='modal'>Sair</button>
</div>
</div>
</div>
<div class="modal-body">
<p>				
<label for="message-text" class="control-label">Detalhes:</label>
<input name="id_codigo" class="form-control" id="id_codigo" />
</p>
</div>
</div>
</div>
</div>	
<!-- Modal 2 -->

To use the same input logic in a combo box it is only necessary to declare the id and name as follows the code:

$(function () { $(".glyphicon-edit").click(function () { // Pego o valor dentro do class
                var id_value = $(this).data('codigo'); // botão que abre a modal
                $(".modal-body #id_codigo").val(id_value); // insere valor no input
})
});
<!--Campo Situaçao-->
<label for="id_codigo" class="control-label" >
Situação:<br></label>
<div class="input-group col-lg-6">
<div class="input-group-addon">
<span class='glyphicon glyphicon-alert'></span>
</div>

<!-- Para o valor ser reconhecido, somente se declara o id e name -->
<select type='text' class="form-control" id="id_codigo" name="codigo"> 
<!-- Para o valor ser reconhecido, somente se declara o id e name -->

<option id="id_codigo">id="id_codigo"</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<!--Fim Campo Situaçao-->
    
asked by anonymous 22.06.2018 / 16:18

1 answer

1

Use the Bootstrap event that captures the button that opened the modal. Then you get the value of the button attribute and insert it into input within the modal:

$('#Alt').on('show.bs.modal', function(event){ // evento que detecta a abertura da modal
   var bt = $(event.relatedTarget);            // botão que abriu a modal
   var id = bt.data('whatevernome');           // valor do data
   $(this).find('#id_codigo').val(id);         // insere valor no input
});
    
22.06.2018 / 16:36