passing data into a bootstrap modal

Question

You can give custom attribute to your button which will have value which you need pass to backend i.e : data-value="${p.cdPeso}" .Then , you can use show.bs.modal event this will get called whenever your modal shows up then pass the value from button using $(event.target).attr('data-value') to your input-box.

Demo Code :

//will get call when modal will be open
$(document).on('show.bs.modal', '#excluirModal', function(e) {
  //put the value of attr inside input box
  $("input[name=cdPeso]").val($(event.target).attr('data-value'))
  console.log($(event.target).attr('data-value'))
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">Data</th>
      <th scope="col">Peso (Kg)</th>
      <th scope="col">Ação</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td>
        <fmt:formatDate value="${p.dtDataHoraPeso}" pattern="dd/MM/yyyy" />
      </td>
      <td>something</td>
      <td>
        <c:url value="peso" var="link">
          <c:param name="acao" value="abrir-form-edicao" />
          <c:param name="cdPeso" value="${p.cdPeso}" />
        </c:url>
        <a href="${link}" type="button" class="btn btn-default" aria-label="Left Align"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
        <!--put `data-value="${p.cdPeso}"` -->
        <button type="button" class="btn btn-danger" aria-label="Left Align" data-toggle="modal" data-target="#excluirModal" data-value="1">
                                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                    </button></td>
      <td>1</td>
    </tr>

    <tr>
      <td>
        <fmt:formatDate value="${p.dtDataHoraPeso}" pattern="dd/MM/yyyy" />
      </td>
      <td>something1</td>
      <td>
        <c:url value="peso" var="link">
          <c:param name="acao" value="abrir-form-edicao" />
          <c:param name="cdPeso" value="${p.cdPeso}" />
        </c:url>
        <a href="${link}" type="button" class="btn btn-default" aria-label="Left Align"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>

        <button type="button" class="btn btn-danger" aria-label="Left Align" data-toggle="modal" data-target="#excluirModal" data-value="2">
                                        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                    </button></td>
      <td>2</td>
    </tr>
  </tbody>
</table>
<div class="modal fade" id="excluirModal" 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">Confirmação</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
      </div>
      <div class="modal-body">Deseja realmente excluir o registro?</div>
      <div class="modal-footer">
        <form action="peso" method="post">
          <input type="hidden" name="acao" value="excluir"> <input type="text" name="cdPeso" id="cdPesoExcluir">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
          <button type="submit" class="btn btn-danger">Excluir</button>
        </form>
      </div>
    </div>
  </div>
</div>

Leave a Comment Cancel Reply