Exploiter un formulaire avec survol ou clic sur une valeur

Bonsoir à tous,
Quelqu’un peut-il m’aider à programmer la situation suivante ?,
Après un choix dans un formulaire de recherche rapide apparaît un tableau sous forme de colonnes avec les coordonnées des clients. Je viens d’y ajouter une dernière colonne ‘’ MaPage’’ qui permet d’afficher soit la valeur ‘oui ‘ soit ‘non’. J’aimerais dès le survol ou un clic sur ‘oui’ qu’apparaisse une page limitée(texte) qui permet au visiteur de lire les particularités de la page et retour normal au tableau après lecture. Cette Page viendrait d’une bdd avec table’MaPage’.
Sincères remerciements pour votre aide.

Claudine.

Bonjour,

Par nouvelle page vous entendez pop-up ? ou pop-in ? Quelle partie du développement vous pose problème ?

Bonsoir SylvainPV
Après choix dans mon fichier modele…..php, un tableau s’affiche avec notamment la dernière colonne dénommée ‘MaPage’ qui peut afficher ‘oui’ ou ‘non’.
Après clic sur la valeur ‘oui’, j’aimerais qu’une petite page s’affiche pour que les clients soient renseignés sur les heures d’ouvertures du commerce et éventuellement des offres du moment .
Dans un premier temps, pourriez-vous m’insérer au bon endroit le code qui me permettra après clic de faire apparaître cette page qui à son tour pourra être programmée pour aller chercher dans la base de données les informations ‘Page’(heures d’ouverture).Je ne suis pas suffisamment initiées pour indiquer en code et au bon endroit :
If option value = ‘oui ‘ affiche la page.
Quant au choix de la pop, je n’y connaît pas grand chose et vous demande votre avis,
Je suppose qu’il est préférable une pop-in sachant que cette base de données est énorme et par conséquent pas mal de oui donc de pages à charger.
Je me suis permis de joindre le fichier.
Merci pour votre compréhension et mes plus vifs remerciements
Claudine

Avant d'aller plus loin je vous invite à bien distinguer la partie client de la partie serveur pour vos développements. Sur le forum JavaScript, nous ne traiterons que des aspects côté client donc pas de code PHP et pas d'explications sur les bases de données et modèles en amont. Si vous avez besoin d'aide sur la partie serveur, créez un nouveau topic sur le forum PHP.

Une pop-in semble effectivement plus indiqué qu'une pop-up (si vous ne voyez pas la différence, lisez ça), mais cela signifie qu'il faudra requêter le serveur et charger vos données en AJAX (pas de changement de page côté navigateur). Avez-vous déjà travaillé avec AJAX ?

Concernant ce développement, en écartant volontairement la partie serveur, voici une décomposition des tâches :
1) exécuter une fonction au clic sur l'élément voulu
2) créer et ajouter le HTML de la pop-in dans le document
3) styliser et positionner la pop-in
4) coder la fermeture de cette pop-in

Les étapes 2 à 4 peuvent être simplifiées en vous servant d'une bibliothèque existante, en voici un large choix : http://jster.net/category/windows-modals-popups

Bonjour SylvainPV

Désolé pour cette réponse tardive, mais j'ai essayé de suivre vos conseils mais malheureusement sans résultats. Je crains fort de ne pas être à la hauteur et cela d'autant plus que je n'y connaît rien en Ajax.
En conséquence , j'ai tenté d'exécuter une pop-up avec fonction au clic sur l'élément 'oui' de 'MaTable' mais malheureusement à chaque fois mes listes liées ne fonctionnent plus.
Je précise que je travaille sur Dreamweaver8 avec affichage des comportements, etc....
Bref même avec une pop-up je n'y arrive pas et attend avec impatience votre aide car il m'est difficile de selectionner l'élément voulu, ce dernier "oui "ou "non" est repris en chargement par un tableau extrait de ma base données. et un clic sur oui ne donne rien en conséquence.
Puis-je compter sur votre aide?
Mes plus vifs remerciements
Claudine

Bonjour Claudine,

