Menu
Im using JSP, Jquery and Bootstrap As you can see in my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<div class="container-fluid">
<div class="row" id="logo">
<header>
<div class="btn-group">
<button type="button" class="btn btn-md dropdown-toggle"
aria-label="Left Align" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" id="menutopo">
<span
class="glyphicon glyphicon-menu-hamburger glyphicon-align-left"
id="menu"></span>
</button>
<%@ include file="dropdown_menu.jsp"%>
</div>
HEALTH TRACK
<p>Histórico de Pesagem</p>
<img src="resources/images/Health heart.png" class="img-fluid"
alt="backlogo" id="backhearth">
</header>
</div>
<section>
<div id="dados" class="container-fluid">
<div>
<c:if test="${not empty msg }">
<div class="alert alert-success">${msg}</div>
</c:if>
<c:if test="${not empty erro }">
<div class="alert alert-danger">${erro}</div>
</c:if>
</div>
<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>
<c:forEach items="${pesos}" var="p">
<tr>
<td><fmt:formatDate value="${p.dtDataHoraPeso}"
pattern="dd/MM/yyyy" /></td>
<td>${p.vlPeso}</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"
onclick="cdPesoExcluir.value = ${p.cdPeso}">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</button></td>
<td>${p.cdPeso }</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</section>
<footer>
<div class="navbar">
<a href="PesoInsert.jsp" type="button" class="btn btn-secundary"
id="botao"> <span class="glyphicon glyphicon-plus"
aria-hidden="true" id="glymais"></span>Peso
</a>
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
id="infos">Outras Informações</button>
<ul class="dropdown-menu">
<li><a href="PressaoArterial.jsp">Pressão Arterial</a></li>
<li role="separator" class="divider"></li>
<li><a href="Alimentos.jsp">Alimentos</a></li>
<li role="separator" class="divider"></li>
<li><a href="AtividadeFisica.jsp">Atividade Física</a></li>
</ul>
</div>
</div>
</footer>
</div>
<!-- Modal -->
<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">×</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="hidden" 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>
<%@ include file="footer.jsp"%>
</body>
</html>
I need to pass this paramater "&{cd.Peso}"
<button type="button" class="btn btn-danger"
aria-label="Left Align" data-toggle="modal"
data-target="#excluirModal"
onclick="cdPesoExcluir.value = **${p.cdPeso}**">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</button></td>
into to this modal, right here in the field "value". This is going to make my code work properly and delete the current row of my query.
<form action="peso" method="post">
<input type="hidden" name="acao" value="excluir"> <input
type="hidden" name="cdPeso" id="cdPesoExcluir" **value=""**>
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Cancelar</button>
<button type="submit" class="btn btn-danger">Excluir</button>
</form>
Does anyone have an ideia to make this happen? I`ve already tested the code by writting the code manually in to the field value and it works properly.
627
asked Feb 04 '26 10:02
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">×</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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
