Partage

Pop-up conditionnée par valeur liste déroulante

2 avril 2021 à 13:23:33

Bonjour j'ai un formulaire d'authentification des visiteurs et dedans j'ai plusieurs champs dont un avec le nombre de personne j'aimerai faire une liste déroulante pour ce champ et que lorsque que la personne est plus de 1, donc a partir de deux personnes ça ouvre une pop-up d'un autre formulaire pour authentifier la 2ème personne

En fonctionnalité j'aimerai que lorsque qu'il chosit le chiffre 3 ça lui ouvre une pop up, il renseigne le premier, s'enregistre, la page se remet il identifie le 2ème et vu qu'il a choisi 3 la pop up se ferme automatiquement avec la prise en compte du chiffre choisi au depart

Je sais pas trop si je suis clair !

Merci de vos réponses

EDIT Benzouye : Reprise du titre et retrait phrase ironique sur la modération

-
Edité par Benzouye 2 avril 2021 à 16:22:25

irrols

2 avril 2021 à 18:47:01

Bonjour,

Quel genre de popup est-ce que tu utilises ? L'authentification se fait en asynchrone(ajax) ou alors par le biais d'un formulaire classique (POST) ?

Sans ces informations il est difficile de répondre à ta question ...

Benzouye

2 avril 2021 à 19:11:13

Bonjour,

Une solution sans pop-up serait de rajouter autant de blocs formulaire que la valeur choisie dans le <select>

Exemple de code simple, avec un fichier HTML de départ :

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
	</head>
	<body>
	
		<form method="POST" action="traitement.php">
			<h1 id="titre">Formulaire d'inscription</h1>
			<div id="entete">
				<h2>Nombre d'utilisateurs</h2>
				<input id="nombre-utilisateurs" type="number" step="1" min="1" max="5" value="1" />
			</div>
			<div id="inscrits">
				
			</div>
		</form>
		
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<script type="text/javascript" src="main.js"></script>
	</body>
</html>

Qui appelle jQuery ( comme tu veux ), et ce bout de code JS, fichier main.js :

// Après chargement de la page
$( document ).ready( function(){
	var modeleInscrit = `
		<div class="inscrit">
			<h3>Utilisateur $$</h3>
			<input type="text" name="nom[]" placeholder="Saisissez votre nom" />
			<input type="text" name="prenom[]" placeholder="Saisissez votre prénom" />
			<input type="text" name="email[]" placeholder="Saisissez votre courriel" />
		</div>
	`;
	$( '#inscrits' ).append( modeleInscrit.replace( "$$", 1 ) );
	
	$( '#nombre-utilisateurs' ).change( function(e) {
		let compteur = 0;
		let nbExistants = $( '.inscrit' ).length;
		let nbInscrits = $( '#nombre-utilisateurs' ).val();
		let ecart = nbInscrits - nbExistants;
		
		if( ecart >= 0 ) {
			for( compteur = nbExistants ; compteur < nbInscrits ; compteur ++ ) {
				$( '#inscrits' ).append( modeleInscrit.replace( "$$", compteur+1 ) );
			}
		} else {
			$( ".inscrit:nth-last-child(-n+"+(-ecart)+")" ).remove();
		}
	});
});

La demo : https://jsfiddle.net/n3y9d0je/

Il manque le fichier traitement PHP pour traiter la validation du formulaire et l'enregistrement en base ...

-
Edité par Benzouye 2 avril 2021 à 19:13:26

Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL

B4ptiste

12 avril 2021 à 9:25:01

Bonjour, merci beaucoup pour votre aide ça m'a beaucoup aidé ! par contre du coup j'ai fais votre methode ou ça rajoute des lignes de formulaire selon le nombre de personne choisie or ça n'insère pas les autres utilisateurs dans la base de donnée, savez vous comment faire ? Merci !

Benzouye

12 avril 2021 à 10:37:03

J'ai utilisé des variables de formulaire en tableau, avec des noms entre [ ].

Côté PHP, il faut donc boucler sur ces variables $_POST pour avoir tous les inscrits.

Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL

B4ptiste

12 avril 2021 à 11:09:07

Vous avez un exemple de code dont je pourrai m'inspirer ?

Et au niveau du style des champs rajouté comment les faire en css je vois pas dans quel fichier le faire et comment

-
Edité par B4ptiste 13 avril 2021 à 11:57:37

Benzouye

13 avril 2021 à 11:05:30

El Capeo a écrit:

Vous avez un exemple de code dont je pourrai m'inspirer ?

Tu es sérieux ?

Côté PHP, tu récupères ton $_POST avec des éléments sous forme de tableau. Ne sais-tu pas traiter un tableau en PHP ?

Commence peut-être simplement par afficher le contenu de $_POST pour comprendre ...

El Capeo a écrit:

au niveau du style des champs rajouté comment les faire en css je vois pas dans quel fichier le faire et comment

Un fichier CSS se déclare dans la balise <head> de ta page HTML ...

Je te conseille fortement la lecture du cours HTML/CSS et PHP/MySQL (cf. ma signature) avant de poursuivre ton développement ...

Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL

B4ptiste

13 avril 2021 à 11:20:33

Benzouye a écrit:

Tu es sérieux ?
Côté PHP, tu récupères ton $_POST avec des éléments sous forme de tableau. Ne sais-tu pas traiter un tableau en PHP ?
Commence peut-être simplement par afficher le contenu de $_POST pour comprendre ...

