Javascript & display dynamique

Bonjour,

J'ai un petit soucis et j'aimerai des éclaircissements dans la mesure du possible. Voila je vous explique mon problème.

Je travaille sur un formulaire comprenant 3 étapes, mais j'aimerai que les 2 prochaines étapes n'apparaissent que si la première est correctement remplie. Bon pour l'instant je ne suis qu'au début mais je rencontre un soucis avec le principe.

J'ai créer une fonction JS afin de modifier le display none d'une Division appelée etape 2(dans mon fichier css) pour le passer en display block.

Seulement voila, l’événement ce déclenchant sur un onlick la division n'apparait que quelques secondes avant de retourner en display none.

Comment puis-je faire pour que ce changement soit permanent ?

(sachant que je devrait l'intégrer ensuite a une fonction avec une variable initialisée a false qui passera a true si tout est bien rempli et qui permettra d'afficher l'étape suivante de mon form)

Mon HTML

 
                             <p class="submit">
                                <button id="registerButton" type="submit" onClick="testModificationCSS();">Valider cette étape</button>
                            </p>

Mon CSS

#etape2 {
	
	display:none;
	
	}
	

Ma fonction

function testModificationCSS() {
	
	document.getElementById('etape2').style.display='block';
	
	}

PS : Je me doute que ce soit normal que ma Div réagisse de cette manière vu que c'est un événement onClick, mais je ne trouvais pas de solution a mon soucis sur le net


Merci d'avance pour votre aide
Modifié par Hiro (01 Nov 2014 - 01:42)

salut,
je pense qu'il y a quelques trucs à dire.
Commençons par ton problème à proprement parler. Si ta <div> ne s'affiche pas, cela n'a rien à voir avec le "onclick" mais est dû au fait que ton formulaire soit envoyé. Cela redirige donc ton site vers la page traitant le formulaire. Comme tu ne donnes pas de code complet, je ne fais que supposer que c'est vers la même page qu'il renvoi (en gros ta page est rechargée). Donc ton étape 2 s'affiche, puis ta page est rechargée. Tu as donc l'impression que ça ne dure que quelques secondes (le "onclick" en JS n'a rien à voir avec le ":active" en CSS).
Maintenant pour parler de la façon de faire, je pense que ce n'est pas la bonne. D'abord ta conception est trop dépendante de JS et question accessibilité, ce n'est pas top non plus (la sémantique ne m'a pas l'air appropriée aussi, ça ne sert à rien dans ton cas de mettre un <button> dans un <p> juste pour l'afficher sur une ligne, cela se fait en CSS).
Généralement on scinde les pages de formulaires en autant de phases de traitement que de nombre d'étapes. C'est à dire que tu traites d'abord les informations de la première étape, puis, si celles-ci dont validées, tu les stockes dans une session par exemple et tu rediriges vers la deuxième étape. Tout ça, en PHP. JavaScript ne doit être qu'un confort pour l'utilisateur et non quelque chose sur quoi se baser pour gérer ce genre de choses. Si j'ai envie de m'amuser à désactiver le JS, ton formulaire ne fonctionnera plus et ton site aura tout de suite l'air pas sérieux.

Bonjour Hiro,

Hiro a écrit :
Je ne construit pas pour le moment de site utilisant PHP, je m’entraîne actuellement au JS le PHP viendra ensuite.

Je ne comprends pas la logique, le langage PHP agissant en amont... Es-tu sûr de vouloir poursuivre ton apprentissage en ce sens ?

J'aurais tendance à dire :
JavaScript pour Fioritures
Php pour fonctions essentiels
(dans la mesure du possible).

Bonne remise en question
et bon dimanche.