J'insiste sur le besoin de cerner et décomposer le problème en sous-ensembles. Vous abordez trop de sujets différents à la fois (outillage, bases de données...). Non seulement je n'ai pas assez d'infos précises pour essayer de vous aider en l'état, mais de plus ce sujet ne pourra pas resservir à de futurs visiteurs faisant face à un problème similaire tant que le problème ne sera pas explicité et précisé. J'ajouterai aussi que je n'ai pas le monopole des réponses. Plus votre problème sera détaillé et riche en informations, plus vous aurez de chances d'obtenir une réponse de ma part ou de la part des dizaines d'autres forumeurs volontaires ici.

Merci donc d'en revenir à la décomposition proposée et d'aborder les points dans l'ordre, en exposant les codes associés et en détaillant précisément les problèmes rencontrés.

Bonsoir SylvainPV
Désolé de vous solliciter de part mon ignorance.
Voici une partie de Form.php

Code:

---

1 2 3 4 5 6 7 8 9 10

<input type="text" id="SiteWeb" name="SiteWeb" value="<?php echo (isset($_SESSION['post_form']['SiteWeb'])) ? $_SESSION['post_form']['SiteWeb'] : '' ?>" /> </p> <p> Voulez-vous une page web personnelle ? <select name="MaPage" > <option value="oui">oui</option>   <option value="non">non</option> </select>

---

Voulez-vous m'insérer le code javascript pour afficher une page'Horaire' lorsque je clique (onclick) sur option value 'oui'

J'ose espérer me faire comprendre avec un peu plus de précision
Remerciements

Claudine

La balise <select> correspond à une liste déroulante, pas à des boutons. Vous pouvez exécuter une fonction au changement de valeur de cette liste avec l'évènement "change" sur <select>, ou alors ajouter un bouton derrière cette liste pour valider le choix. Généralement les formulaires ont un bouton de soumission à la fin, n'est-ce pas ce que vous cherchez ?

Bonsoir SylvainPV

Citation:

---

""La balise <select> correspond à une liste déroulante, pas à des boutons. Vous pouvez exécuter une fonction au changement de valeur de cette liste avec l'évènement "change" sur <select>, ou alors ajouter un bouton derrière cette liste pour valider le choix. Généralement les formulaires ont un bouton de soumission à la fin, n'est-ce pas ce que vous cherchez ? ""

---

OK, c'est bien cela.
Oui bien sur, il s'agit d'une liste déroulante .
Comment exécuter la fonction au changement de valeur de cette liste avec l'évènement "change" sur <select>?
Je mesure la patience face à une personne du 4ème âge qui essaye de rester dans le bain.
Sincères remerciements
Claudine

A chaque évènement dans un document HTML est associé l'attribut équivalent "on"+évènement, donc pour exécuter une fonction au changement de valeur sur une liste déroulante, c'est l'attribut onchange du select :

Code:

---

<select name="MaPage" onchange="onSelectChange(this);">

---

Code:

---

1 2 3

function onMaPageChange(select){ alert(select.value); // doit afficher oui ou non selon le choix }

---

Bonjour SylvainPV

Merci pour ces quelques lignes, mais je me rends compte que ça ne résoudra pas mon problème.
Ne me prenez pas pour une vieille folle, je le suis qu'à moitié. Le problème peut s'expliquer par la complexité(pour moi) étant donné qu'il ya de nombreux formulaires avec tableaux et listes imbriquées Le tout date déjà de quelques années.
Bref,je crois que maintenant, j'ai cerné le problème à résoudre et je reprend votre ordre d'exécution, à savoir:
1) fonction au clic sur l'élément "oui" de MaPage
En effet, le logiciel ci-joint voir ligne 74 affiche déjà 'oui' ou 'non' dans la colonne" MaPage" du tableau.
Par conséquent, il faudrait une ligne du genre :

Code:

---

If $row[MaPage]="oui" et la suite....(la fonction clic sur oui pour faire apparaître la future pop-in)

---

voilà la ligne 74 de ModelTabConfirm.php

Code:

---

1 2 3 4 5

echo '<td bgcolor="#CCCCCC">'.$row["MaPage"].'</td>'; echo '</tr>'."\n"; } echo '</table>'."\n"; // fin du tableau.

---

et passer aux 3 étapes suivantes.

Merci pour votre indugence
Claudine

Comme précisé dans mon premier message, nous ne parlerons pas de PHP ici. Le PHP ça se passe côté serveur, ici nous parlons de votre page côté client. Lorsque l'utilisateur choisit une valeur dans la liste déroulante, le serveur n'en a aucune idée tant qu'une requête ne lui est pas parvenue. Il s'agit donc pour cette première étape de JavaScript uniquement.

La condition que vous évoquez est donc à retranscrire dans le code JavaScript que je vous ai donné, à savoir :

Code:

---

1 2 3 4

function onMaPageChange(select){ if(select.value == "oui"){ window.open("http://developpez.com"); } }

---

Voilà qui devrait ouvrir une pop-up lorsque vous sélectionnez "oui" dans la liste. Une fois que ceci fonctionnera, vous aurez deux choses à faire :
- remplacer "developpez.com" par l'URL de la page avec les informations voulues (générer cette page en fonction de paramètres querystring dans l'URL est un tout autre problème, qu'il faudra traiter sur le forum PHP si vous n'y parvenez pas)
- remplacer la pop-up par une pop-in pour les questions d'esthétique et de praticité précédemment évoquées

Bonjour,

Je crois que Claudine parle en fait de la table générée par la requête. Le tableau des résultats.
Dans ce tableau, une colonne contient 'oui' s'il y a un site web.
Je pense qu'elle souhaite ouvrir une page d'informations sur le site référencé, si l'utilisateur clique sur 'oui'.

Si c'est le cas, Claudine, la méthode la plus rudimentaire serait de générer le tableau des résultats comme ceci :

Code:

---

1 2 3 4 5 6 7 8 9 10

<table> <tr> <td>ligne 1 ; cellule 1</td> <td><a href="..." target="_blank">oui</a></td> </tr> <tr> <td>ligne 2 ; cellule 1</td> <td>non</td> </tr> </table>

---

Si lors de la génération de votre page, vous avez 'oui' dans la cellule qui vous intéresse. Vous pouvez encadrer ce oui dans une balise 'a' qui permet de créer un hyperlien. Ce lien s'ouvrira, en fonction de la valeur indiquée dans l'attribut 'target' :
- '_blank' : à chaque fois dans une nouvelle fenêtre ou onglet, l'utilisateur pourra fermer ou garder cette page ouverte ;
- '_self' : dans la même fenêtre ou onglet. La page d'information remplacera la page actuelle, l'utilisateur devra revenir à la page précédente manuellement ;
- '<nom>' : créera, si elle n'existe pas, une nouvelle fenêtre ou un nouvel onglet. Toutes les pages d'informations s'ouvriront dans la même fenêtre ou onglet. '<nom>' ne doit pas commencer par un souligné '_'.

L'attribut 'href' de la balise 'a' permet d'indiquer l'url de la page que vous souhaitez afficher.

C'est une méthode simple, efficace, mais rudimentaire. SylvainPV vous a indiqué des alternatives, pour ouvrir une fenêtre, plus adaptées au web contemporain.

Bien sûr s'il faut juste un simple lien, inutile de chercher compliqué avec JavaScript. Mais comme Claudine a montré un code de formulaire avec un <select>et confirmé qu'il s'agissait d'une liste déroulante, je suis un peu confus... Demande peu claire, réponse de travers :?

Bonjour Lysandro
En effet,il y a des 'oui' pour les clients qui ont opté pour une page d'information, mais également des 'non'.
Le problème que je rencontre c'est de faire le lien uniquement sur les 'oui' qui sont dans le tableau qui apparaît et qui a été rechercher ces valeurs dans la table d'une bdd lors de l'inscription du client.
Or si j'applique le code proposé, il apparait dans le tableau un 'oui 'souligné partout! en double de celui exsistant.
Ou bien ce qui est probable, je ne l'adapte pas correctement votre code dans la page "modeleTabConfirm.Php.
Dans ce cas,voulez-vous le faire?
Mes plus vifs remerciements

claudine

Quelque chose comme remplacer

Code:

---

