18041 sujets

Questions générales et questions de débutants

[Résolu] Actualisation + dédoublement

Bonjour,

Je cherche depuis un moment une solution à mes soucis, mais j'ai du mal à trouver (ou je cherche mal, ça se peut aussi). Alors c'est assez simple, j'ai deux list-box, une catégorie et l'autre ingrédient pour créer (insérer dans ma BDD) des produits d'un restaurant.

Premièrement :
Suivant la valeur de la 1ère list-box (catégorie), la seconde (ingrédient) est caché. Mais je ne sais pas comment faire... J'ai pensé à mettre du JavaScript ou un plugin Jquery mais je ne suis pas encore à l'aise avec et je ne connais pas trop. Ma première intention était de faire une actualisation partielle par rapport à des div.

Deuxièmement:
Je voulais dupliquer ma 2ème list-box, autant de fois que l'utilisateur veut par un bouton juste à coté de la 2ème list-box original et bien sur d'en retirer en cas où. Mais là, je ne sais pas comment faire...

Merci d'avance.
Je pense que la réponse se trouve effectivement dans javascript, mais pas forcément dans un plugin jQuery, juste dans un script javascript normal. Tu en as déja fait un peu ?
Non je ne connais pas vraiment, j'ai commencé le cour sur le site du zéro. C'est la (les) seule(s) connaissance(s) que j'ai actuellement...
Formes-toi, lis des tutos, sur Alsacréation, sur le site du zero , essaye de coder ce que tu souhaites en cherchant a droite a gauche si nécessaire et reviens ici si tu coinces quelque part.

L'apprentissage de javascript ne peut être que bénéfique.
salut, je veux bien t'aider à trouver ta solution mais il me faut une base de travail. Qu'est-ce que tu entends par une list-box ? Si tu pouvais mettre soit un lien vers ton site en expliquant le lieu dans ton code où tu as un problème, soit carrément un bout de code dont tu désires afficher ou masquer ta list-box.
Salut,

Bah j'ai pas encore publié le site, je travaille en local.
Je te donne un exemple simpliste de mon cas :


<p>2 liste box ou liste déroulante</p>
          <form action="">
               <p>La 1ère list-box</p>
               <p>
                    <select name="lb_1" id="">
                         <option value="1">cache la 2ème liste déroulante</option>
                         <option value="2">cache la 2ème liste déroulante</option>
                         <option value="3">affiche la 2ème liste déroulante</option>
                         <option value="4">affiche la 2ème liste déroulante</option>
                         <option value="5">affiche la 2ème liste déroulante</option>
                    </select>
               </p>
               <p>La 2ème list-box cacher selon les valeurs de la 1ère liste déroulante (on peut dire, dans ce cas, 1 et 2) et c'est celle-ci qui se multiplie ou retire si l'utilisateur fait une mauvaise manip par le bouton "+".</p>
               <p>
                    <select name="lb_2" id="">
                         <option value="1">1</option>
                         <option value="2">2</option>
                         <option value="3">3</option>
                         <option value="4">4</option>
                         <option value="5">5</option>
                    </select>
                    <input type="button" name="bt_+" value="+" />
               </p>
          </form>


Les valeurs des listes déroulantes de mon vrai code sont remplisses grâce à une BDD.
Si tu as besoin de plus d'information, fait le savoir ou si tu veux le vrai code...
Modifié par Ademptus (14 Jun 2012 - 11:17)
J'avais aussi pensé à mettre un effet Accordéon pour le afficher / cacher, ça contournait le soucis mais ça ne correspondait pas vraiment à mes attentes.
D'accord, une liste box, c'est un select !

Voici la solution de ce que tu veux faire en Javascript (pas en jquery).
Je pense que cela doit correspondre à ta demande !
<!doctype html>
<html>
<head>
<title></title>

<script type="text/javascript">
function Show () { document.getElementById("test").style.display = "block"; }

function Hide () { document.getElementById("test").style.display = "none"; }

function Test (addr)
{
	if (addr.options[addr.selectedIndex].value == "OUI")	Show();
	else													Hide ();
}

</script>
<style type="text/css">
label {
	display		: block;
	width		: 150px;
	margin-top	: 10px;
}

input {
	display		: block;
	margin-top	: 10px;
}
</style>
</head>

<body>
<form>
	<label>La 1ère list-box : 
		<select onchange="javascript:Test(this);">
			<option value="OUI">A</option>
			<option value="OUI">B</option>
			<option value="NON">C</option>
			<option value="NON">D</option>
			<option value="NON">E</option>
		</select>
	</label>

	<label id="test">La 2ème list-box : 
		<select>
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
		</select>
	</label>

	<input type="button" value="Montrer" onclick="javascript:Show();" />
	<input type="button" value="Cacher"  onclick="javascript:Hide();" />
</form>

</body>
</html>
Merci beaucoup, ça correspond exactement à ma demande. C'est super, maintenant j'ai plus qu'à le comprendre et le mettre en place sur le site et surtout le comprendre (je pense que ça pourra m'aider par la suite)

Bon maintenant je dois chercher pour le dédoublement de la 2ème Select.

Je pense que je devrais utiliser JavaScript.

Enfin merci encore !
Modifié par Ademptus (15 Jun 2012 - 11:06)
Ademptus a écrit :
Les valeurs des listes déroulantes de mon vrai code sont remplisses grâce à une BDD.

Les <select> sont créés en php à partir du contenu de la base de données.
Ce que je ne comprends pas , c'est l'intérêt de dupliquer un <select> déjà existant ?
Et en admettant qu'on le duplique, comment va-t-il interagir avec le reste de la page html ?
C'est par rapport au contexte. Je suis en stage dans une pizzeria, j'ai mis en place une BDD avec une cardinalité 0;n entre les ingrédients d'un produit et le produit lui-même. Et que le formulaire est pour ajouter un produit à la BDD.

