Affichage des informations d'une ligne selectionner dans des inputs

Messages postés
7
Date d'inscription
mardi 8 octobre 2019
Statut
Membre
Dernière intervention
1 novembre 2019
-
Bonjour,

Voici mon problème je veux que quand je clic sur un bouton qui est dans une ligne d'un tableau html, les informations de la ligne selectionner s'affiche dans des inputs et qu'il ne soit pas modifiable.

Voici mon interface pour mieux comprendre :



je veux que quand je clic sur réserver le modal suivant s'affiche, et les inputs du modal stock les informations de la ligne selectionner, voici mon modal :



le problème c'est que je ne sais vraiment pas comment faire celà avec du code.

voici le code de ma page jsp si besoin :

<%@page import="controller.Cnx"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.sql.*"%>
<%@page import="java.util.Map"%>

<!DOCTYPE html>
<%

Connection c=Cnx.getcnx();
Statement st=c.createStatement();
ResultSet re=st.executeQuery("select * from place");
Statement st2=c.createStatement();
ResultSet re2=st2.executeQuery("select * from local");
%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Interface locataire</title>
<meta name="description" content="Sufee Admin - HTML5 Admin Template">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="apple-touch-icon" href="apple-icon.png">
<link rel="shortcut icon" href="favicon.ico">

<link rel="stylesheet" href="vendors/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="vendors/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="vendors/themify-icons/css/themify-icons.css">
<link rel="stylesheet" href="vendors/flag-icon-css/css/flag-icon.min.css">
<link rel="stylesheet" href="vendors/selectFX/css/cs-skin-elastic.css">
<link rel="stylesheet" href="vendors/jqvmap/dist/jqvmap.min.css">


<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="css/Css_acceuil_locataire.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/e3fd0d5f24.js" crossorigin="anonymous"></script>


</head>
<body>

<aside id="left-panel" class="left-panel">
<nav class="navbar navbar-expand-sm navbar-default" style="flex-flow:column wrap;">

<div class="navbar-header">

<a class="navbar-brand" href="#">Gestion parkings</a>
<a class="navbar-brand hidden" href="./"><img src="images/logo2.png" alt="Logo"></a>
</div>

<div id="main-menu" class="main-menu collapse navbar-collapse">
<ul class="nav navbar-nav">


<li class="nav-item ">
<a href="#" class="nav-link" aria-haspopup="true" aria-expanded="false" style="margin-right: 80px;"> <i class="fas fa-arrow-alt-circle-right" style="margin-right: 10px;" selected></i>Réservation</a>

</li>
<li class="nav-item ">
<a href="#" class="nav-link" aria-haspopup="true" aria-expanded="false" style="margin-right: 80px;"> <i class="fas fa-arrow-alt-circle-right" style="margin-right: 10px;" selected></i>Liste réservation</a>

</li>



</ul>
</div>
</nav>
</aside>



<nav class="navbar" style="height:70px;" id='nav-proprietaire'>
<ul class="nav navbar-nav">
<li class="nav-item ">
<a href="Page_de_cnx" class="nav-link" aria-haspopup="true" aria-expanded="false" style="padding-left: 1430px; text-transform: uppercase"> <i class="fas fa-exclamation-circle" style="margin-right: 20px;"></i>Déconnection</a>

</li>
</ul>
</nav>


<label id="label1">Liste des places disponibles avec leurs emplacements :</label>

<table class="table table-hover" style="margin-top: 20px;" id="table1">
<thead>
<tr class="table-active">
<th scope="col">Nom local</th>
<th scope="col">Numéro place</th>
<th scope="col">Prix par heure</th>
<th scope="col">Taille</th>
<th scope="col">Action</th>


</tr>
</thead>
<%while(re.next()){%>
<tr>

<th scope="row"><%=re.getObject(2)%></th>
<td><%=re.getObject(3)%></td>
<td><%=re.getObject(4)%></td>
<td>><%=re.getObject(5)%></td>
<td>><a href="#" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#reservation" ><i class="fas fa-plus" style="margin-right: 10px;"></i>Réserver</a></td>
</tr>


<%}%>

<tbody>





</tbody>

</table>
<div class="modal" id="reservation">
<div class="modal-dialog">
<div class="modal-content">

<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Information</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>

<!-- Modal body -->
<div class="modal-body">
<form method="POST" action='Place_locaux'>
<div class="form-group">
<label class='labelproprietaire'>Nom du local approprié à la place :</label>
<select class="browser-default custom-select" placeheader="Search here.." name="nom_local" required disabled>


<%while(re2.next()){%>
<option><%=re2.getObject(2)%></option>
<%}%>
</select>
</div>
<div class="form-group">
<label class='labelproprietaire'>Numéro place :</label>
<input type="number" class="form-control" id="numeroplace" name="numeroplace" required>
</div>
<div class="form-group">
<label class='labelproprietaire'>Prix par heure:</label>
<input type="text" class="form-control" id="prixplace" placeholder="Entrer le prix de la place" name="prixplace" required>

</div>
<div class="form-group">
<label class='labelproprietaire'>Taille de la place :</label>
<input type="text" class="form-control" id="tailleplace" placeholder="Entrer la taille de la place" name="tailleplace" required>

</div>

<div class="form-group">
<label class='labelproprietaire'>Votre Cin :</label>
<input type="text" class="form-control" id="Cinlocataire" placeholder="Entrer votre cin" name="cinlocataire" required>

</div>

<div class="form-group">
<label class='labelproprietaire'>Heure début de la réservation :</label>
<input type="time" class="form-control" id="heure_debut" placeholder="Entrer l'heure de début" name="heure_debut" required>

</div>

<div class="form-group">
<label class='labelproprietaire'>Heure fin de la réservation :</label>
<input type="time" class="form-control" id="heure_fin" placeholder="Entrer l'heure de fin" name="heure_fin" required>

</div>






</form>
</div>

<!-- Modal footer -->
<div class="modal-footer">

<div id='divbtnaddplace'>
<button type="submit" class="btn btn-primary btn-lg" id='btnreserver' style='vertical-align: 0; margin-right: 260px;' name='action' value='reserver'>Reserver</button>


</div>
<button type="button" class="btn btn-danger btn-lg" data-dismiss="modal">Fermer</button>
</div>

</div>
</div>
</div>


<script src="vendors/jquery/dist/jquery.min.js"></script>
<script src="vendors/popper.js/dist/umd/popper.min.js"></script>
<script src="vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="assets/js/main.js"></script>


<script src="vendors/chart.js/dist/Chart.bundle.min.js"></script>
<script src="assets/js/dashboard.js"></script>
<script src="assets/js/widgets.js"></script>
<script src="vendors/jqvmap/dist/jquery.vmap.min.js"></script>
<script src="vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
<script src="vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
</body>
</html>


Merci d'avance pour votre aide !

Configuration: Windows / Chrome 77.0.3865.120
Afficher la suite