echo '<td bgcolor="#CCCCCC">'.$row["MaPage"].'</td>';

---

par

Code:

---

1 2 3 4

if ( $row["MaPage"] == "oui" ) echo '<td bgcolor="#CCCCCC"><a href="'.?.'">'.$row["MaPage"].'</a></td>'; else // $row["MaPage"] != "oui" echo '<td bgcolor="#CCCCCC">'.$row["MaPage"].'</td>';

---

sachant que je ne connais rien à php ... le ? représente l'url de la page que je ne connais pas.

Le mieux serait de s'adresser à des connaisseurs de php :)

Bonsoir Sylvain PV
Je suis désolée de toutes ces confusions et vous n'avez certainement pas à pâtir de mes demandes mal formulées;
Mes problèmes viennent avec certitude sur la confusion entre clients et serveur(j'ai enfin compris ma bévue) Merci SylvainPV

Je reviens donc sur ce que vous m'aviez proposé et j'ai essayé de caser le codeJS pour ouvrir une pop-up lorsque je selectionne "oui" dans la liste. Malheureusement cela ne fonctionne pas, pas d'erreur donc sans effet. A moins que je n'ai pas indiqué votre code au bon endroit! Le 'oui' du tableau n'a pas de lien ni réaction au click; A moins qu'il faille y ajouter la fonction.
A mon avis , on ne peut travailler avec la liste déroulante de l'inscription car les résultats de "MaPage" sont fournis avec choix('oui 'ou 'non') lors de l'inscription et enregistré dans la bdd avec le serveur easyphp. Par la suite lorsque le client clic sur"Recherche rapide" apparaît un tableau qui reprend les coordonnées dont 'Ma page' avec soit 'oui 'ou soit 'non 'comme résultat
Il faudrait donc qu'un clic dans ce tableau sur 'oui' fasse apparaître une pop-in.
En conséquence, je crois que j'ai mal formulé le titre qui serait plûtot:
Comment exploiter un tableau par survol ou clic sur un element d'une colonne? pour faire apparaître une pop-in . je crois qu'enfin ce soit plus clair!
J'attends avec impatience vos suggestions.
Encore une fois, mes regrets sincères et bonnes fêtes de Noël
Claudine

Bonjour SylvainPV,
Je me permets d'essayer de vous recontacter car j'ai appliqué vos lignes de code conseillée et malheureusement rien ne fonctionne.
En conséquence ci-joint un mini résumé auquel je vous demande de me dire où est mon erreur.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<body> <label for="MaPage">MaPage</label> <select name="MaPage" size="1" onChange="onSelectChange(this);"> <option selected>choisissez</option>   <option value="oui">oui</option>   <option value="non">non</option>   </select>   <script type="text/javascript"> <!--          function onMaPageChange(select)          {          alert(select.value);//doit afficher oui ou non selon le choix dans la liste          }          {            if(select.value == "oui")            {       window.open("http://developpez.com");    } } </script> </body>

---

D'avance, je vous remercie car je ne vois aucune solution.

Claudine

Bonjour,
il te faudrait utiliser la fonction que tu as définie à savoir onMaPageChange, donc

Code:

---

1 2 3 4 5

<select name="MaPage" size="1" onChange="onMaPageChange(this);"> <option selected>choisissez</option> <option value="oui">oui</option> <option value="non">non</option> </select>

---

Bonjour NoSmoking,
merci pour cette réponse qui affiche oui ou non par message comme programmé avec Alert
Cependant,la valeur sélectionnée 'oui' n'affiche pas le site de developpez.com ou tout autre page, c'est mon problème depuis plus d'un mois.

Code:

---

1 2 3 4 5

{ if(select.value == "oui") { window.open("http://developpez.com"); }

---

Où est l'erreur?
Mes remerciements pour votre aide.
claudine

Code:

---

select.value

---

select = ??

En indentant bien ton code tu verrais tout de suite où ce trouve ton erreur, sur base de la fonction mise avant

Code:

---

1 2 3 4 5 6

function onMaPageChange(select) { alert(select.value); //doit afficher oui ou non selon le choix dans la liste } { if (select.value == "oui") { window.open("http://developpez.com"); }

---