11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Liste de Formulaire sans Bouton "Submit" : "on

Salut !

Voila je suis en train de travailler sur style switcher à base de php.

Pour le moment j'ai remplacé le bouton submit par une image ... Ce que j'aurais besoin c'est de ne pas avoir de bouton du tout (au moins visuellement) c'est à dire que lorsque l'on clique sur ete ou hiver le changement se fasse automatiquement.

Il me semble qu'en javascript il faut utiliser onchange, mais vu que mon style switcher utilise du php, je bloque la ...

Pour le moment tout ce que j'ai réussi à faire, c'est d'aller directement sur l'adresse de ma feuille de style ... hors ce n'est pas vraiment le but ^^

Merci à vous pour vos conseils Smiley smile 


<form action="switch.php" method="post" id="switcher">
<div id="habillage">
<select id="style" name="style" title="Choisissez un style" >
<option value="ete"<?php if ($_COOKIE['feuilleStyle'] == 'ete') { echo ' selected="selected"'; } ?>>Ete</option>
<option value="hiver"<?php if ($_COOKIE['feuilleStyle'] == 'hiver') { echo ' selected="selected"'; } ?>>Hiver</option>
</select>
<input type="hidden" name="redirection" value="http://<?=htmlspecialchars($_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'])?>" />
<input type="image"  src="visuels/ok.png" alt="Validation du formulaire" />
</div>
</form>

Modifié par yank (11 Mar 2008 - 13:26)
koala64 a écrit :
Salut, Smiley smile

As-tu consulté ce tuto ?

Salut ^^

Ben oui, mais je ne veux pas une "liste" de liens ... en fait j'utilise une "liste déroulante" si on peut dire ...

Effectivement c'est un peu le système des liens du tuto que je veux mais à l'intérieur de ma liste ...
Modifié par yank (11 Mar 2008 - 07:59)
Modérateur
Et pourquoi ne pas partir du code du tuto tout en ajoutant un bout de code JS qui donne l'apparence d'une liste déroulante à cette fameuse liste ?
koala64 a écrit :
Et pourquoi ne pas partir du code du tuto tout en ajoutant un bout de code JS qui donne l'apparence d'une liste déroulante à cette fameuse liste ?

Hum ... et bien pourquoi pas ...

Dis on que jusqu'à présent j'utilise mon style switcher, et j'avoue que je l'aime bien, question d'habitude je pense Smiley lol

Donc oui pourquoi pas essayer un autre style pour changer un peu Smiley smile

Dis on que la tout de suite c'est surtout le temps qu'il me manque, mais enfin de compte le tuto à l'air assez facile en plus ...

Le style switcher du tuto changerai quelque chose par rapport à mon switcher ? (à part bien entendu le fait que ce soit une simple liste)

Et ça donnerai quoi avec un bout de code javascript en plus ?

Smiley smile
Modérateur
Le principe utilisé dans le tuto est un peu similaire au tien bien que les données soient envoyées via la méthode get.

Concernant l'ajout de code, il faudrait, au chargement de la page :

- ajouter une classe "hasJS", par exemple, sur document.documentElement, ce qui te permet de surcharger tes propriétés de style...
- créer un paragraphe contenant un span avec le libellé du style actif et un bouton de contrôle pour faire apparaitre/disparaitre tous les styles disponibles

En gros, si tu as d'origine :
<div id="styleswitcher">
	<ul>
		<li><a href="index.php?style=defaut">mon style par défaut</a></li>
		<li><a href="index.php?style=gazon">On se met au vert</a></li>
		<li><a href="index.php?style=ocean">On plonge dans l'océan</a></li>
	</ul>
</div>
il faut que tu le transformes, via JS, en :
<div id="styleswitcher">
	<p>
		<a href="#" title="Changer de style">
			<span>mon style par défaut</span>
			<img src="fleche.png" width="10" height="10" alt="Changer de style" />
		</a>
	</p>
	<ul>
		<li><a href="index.php?style=defaut" class="current">mon style par défaut</a></li>
		<li><a href="index.php?style=gazon">On se met au vert</a></li>
		<li><a href="index.php?style=ocean">On plonge dans l'océan</a></li>
	</ul>
</div>
Le p doit être encadré d'une bordure. La liste, quant à elle, doit être cachée.
Au clic sur le lien "Envoyer", tu fais apparaitre la liste en position absolute et tu affectes un background légèrement grisée au lien qui comporte la classe "current".
Au clic sur l'un des liens, tu transformes ton code en :
<div id="styleswitcher">
	<p>
		<a href="#" title="Changer de style">
			<span>On plonge dans l'océan</span>
			<img src="fleche.png" width="10" height="10" alt="Changer de style" />
		</a>
	</p>
	<ul>
		<li><a href="index.php?style=defaut">mon style par défaut</a></li>
		<li><a href="index.php?style=gazon">On se met au vert</a></li>
		<li><a href="index.php?style=ocean" class="current">On plonge dans l'océan</a></li>
	</ul>
</div>
... par exemple.
Modifié par koala64 (09 Mar 2008 - 11:59)
Pour finir je vais rester sur mon style switcher, car manque de temps.

Par contre, pour le prochain je testerai ce style switcher.

Quoiqu'il en soit, Concernant ma liste, n'y a t'il pas de solution toute simple ?

Je pense que ça concerne cette ligne :

<input type="hidden" name="redirection" value="http://<?=htmlspecialchars($_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'])?>" />
<input type="image"  src="visuels/ok.png" alt="Validation du formulaire" />


Si j'enlève la 2nde ligne et que dans la première je mets un truc du genre "onChange="..." et bien cela fonctionne, par contre c'est juste que je ne mets pas la bonne chose entre les "guillemets" après onChange ce qui fait que lorsque l'on choisi "ete" ou "hiver" cela nous redirige vers la feuille de style ... c'est presque ça Smiley langue sauf que je veux que ce soit la feuille de style qui s'applique au site Smiley lol

J'ai trouvé ceci également, c'est quelque chose qui s'en rapproche sauf que le résultat n'est pas le bon à cause de la redirection justement par php .... (le value)

onchange="this.form.submit()"


Quelqu'un a t'il une solution ?

Quelqu'un qui adore le javascript et une pointe de php ? Smiley biggol

Merci et bonne journée !
Modifié par yank (10 Mar 2008 - 10:37)
Que quelqu'un m'arrete si je dis une connerie mais, quitte à mettre du javascript, pourquoi recharger la page? Si je comprends bien c'est juste la feuile de style qu'il faut "switcher", la structure meme de la page ne changeant pas (ce qui est plutot rassurant).

J'aurais donc fait un truc du style :

dans la balise <head> :
<link rel="stylesheet" type="text/css" href="MaFeuilleDeStyleNumberOne.css" [b]id="styleLink"[/b]/>


puis dans le <body>:
<select onchange="document.getElementById('styleLink').href = this.value">
<option value="MaFeuilleDeStyleNumberOne.css">Style 1</option>
<option value="MaFeuilleDeStyleNumberTwo.css">Style 2</option>
<option value="MaFeuilleDeStyleNumberThree.css">Style 3</option>
</select>


Suivi éventuellement d'une pitite requete Ajax pour aller inscrire les données dans la session de l'utilisateur pour proposer le style choisi par défaut sur la page suivante...

Avantage : pas de rechargement de page Smiley lol
Inconvénient : Javascript + nécéssitée d'envoyer tout de meme une requete pour mémoriser la séléction Smiley eek
Modifié par skywalk3r (10 Mar 2008 - 11:24)
Modérateur
a écrit :
Que quelqu'un m'arrete si je dis une connerie mais, quitte à mettre du javascript, pourquoi recharger la page?
Non, en effet... mais si le styleswitcher est optionnel, autant le faire complètement en JS. A l'inverse, si ce n'est pas optionnel, il est préférable de conserver le styleswitcher en php et d'ajouter une surcouche JS afin d'éviter ce rechargement de page. Ainsi, on ne se retrouve pas avec une liste inutile lorsque JS est inactif...

a écrit :
Suivi éventuellement d'une pitite requete Ajax pour aller inscrire les données dans la session de l'utilisateur pour proposer le style choisi par défaut sur la page suivante...
Mieux vaut se servir d'un cookie plutôt que des sessions, non ?
Cela permet de conserver le style choisi, y compris lorsque l'utilisateur a quitté son navigateur avant de revenir sur le site et toute action n'a alors lieu que du côté client.

A noter, par ailleurs, que pour les actions sur le onchange, certains agents utilisateurs ont des problèmes d'interprétation... (pas d'exemple sous la main)
Et bien en fait je ne tiens pas forcement (pour ce site en tout cas) à changer mon style switcher ...

Effectivement j'utilise un système de cookies simple et efficace.

A la base j'avais appris sur ce tuto : Style switcher
A l'époque le tuto n'existait pas sur alsa ...

Mais concernant ma liste déroulante, je suis persuadé qu'il existe un moyen très simple, non ?
Je pense que ça à un rapport avec le 
input type="hidden"
et le 
OnChange=""
Mais je ne sais pas l'utiliser ... Enfin j'ai réussi à le faire avec une liste toute simple à base d'html mais la ou je bloque c'est que dans ma liste il y a une redirection php ...

Il y a certainement moyen sans forcement tout changer mon style switcher, non ? Smiley ohwell
a écrit :
Mieux vaut se servir d'un cookie plutôt que des sessions, non ?
Cela permet de conserver le style choisi, y compris lorsque l'utilisateur a quitté son navigateur avant de revenir sur le site et toute action n'a alors lieu que du côté client.


+1

En effet, j'oublie souvent qu'on peut aussi manipuler les cookies côté client (ce qui parait pourtant évident) Smiley lol
Et bien voila la solution tout simplement :

<select id="style" name="style" title="Choisissez un style" onchange="this.form.submit();">


Smiley cligne
Modifié par yank (11 Mar 2008 - 13:27)
Sujet clos
Aller à