PHPfrance

la communauté d'entraide francophone dédiée au PHP

[Résolu] 2 popup construits de la même façon ne se comportent pas de la même façon

5 messages   •   Page 1 sur 1
   Outils de sujet
Steph63
Petit nouveau ! | 3 Messages

27 nov. 2019, 13:02

Bonjour,

J'ai réduit le code php au minimum (ou presque) pour avoir 1 page de test qui reproduise mon problème.

Il y a 2 listes déroulantes (Type et Marque) qui listent les types et les marques existants dans ma base de données (pas de problème de ce côté là)
Il y a également 2 boutons pour afficher 2 popup pour permettre d'ajouter un nouveau type ou une nouvelle marque.
Les 2 popup s'affichent bien correctement.
Mais la validation du popup ne fonctionne pas du tout pareil entre la 1ère et la 2e popup.
J'ai beau regarder le code caractère par caractère, je ne vois aucune différence de structure. (j'ai bien vérifié (avec notepad++) également que chaque balise se ferme bien comme il faut)
La 1ère popup retourne sur la page test.php en ajoutant automatiquement ?input-Type=test1 (et je ne comprends pas du tout pourquoi) (et au lieu d'aller sur la page bibliotheque-ajoute-type.php)
La 2e popup va bien sur la page bibliotheque-ajoute-marque.php

J'ai ensuite scindé le code ci-dessous en 2 pages :
- test1.php uniquement pour le type (j'ai copié page.php et supprimé le code qui concernait les marques) : cette page continue de se comporter comme précédemment (logique) et reste sur test1.php?input-Type=test11 (au lieu d'aller sur la page bibliotheque-ajoute-type.php)
- et test2.php uniquement pour la marque (j'ai copié page.php et supprimé le code qui concernait les types) : cette page n'affiche plus bibliotheque-ajoute-marque.php comme avant (et comme souhaité) mais se comporte comme le 1er popup et affiche test2.php?input-Marque=test22

Je vous mets ci-dessous les codes, en espérant que vous pourrez m'expliquer ce qui cloche.

Code de test.php 
<!DOCTYPE html>
<html lang="fr">
	<head>
		<!-- Required meta tags -->
			<meta charset="utf-8">
			<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			<meta name="description" content="">
			<meta name="author" content="">
		<!-- /Required meta tags -->

		<!-- Bootstrap 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">
		<!-- /Bootstrap CSS -->

		<!-- icons -->
			<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
		<!-- /icons -->

		<title>DéCoSIL 2.0</title>
	</head>
	<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
		<?php
			require 'session.php';
			if ($niveau>9)
			{
				try
				{
					require 'singleton_pdo.php';
					$bdd = singleton_pdo::getBDD();
				}
				catch (Exception $ex)
				{
				}
			}
			function option($value, $data)
			{
				return '<option value="'.$value.'">'.$data.'</option>';
			}
		?>

		<div class="jumbotron jumbotron-fluid">
			<div class="container">
				<center>
					<h1>DéCoSIL 2.0</h1>
					<p></p>
					<h2>Ajouter un composant</h2>
				</center>
			</div>
		</div>
		<div class="container">
			<form>
				<div class="form-group row">
					<div class="col-4 col-offset-2 col-sm-4 col-sm-offset-2 col-md-4 col-md-offset-2 col-lg-4 col-lg-offset-2 col-xl-4 col-xl-offset-2">
						<label for="input-Nom">Nom</label>
					</div>
					<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
						<input class="form-control" type="text" id="input-Nom">
					</div>
				</div>
				<div class="form-group row">
					<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
						<label for="select-Type">Type</label>
					</div>
					<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
						<select class="custom-select" id="select-Type">
							<option selected>Sélectionner un Type...</option>
							<?php
								$req = "SELECT * FROM TypesComposant Order By Type";
								$result = $bdd->query($req);
								
								$donnees = $result->fetchAll();
								foreach ($donnees as $donnee)
								{
									echo option($donnee['NuméroAuto'],$donnee['Type']);
								}
							?>
						</select>
					</div>
					<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
						<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModalType">Ajouter un nouveau Type</button>
					</div>
				</div>
				<div class="form-group row">
					<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
						<label for="select-Marque">Marque</label>
					</div>
					<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
						<select class="custom-select" id="select-Marque">
							<option selected>Sélectionner une Marque...</option>
							<?php
								$req = "SELECT * FROM Marques Order By Marque";
								$result = $bdd->query($req);
								$donnees = $result->fetchAll();
								foreach ($donnees as $donnee)
								{
									echo option($donnee['NuméroAuto'],$donnee['Marque']);
								}
							?>
						</select>
					</div>
					<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
						<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModalMarque">Ajouter une nouvelle Marque</button>
					</div>
				</div>

				<div class="modal" id="myModalType">
					<div class="modal-dialog">
						<div class="modal-content">

							<div class="modal-header">
								<h4 class="modal-title">Ajouter un nouveau Type</h4>
								<button type="button" class="close" data-dismiss="modal">&times;</button>
							</div>

							<div class="modal-body">
								<div class="container">
									<form role="form" action="bibliotheque-ajoute-type.php" method="post">
										<div class="form-group row">
											<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
												<label for="input-Type">Type</label>
											</div>
											<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
												<input class="form-control" type="text" id="input-Type" name="input-Type"/>
											</div>
										</div>
										<div class="row" style="text-align: center;">
											<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
												<button type="submit" id="button-valider-Type" class="btn btn-success">Valider</button>
											</div>
											<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
												<button id="button-annuler-Type" class="btn btn-danger" data-dismiss="modal">Annuler</button>
											</div>
										</div>
									</form>
								</div>
							</div>

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

				<div class="modal" id="myModalMarque">
					<div class="modal-dialog">
						<div class="modal-content">

							<div class="modal-header">
								<h4 class="modal-title">Ajouter une nouvelle Marque</h4>
								<button type="button" class="close" data-dismiss="modal">&times;</button>
							</div>

							<div class="modal-body">
								<div class="container">
									<form role="form" action="bibliotheque-ajoute-marque.php" method="post">
										<div class="form-group row">
											<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
												<label for="input-Marque">Marque</label>
											</div>
											<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
												<input class="form-control" type="text" id="input-Marque" name="input-Marque"/>
											</div>
										</div>
										<div class="row" style="text-align: center;">
											<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
												<button type="submit" id="button-valider-Marque" class="btn btn-success">Valider</button>
											</div>
											<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
												<button id="button-annuler-Marque" class="btn btn-danger" data-dismiss="modal">Annuler</button>
											</div>
										</div>
									</form>
								</div>
							</div>

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

	</body>
	<!-- Core JavaScript Files -->
		<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>
	<!-- /Core JavaScript Files -->

	<!-- https://datatables.net -->
		<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
	<!-- /https://datatables.net -->
</html>
Code de test1.php 
<!DOCTYPE html>
<html lang="fr">
	<head>
		<!-- Required meta tags -->
			<meta charset="utf-8">
			<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			<meta name="description" content="">
			<meta name="author" content="">
		<!-- /Required meta tags -->

		<!-- Bootstrap 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">
		<!-- /Bootstrap CSS -->

		<!-- icons -->
			<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
		<!-- /icons -->

		<title>DéCoSIL 2.0</title>
	</head>
	<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
		<?php
			require 'session.php';
			if ($niveau>9)
			{
				try
				{
					require 'singleton_pdo.php';
					$bdd = singleton_pdo::getBDD();
				}
				catch (Exception $ex)
				{
				}
			}
			function option($value, $data)
			{
				return '<option value="'.$value.'">'.$data.'</option>';
			}
		?>

		<div class="jumbotron jumbotron-fluid">
			<div class="container">
				<center>
					<h1>DéCoSIL 2.0</h1>
					<p></p>
					<h2>Ajouter un composant</h2>
				</center>
			</div>
		</div>
		<div class="container">
			<form>
				<div class="form-group row">
					<div class="col-4 col-offset-2 col-sm-4 col-sm-offset-2 col-md-4 col-md-offset-2 col-lg-4 col-lg-offset-2 col-xl-4 col-xl-offset-2">
						<label for="form-control">Nom</label>
					</div>
					<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
						<input class="form-control" type="text" id="input-Nom">
					</div>
				</div>
				<div class="form-group row">
					<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
						<label for="select-Type">Type</label>
					</div>
					<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
						<select class="custom-select" id="select-Type">
							<option selected>Sélectionner un Type...</option>
							<?php
								$req = "SELECT * FROM TypesComposant Order By Type";
								$result = $bdd->query($req);
								
								$donnees = $result->fetchAll();
								foreach ($donnees as $donnee)
								{
									echo option($donnee['NuméroAuto'],$donnee['Type']);
								}
							?>
						</select>
					</div>
					<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
						<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModalType">Ajouter un nouveau Type</button>
					</div>
				</div>

				<div class="modal" id="myModalType">
					<div class="modal-dialog">
						<div class="modal-content">

							<div class="modal-header">
								<h4 class="modal-title">Ajouter un nouveau Type</h4>
								<button type="button" class="close" data-dismiss="modal">&times;</button>
							</div>

							<div class="modal-body">
								<div class="container">
									<form role="form" action="bibliotheque-ajoute-type.php" method="post">
										<div class="form-group row">
											<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
												<label for="input-Type">Type</label>
											</div>
											<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
												<input class="form-control" type="text" id="input-Type" name="input-Type"/>
											</div>
										</div>
										<div class="row" style="text-align: center;">
											<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
												<button type="submit" id="button-valider-Type" class="btn btn-success">Valider</button>
											</div>
											<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
												<button id="button-annuler-Type" class="btn btn-danger" data-dismiss="modal">Annuler</button>
											</div>
										</div>
									</form>
								</div>
							</div>

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

			</form>
		</div>

	</body>
	<!-- Core JavaScript Files -->
		<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>
	<!-- /Core JavaScript Files -->

	<!-- https://datatables.net -->
		<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
	<!-- /https://datatables.net -->
</html>
Code de test2.php 
<!DOCTYPE html>
<html lang="fr">
	<head>
		<!-- Required meta tags -->
			<meta charset="utf-8">
			<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			<meta name="description" content="">
			<meta name="author" content="">
		<!-- /Required meta tags -->

		<!-- Bootstrap 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">
		<!-- /Bootstrap CSS -->

		<!-- icons -->
			<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
		<!-- /icons -->

		<title>DéCoSIL 2.0</title>
	</head>
	<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
		<?php
			require 'session.php';
			if ($niveau>9)
			{
				try
				{
					require 'singleton_pdo.php';
					$bdd = singleton_pdo::getBDD();
				}
				catch (Exception $ex)
				{
				}
			}
			function option($value, $data)
			{
				return '<option value="'.$value.'">'.$data.'</option>';
			}
		?>

		<div class="jumbotron jumbotron-fluid">
			<div class="container">
				<center>
					<h1>DéCoSIL 2.0</h1>
					<p></p>
					<h2>Ajouter un composant</h2>
				</center>
			</div>
		</div>
		<div class="container">
			<form>
				<div class="form-group row">
					<div class="col-4 col-offset-2 col-sm-4 col-sm-offset-2 col-md-4 col-md-offset-2 col-lg-4 col-lg-offset-2 col-xl-4 col-xl-offset-2">
						<label for="form-control">Nom</label>
					</div>
					<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
						<input class="form-control" type="text" id="input-Nom">
					</div>
				</div>
				<div class="form-group row">
					<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
						<label for="select-Marque">Marque</label>
					</div>
					<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
						<select class="custom-select" id="select-Marque">
							<option selected>Sélectionner une Marque...</option>
							<?php
								$req = "SELECT * FROM Marques Order By Marque";
								$result = $bdd->query($req);
								$donnees = $result->fetchAll();
								foreach ($donnees as $donnee)
								{
									echo option($donnee['NuméroAuto'],$donnee['Marque']);
								}
							?>
						</select>
					</div>
					<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
						<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModalMarque">Ajouter une nouvelle Marque</button>
					</div>
				</div>

				<div class="modal" id="myModalMarque">
					<div class="modal-dialog">
						<div class="modal-content">

							<div class="modal-header">
								<h4 class="modal-title">Ajouter une nouvelle Marque</h4>
								<button type="button" class="close" data-dismiss="modal">&times;</button>
							</div>

							<div class="modal-body">
								<div class="container">
									<form role="form" action="bibliotheque-ajoute-marque.php" method="post">
										<div class="form-group row">
											<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
												<label for="input-Marque">Marque</label>
											</div>
											<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
												<input class="form-control" type="text" id="input-Marque" name="input-Marque"/>
											</div>
										</div>
										<div class="row" style="text-align: center;">
											<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
												<button type="submit" id="button-valider-Marque" class="btn btn-success">Valider</button>
											</div>
											<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
												<button id="button-annuler-Marque" class="btn btn-danger" data-dismiss="modal">Annuler</button>
											</div>
										</div>
									</form>
								</div>
							</div>

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

	</body>
	<!-- Core JavaScript Files -->
		<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>
	<!-- /Core JavaScript Files -->

	<!-- https://datatables.net -->
		<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
	<!-- /https://datatables.net -->
</html>
Modifié en dernier par Steph63 le 27 nov. 2019, 16:40, modifié 1 fois.
Mammouth du PHP | 2703 Messages

27 nov. 2019, 14:10

il faudrait le code de bibliotheque-ajoute-type.php et bibliotheque-ajoute-marque.php et savoir l'intitulé du type et de la marque ajouté.
Petit nouveau ! | 3 Messages

27 nov. 2019, 15:11

Merci Mammouth de te pencher sur mon problème.

Ces pages (bibliotheque-ajoute-type.php et bibliotheque-ajoute-marque.php) n'existent pas encore, elles contiendront le code PHP pour insérer une nouvelle ligne dans la table concernée, à savoir INSERT INTO `TypesComposant`(`Type`) VALUES ([value-1]), et INSERT INTO `Marques`(`Marque`) VALUES ([value-1]). La valeur insérée sera celle saisie dans le popup, insert-Type, et insert-Marque, et peut être n'importe quelle valeur (exemple : test11, ou test22, etc...), et qui sera récupérée avec la méthode get_POST.

Quand je dis que dans la page test.php, le popup Marque ouvre bien la page bibliotheque-ajoute-marque.php, comme elle n'existe pas, j'ai bien naturellement le message affiché File not found.

En fait, le problème que j'ai, c'est lorsque je valide le popup myModalType (dans la page test.php), il ne se comporte pas comme attendu et lance la page test.php?input-Type=test11 (si j'ai saisi test11 dans le champs input-Type du popup) au lieu de lancer la page attendue bibliotheque-ajoute-type.php (qui n'existe pas encore et qui contiendra le code php pour insérer le nouveau type dans la tables des types).

Et le problème est même un peu plus complexe car le popup myModalMarque qui fonctionne comme attendu dans test.php, ne fonctionne plus dans test2.php (alors que c'est juste 1 copie de test.php à laquelle j'ai supprimé tout ce qui concerne Type).
ViPHP
ViPHP | 2577 Messages

27 nov. 2019, 16:27

Bonjour,

Je ne peux pas lire le code en entier en détail. Le truc que j'ai aperçu, c'est des balises de formulaire imbriqué : <form><form></form></form>. Il me semble que ca pose problème.
Petit nouveau ! | 3 Messages

27 nov. 2019, 16:39

Merci Mazarini !
Le problème est maintenant résolu !
Et ça explique pourquoi le 2e popup fonctionnait et non le 1er. En effet, après le 1er popup, il avait le /form du popup qui fermait le form principal, et ainsi permettait d'avoir le 2e popup qui fonctionne normalement.
J'ai donc déplacé les popup à la toute fin du formulaire principale, et ça marche !
Merci ! (maintenant, faut que je regarde si on peut mettre le sujet du topic en Résolu)
   Répondre
5 messages   •   Page 1 sur 1
   Outils de sujet