Discussion :

[cyscek]

Bonjour à tous,

Ma question doit avoir une réponse qui a dû être traité souvent, je pense que j'ai surtout un problème de "langage" pour trouver ce que je veux sur google ou ici.

J'ai une page en php, avec un formulaire. Jusqu'ici, rien de bien méchant, sauf que le nombre d'informations à entrer pour la personne va avoisiner les 50 champs. Du coup, je voulais "séparer" mes champs en deux groupes, et au lieu de faire deux pages php, faire ça en javascript.

L'idée est donc d'avoir mes 25 premiers champs sur la première page, un bouton "suivant", et quand on clique dessus, on ne quitte pas la page mais on affiche les 25 autres champs, avec un bouton valider, et un bouton précédent. Mais je ne sais pas comment on peut appeler une telle "pagination" sur une même page web, du coup je n'ai pas trouvé d'exemples. Après je mettrai en place la validation des champs en javascript, mais ça je sais faire .

[headmax]

Une solution parmi tant d'autres :
Un formulaire qui regroupe tout, deux div conteners de tes éléments :
div1 page1 avec tes 25 elements html (inputs, select...) en display:block (visible).
div2 page2 avec tes 25 autres elements html en dispay:none (non visible).
Lorsque tout les elements html de ta page1 on bien été remplit tu réactive le click du bouton suivant se qui masquera la div1 (page1) et affichagera la div2 (page2) pour la suite de la saisit du formulaire.

Pistes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
//css
.visibleclassCss{
 display:block;
}
.hiddenclassCss{
 display:none;
}
// Par la balise style prioritaire :
document.getElementById("idDiv1").style.display = "block"; //visible
document.getElementById("idDiv2").style.display = "none"; //hidden
 
// Ou par les class css :
document.getElementById("idDiv1").className = "visibleclassCss";
document.getElementById("idDiv2").className = "hiddenclassCss";

Bonne chance a+.