Oui nan mais c'est bon je sais faire du php ça va oh j'ai deja tout mon formulaire qui renvoie toutes les valeurs dans une base de donnée donc je maitrise t'en fais pas, je te demande juste comment tu fais pour que ça récupère les nouveaux champs selon la valeur du select parce en faisant des blocs de formulaire ça m'inscrit que le premier utilisateur pas les autres que tu ajoutes

Un fichier CSS se déclare dans la balise <head> de ta page HTML ...

Ben oui oui je sais bien merci, sauf qu'avec ton java la ça peut pas prendre du css donc on peut pas deplacer les champs dans la page donc c'est clairement inutile

Mais je peux pas voir a quoi ressemble ton fichier traitement.php ? parce que regarde moi j'ai ma partie php de mon formulaire donc dans la page sauf que ça ne peut pas marcher pour les autres qu'on rajoute

<?php
			Error_reporting(E_ALL);
			include"connexion.php";

			$Nom=ISSET($_POST['Nom'])?$_POST['Nom']:NULL;
			$Prenom=ISSET($_POST['Prenom'])?$_POST['Prenom']:NULL;
			$Societe=ISSET($_POST['Societe'])?$_POST['Societe']:NULL;
			$Nombre_de_personnes=ISSET($_POST['Nombre_de_personnes'])?$_POST['Nombre_de_personnes']:NULL;
			$Objet_de_la_visite=ISSET($_POST['Objet_de_la_visite'])?$_POST['Objet_de_la_visite']:NULL;
			$Date=ISSET($_POST['Date'])?$_POST['Date']:NULL;
			$Heure_arrive=ISSET($_POST['Heure_arrive'])?$_POST['Heure_arrive']:NULL;
			$Choix_personne=ISSET($_POST['Choix_personne'])?$_POST['Choix_personne']:NULL;
					
			//print_r ($_POST);

			if ($Nombre_de_personnes){ 
				try{
					$sql = "insert into user(Nom, Prenom, Societe, Nombre_de_personnes, Objet_de_la_visite, Date, Heure_arrive, Choix_personne) values('$Nom','$Prenom','$Societe','$Nombre_de_personnes', '$Objet_de_la_visite', '$Date', '$Heure_arrive', '$Choix_personne')";
					$bdd->exec($sql);
					//echo "Votre demande a été prise en compte";
					header("Location:Visite.php");
				} 
				catch(PDOException $e) {
					die('Erreur : ' . $e->getMessage());
				}
			}
			else{
				//echo "f";
			}
			?>

-
Edité par B4ptiste 13 avril 2021 à 11:24:30

Benzouye

13 avril 2021 à 12:16:11

TOTO222222222222222222222222222222222222 a écrit:

je maitrise t'en fais pas

Bah, l'ensemble de tes questions et la qualité du code déjà écrit montre que non ...

Pour le CSS, tu le déclares dans la balise <head> de ta page HTML :

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
	 
		<form method="POST" action="traitement.php">
			<h1 id="titre">Formulaire d'inscription</h1>
			<div id="entete">
				<h2>Nombre d'utilisateurs</h2>
				<input id="nombre-utilisateurs" type="number" step="1" min="1" max="5" value="1" />
			</div>
			<div id="inscrits">
				 
			</div>
		</form>
		 
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<script type="text/javascript" src="main.js"></script>
	</body>
</html>

Au besoin tu rajoutes des classes CSS dans la variable modeleInscrit côté JS :

// Après chargement de la page
$( document ).ready( function(){
    var modeleInscrit = `
        <div class="inscrit">
            <h3>Utilisateur $$</h3>
            <input class="moncss" type="text" name="nom[]" placeholder="Saisissez votre nom" />
            <input class="moncss" type="text" name="prenom[]" placeholder="Saisissez votre prénom" />
            <input class="moncss" type="text" name="email[]" placeholder="Saisissez votre courriel" />
        </div>
    `;
    $( '#inscrits' ).append( modeleInscrit.replace( "$$", 1 ) );
     
    $( '#nombre-utilisateurs' ).change( function(e) {
        let compteur = 0;
        let nbExistants = $( '.inscrit' ).length;
        let nbInscrits = $( '#nombre-utilisateurs' ).val();
        let ecart = nbInscrits - nbExistants;
         
        if( ecart >= 0 ) {
            for( compteur = nbExistants ; compteur < nbInscrits ; compteur ++ ) {
                $( '#inscrits' ).append( modeleInscrit.replace( "$$", compteur+1 ) );
            }
        } else {
            $( ".inscrit:nth-last-child(-n+"+(-ecart)+")" ).remove();
        }
    });
});

Et tu crées un fichier CSS (ici style.css à côté du fichier HTML), exemple :

moncss {
    color: #FF0000;
    font-weight: bold;
}

Ce CSS sera donc appliqué aux éléments HTML, y compris ceux rajoutés dynamiquement par JS.

Enfin, côté PHP, tu parcoures les tableaux de valeurs contenus dans $_POST :

<?php
error_reporting(E_ALL);
include"connexion.php";

$requete = $bdd->prepare( '
	INSERT INTO user ( nom, prenom, email )
	VALUES ( ?, ?, ? );'
);
$nombreInscrits = count( $_POST['nom'] );

for( $i = 0 ; $i < $nombreInscrits ; $i++ ) {
	$requete->execute(
		array(
			$_POST['nom'][$i],
			$_POST['prenom'][$i],
			$_POST['email'][$i]
		)
	);
}
?>

Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL