faire un "Wizard" pour formulaire

Le script lui-même : 606 octets très exactement
réductible à 510 octets

Ok, bon ca marche bien, j'ai un peu mixé ton idée avec d'autres scripts
trouvés ci et là pour arriver au résultat que j'esperais. Peut etre qu'on
peut faire mieux, mais l'essentiel est que ca marche, et la c'est le cas et
je te remercie de ton aide précieuse.

http://www.elitemediacompany.com/nouveau-site/index.php?page=promotions&promo_id=1
(Le formulaire est en bas de page)

Sinon a part ca, j'essaye désespérément de cacher via javascript le cercle
orange "Commandez maintenant".
Par JS car je veux que si l'utilisateur a désactivé javascript, il voie
tout.

J'ai donc fait ca :

if (document.getElementById) {
document.write('<style type="text/css" media="all"> @import
url("css/hide.css"); </style>');
window.onload = HideAll;
}

function HideAll() {
document.getElementById("commandez_maintenant").style.display = "none";
document.getElementById("step2").style.display = "none";
document.getElementById("step3").style.display = "none";
document.getElementById("step4").style.display = "none";

Dans la CSS "hide.css" les DIV sont en display:none

T'as une idée pourquoi ca ne marche pas ?
}

Le script lui-même : 606 octets très exactement
réductible à 510 octets

Ok, bon ca marche bien, j'ai un peu mixé ton idée avec d'autres scripts
trouvés ci et là

Ouais j'ai vu que tu n'avais pas vraiment simplifié

pour arriver au résultat que j'esperais. Peut etre
qu'on peut faire mieux, mais l'essentiel est que ca marche, et la c'est
le cas et je te remercie de ton aide précieuse.

http://www.elitemediacompany.com/nouveau-site/index.php?page=promotions&promo_id=1

Si je puis me permettre : je préfère nettement l'ancien

(Le formulaire est en bas de page)

et tout prototype.js en haut de page !
(une chance qu'il fût déjà en cache !)

Sinon a part ca, j'essaye désespérément de cacher via javascript le
cercle orange "Commandez maintenant".
Par JS car je veux que si l'utilisateur a désactivé javascript, il voie
tout.

J'ai donc fait ca :

if (document.getElementById) {
document.write('<style type="text/css" media="all"> @import
url("css/hide.css"); </style>');
window.onload = HideAll;
}

Eh non, ce n'est pas ce que tu as sur ta page ... J'y vois :

window.onload = HideAll;
window.onload = specialEffect;

à mon idée, on n'a droit qu'à un seul window.onload
(comme on a droit qu'à un seul onclick pour chaque objet/élément)

function HideAll() {

et pourquoi tu n'utilises pas ce que tu as en hideShow.js ?

document.getElementById("commandez_maintenant").style.display = "none";
document.getElementById("step2").style.display = "none";
document.getElementById("step3").style.display = "none";
document.getElementById("step4").style.display = "none";

Dans la CSS "hide.css" les DIV sont en display:none

Alors corriger derechef et virer cette FdS
ou tout au moins tous les display sinon :
- le corrigé ne fonctionnera pas
- en contradiction avec idée de tout displayer si pas de JS

T'as une idée pourquoi ca ne marche pas ?

oui
(cf + haut)
(corrigé + bas)

}

corrigé 'hideShow.js' :

/******/
// au cas où prototype.js ou scriptaculous.js
// n'auraient pas ce qu'il faut :

function styleId(id) {
return document.getElementById? document.getElementById(id).style :
document.layers? document.id :
document.all? document.all.id.style :
'';
}

// bien que je me demande pourquoi tu t'embêtes avec ça
// alors que tu as ensuite un JS qui limite à document.getElementById
// alors que prototype.js lui-même s'en moque complètement !
// ce qui nous donne en se servant de prototype.js :

function styleId(id) { return $(id).style }

var ids=new Array('step1','step2','step3','step4');

function switchid(id){
hideallids();
showdiv(id);
}

function hideallids(){
for (var i=0;i<ids.length;i++) hidediv(ids[i]);
}

function hidediv(id) { styleId(id).display = 'none'; }

function showdiv(id) { styleId(id).display = ''; }

/*****/



Pour en revenir à tes moutons :

<script type="text/javascript">
if (document.getElementById) {
/* non ! pas besoin de cacher via css !
document.write('<style type="text/css" media="all">'+
' @import url(css/hide.css); </style>');
*/
window.onload = function() {
hidediv('commandez_maintenant')
switchid('step1');
// me demande à quoi sert cet effet sur un div absent ?
new Effect.Grow('commandez_maintenant', {
duration: 1.5,
direction: 'bottom-left',
opacityTransition: Effect.Transitions.linear,
delay: 3});
new Effect.Pulsate('prix', {delay: 5});
}
}
</script>


Pour le truc de vérification 'validation.js'
j'aimerais, après le pulsage du champ, voir mon carret dans le champ
(les styles sont tellement discrets que je ne vois pas bien où je suis,
mon réflexe est d'aller cjiquer dans le champ pour voir le pointeur
d'insertion et savoir que je peux clavioter)

essayer :
adresse.focus();
new Effect.Pulsate('adresse');
adresse.select();


--
Stephane Moriaux et son [moins] vieux Mac

T'as une idée pourquoi ca ne marche pas ?

oui
(cf + haut)
(corrigé + bas)

T'es extra Stephane !
Mon JS a fait un régime total, perte de poids considérable !

Non, sérieux, je sais pas comment tu fais, ca m'énerve ca car en PHP je
touche ma bille mais la en JS ca me sort part les cheveux. En tout cas ta
solution marche a merveille, je l'ai mise en ligne et t'en remercie.

Bon, comme j'aime chercher des poux la ou il n'y en a pas, dans mon JS
validation.js, je constate que je repete chaque fois la meme chose, donc je
me disais qu'une fonction serait bienvenue, un truc du genre :

isInvalid(element, message); et qui remplacerait tout ce que je fais pour :

if (adresse.value == isEmpty) {
alert("Le champ "Adresse" doit être obligatoirement rempli pour
continuer.");
adresse.focus();
adresse.style.border = "solid red 1px";
new Effect.Pulsate('adresse');
adresse.select();
return false;
}

Je pourrai y faire appel de cette facon :

if (adresse.value == isEmpty) {
isInvalid(adresse.value, "Le champ "Adresse" doit être obligatoirement
rempli pour continuer."); return false; }

J'ai donc crée la fonction comme ceci :

function isInvalid(element, message) {
alert(message);
element.focus();
element.style.border = "solid red 1px";
new Effect.Pulsate(element);
element.select();
}

Ca marche, sauf pour la ligne :

new Effect.Pulsate(element);

Il doit y avoir un probleme de guillements, mais je ne trouves pas, peux tu
m'aider une derniere fois ?

Christophe

Ca marche, sauf pour la ligne :

new Effect.Pulsate(element);

Bon, erreur de ma part, en fait ca marche pas pour les autres trucs, ca
marchait juste pour le message d'erreur avec le alert(message)

Non, sérieux, je sais pas comment tu fais, ca m'énerve ca car en PHP je
touche ma bille mais la en JS ca me sort part les cheveux.

Pourtant en JS c'est bp plus facile : il y a énormément moins de
fonctions particulières.

Bon, comme j'aime chercher des poux la ou il n'y en a pas,

Tien ! à ce propos :
- 'tain ! 200 balles juste pour essayer je trouve ça très cher
- purée ! j'ai raté la promo (finie au 30 mai)

Une erreur ici :
<label for"email">Mode de paiement (*)</label>
au lieu de :
<label for"mode_paiement">Mode de paiement (*)</label>

dans mon JS
validation.js, je constate que je repete chaque fois la meme chose, donc
je me disais qu'une fonction serait bienvenue,

Il me semblait, en effet.

un truc du genre :

Comme il n'est pas dans mes intentions d'apprendre la lib 'prototype'
par cœur ces jours-ci ...
Et bien que tu ne facilites pas les choses avec ces tables ...

function validateCommandePromotion() {
var elements = $('step1').getElementsByTagName('td');
var labels = $('step1').getElementsByTagName('label');
var message='';
for(var i=0;i<elements.length;i++)
{
var element = elements[i].getElementsByTagName('*')[0];
element.style.borderColor = '';
message = labels[i].innerHTML;
if(message.indexOf(')')>0)
{
var ok = false, verbe = 'rempli(e)';
if(element.tagName.toLowerCase() !='select')
{
if(element.value.length>0) ok = true;
}
else
{
verbe = 'choisi(e)';
if(element.options.selectedIndex > 0) ok = true;
}
if(!ok)
{
message = message.substring(0,message.length-4);
message += 'ndoit être obligatoirement ' + verbe +
' pour continuer.';
alert(message);
element.focus();
element.style.borderColor = 'red';
new Effect.Pulsate(element.id);
setTimeout(function(){element.select()},3000);
return false;
}
}
}
switchid('step2');
}



et

<button class="float_right" type="button"
onclick="validateCommandePromotion();">Suivant >>></button>

J'ai donc crée la fonction comme ceci :

function isInvalid(element, message) {
alert(message);
element.focus();
element.style.border = "solid red 1px";
new Effect.Pulsate(element);
element.select();
}

Ca marche, sauf pour la ligne :

new Effect.Pulsate(element);

new Effect.Pulsate(element.id);



--
Stephane Moriaux et son [moins] vieux Mac

Pourtant en JS c'est bp plus facile : il y a énormément moins de fonctions
particulières.

Oui, c'est ce que je constate au fur et a mesure, mais j'ai trop les
methodes du PHP en tete et ca m'apporte pas mal de confusion. En fait ce que
je vais faire, c'est acheter un bon bouquin sur JS et tout reprendre depuis
le début.

Tien ! à ce propos :
- 'tain ! 200 balles juste pour essayer je trouve ça très cher
- purée ! j'ai raté la promo (finie au 30 mai)

J'espere que tu as bien compris que c'etait du remplissage... sur le site
publique il n'y aura bien évidement pas ce genre de trucs !

Une erreur ici :
<label for"email">Mode de paiement (*)</label>
au lieu de :
<label for"mode_paiement">Mode de paiement (*)</label>

Je l'avais vu celle-ci, je l'ai corrigé en local, mais j'avais pas envoyé
les pages sur le serveur.

Je vais tester ton script dans l'apres midi, je le mettrai en ligne dans la
soirée.

Merci pour ton aide

Je vais tester ton script dans l'apres midi, je le mettrai en ligne dans
la soirée.

l'est en démo ici :
http://stephane.moriaux.perso.orange.fr/truc/pourtest2.htm

restent qques caffouillages d'effets ...!

--
Stephane Moriaux et son [moins] vieux Mac