Je ne sais pas vraiment comment l'expliquer. Mais je cherche un procéder pour remplir ma table. Donc j'ai pensé à faire un <select> qui se dédouble pour avoir plusieurs ingrédients.
Je pense que c'est le contraire que tu devrais faire, c'est à dire partir du produit et de donner pour ce produit la liste de tous les incrédients. En principe une pizza donnée à une composition fixe. Je sais que l'on peut ajouter des compléments comme double fromage ou je ne sais quoi d'autre.

Il faut faire des allez-retour entre la page html (coté client) et le php (coté serveur). Par exemple, le client commande tel pizza. Tu envoies vers le serveur cette demande et tu recois la composition de la pizza et ce que le client est autorisé à ajouter ou à supprimer. Le vendeur coche selon les désires du clients. Un nouvel envoi vers le serveur qui calcul le prix de la pizza et retourne enfin cette information.

A chaque reception (coté client) la page html a été modifié selon la précédente demande.

Sinon, qu'est-ce que tu mets dans un <select> ? Et combien de <select> utilises-tu pour une pizza donnée ?
Voici comment dupliquer une balise <select> avec son contenu.
<!doctype html>
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload = function () {
	var objet = document.getElementById("one").cloneNode(true);
	objet.setAttribute("id", "two");
	document.getElementById("ici").appendChild(objet);
};
</script>
<style type="text/css">
select#two {
		background-color : red;
}
</style>
</head>

<body>
	<form id="ici">
		<select id="one">
			<option value="un">Un</option>
			<option value="deux">Deux</option>
			<option value="trois">Trois</option>
		</select>
	</form>
</body>
</html>
Salut et désolé de ne pas avoir répondu plus tôt,

En faite les formulaires ne sont accessible que pour les employés de l'entreprise et surtout pour le gérant. Les clients auront aucuns accès (enfin je l'espère) à cette partie du site.
C'est la partie Administrateur, car je peux pas coder en html pur le site, car la carte va changer assez souvent.

Sinon au maximum, il doit y avoir 6 type différents d'ingrédients (au moins). Mais bon, je pense que je vais abandonner ce procédé et passer par des checkbox, pour 2 raisons, c'est assez simple à mettre en place et aussi c'est plus facile pour ajouter les ingrédients dans la BDD.

Je voudrai avoir ton point de vue sur cette idée, si ça ne te dérange pas.
Il n'y a pas d'urgence ! Le week-end est fait pour ce changer les idées.

J'avais compris que tu devais créer le détail des pizzas à partir de la totalité des ingrédients qui sont à la dispositions de l'entreprise.

Donc en partant de cette idée de base, tu dois créer une table contenant tous les ingrédiants. Si tu as 50 ingrédiants, tu auras 50 lignes dans ta table. Il faudra mettre tout ce qui permet de bien identifier cet ingrédiant. Par exemple : un "ID" genre numéro séquentiel ou autre chose, un libelle genre "double fromage" que tu devra distinguer de "simple fromage", le prix à l'unité, ...

Enfin tu dois mettre dans cette table tout ce qui peut servir à composer une pizza mais aussi son prix de revient.

Ensuite dans une autre table, celle de la composition de la pizza, tu devras reprendre sous forme d'un tableau, les identifiants issus de la première table. Attention à ne pas tailler trop petit ce tableau. 20 ou 30 éléments peut suffir à envisager toutes les solutions possibles. Bien sûr, une pizza ne contenant que 5 ingrédiants ne devra pas dans la table contenir 30 éléments dont 25 contenant une valeur à zéro. Cette partie que je nomme un tableau est quelque chose de variables en taille.

Ensuite, en PHP, tu présentes un formulaire à partir de la première table contenant, une simple case à cocher associé au libelle et aussi à l'identifiant masqué (champs du formulaire en HIDDEN). Il faut aussi des champs de types textes pour entrer le nom de la pizza et les caractéristiques comme par exemple le prix de vente.

Les liens entre la pizza et les ingrédiants se font par des identifiants afin par la suite de faire des références croisées.

Il faudra aussi créer par la suite une table des commandes. Du genre, monsieur/madame, adresse, téléphone, [ désignation de la pizza (son identifiant), la quantité, le prix ] X N, le total du prix, la date du jour, l'heure d'enregistrement de la commande, le mode de paiement ...

Comme souvent, ce sont les mêmes clients, tu dois externaliser les clients en créant une table des clients. De ce fait, un identifiant désignant le client servira pour la commande. Tu devras aussi gérer les remises comme par exemple au bout de dix pizzas achetés, une est offerte. Bon, je vais un peu trop loin.

Sinon, pour répondre, c'est bien du HTML+CSS+JAVASCRIPT que tu dois utiliser. Sauf que la mise en page, ou si tu préfères l'encapsulation, devra se faire avec du PHP car ce qui devra apparaitre dans ta page sera conditionner par le contenu de tes tables. Ce n'est pas très compliqué à faire, mais il faut être organiser.

Tu dois commencer par dessiner les tables MySql avant d'entreprendre tout développement ! Tu dois aussi dessiner les fonctionalités que tu recherches à faire. Chaque fonctionnalité devra trouver une réponse dans les tables. Il faut tenir compte aussi des performances d'accès et de la redondance des informations. Tu ne peux pas te lancer dans le développement sans avoir créé les fondations (je voulais dire les tables) de ton application.
Modifié par tournikoti (18 Jun 2012 - 12:27)
Merci pour ton aide. Ça m'a beaucoup aidé.

J'ai complétement refait la base de donnée mais par chance, il ne manquait plus grand chose entre avant et après.
Sujet clos
Aller à