How can i pass the id from the row clicked to a modal

Question

I want to pass the id from the row clicked, But for me it's not working

<?php foreach($cadeiras as $ca):?>
     <tr>
         <td><?=$ca['id']?></td>
         <td><?=substr($ca['titulo'], 0, 30)?></td>
         <td><?=$ca['semestre']?></td>
         <td><?=substr($ca['ementa'],0, 45).'...'?></td>
         <td><a href="#exclusao" data-toggle="modal" class="btn btn-danger glyphicon glyphicon-trash btn-block open"></a></td>
     </tr>

<?php endforeach ?>

Modal

   <div class="modal fade " id="exclusao"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
             <div class="modal-content">
                  <div class="modal-header">
                       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                       <h4 class="modal-title">Excluir cadeira</h4>
                  </div>
                  <form action="database/negarusuario.php" method="POST">
                        <div class="modal-body edit-content">
                             <h3>Tem certeza que deseja excluir a cadeira</h3>     
                        </div>
                        <div class="modal-footer">
                             <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                             <button type="submit" class="btn btn-danger">Negar cadastro</button>
                        </div>
                  </form>
              </div><!-- /.modal-content -->
         </div><!-- /.modal-dialog -->
   </div><!-- /.modal -->

Could you help me, Telling me how I can get the $ca['id'] from the current row clicked?

Answer 1

<script>
function myFunction() {
    var x = document.getElementsByTagName("H1")[0].getAttribute("modalid");
}
</script>

     <td><a href="#exclusao" data-toggle="modal" modalid="<?php echo $ca['id']; ?>" class="btn btn-danger glyphicon glyphicon-trash btn-block open"></a></td>

Try this bit of code

Answer 2

Add data attribute data-id="<?=$ca['id']?>"

<td><a href="#exclusao" data-toggle="modal" data-id="<?=$ca['id']?>" class="btn btn-danger glyphicon glyphicon-trash btn-block open"></a></td>

On jQuery

$('#exclusao').on('show.bs.modal', function(e) {
var id = $(e.relatedTarget).data('id');

});

Explanation:

1. use data attributes https://www.w3schools.com/tags/att_global_data.asp

2. Modal on show and hide https://getbootstrap.com/docs/3.3/javascript/#modals

3. relatedTarget https://www.w3schools.com/jquery/event_relatedtarget.asp