Comment faire pour afficher/masquer les sections d'un formulaire HTML

J'ai un formulaire HTML qui lorsqu'il est soumis envoie un email avec toutes les questions et réponses à l'aide de PHP.

J'ai besoin pour briser le formulaire en bas comme c'est trop long. J'ai besoin d'un seul bouton submit et pour la forme de charger qu'une seule fois. De toute évidence, cela signifie que j'ai besoin d'utiliser le JavaScript afficher/masque.

J'ai essayé d'utiliser de nombreux types différents, mais je n'arrive pas à travailler correctement avec mon formulaire. Il est très grand et semble être très compliqué de travailler avec afficher/masquer 🙁

J'ai utilisé afficher/masquer les divisions avant de, mais pas les tables.

Quelqu'un a tout ce qui peut aider?

Ce que j'aimerais c'est,

  • Un bouton "suivant" qui vous emmène vers une autre section de la forme.
  • Tandis que dans la prochaine section, vous pouvez revenir à la section précédente ou passer à une autre section.
  • La dernière section de contenir précédente ou de la soumettre.

Merci d'avance.

Êtes-vous à l'aide d'un tableau de mise en page pour votre forme?
Ce qui est plus compliqué avec une disposition de table vs sans tableau en termes d'afficher/masquer le javascript? Doit être la même. Pouvez-vous préciser ce que vous avez essayé?

OriginalL'auteur John Vasiliou | 2012-03-01

  1. 7

    C'est tout à fait à la demande commune. Voici une façon de

    • Casser votre formulaire dans les pages à l'aide de divs avec facile à gérer ids et seulement le premier visible

    .

    <form action=".." ..>
<!-- the first page has style set to be visible -->
<div id="formpage_1" style="visibility: visible; display: block; .."> 
  <label for="..">..</label>
  <input type=".." ..>
  ..
  <!-- NEXT button -->
  <input type="button" value="next" onclick="pagechange(1,2);">
</div>
<!-- the 2nd and following pages have style set to be invisible -->
<div id="formpage_2"  style="visibility: hidden; display: none; ..">
  <label for="..">..</label>
  <input type=".." ..>
  ..
  <!-- PREVIOUS and NEXT buttons -->
  <input type="button" value="back" onclick="pagechange(2,1);">
  <input type="button" value="next" onclick="pagechange(2,3);">
</div>
...
<div id="formpage_10"  style="visibility: hidden; display: none; ..">
  <label for="..">..</label>
  <input type=".." ..>
  ..
  <!-- PREVIOUS and SUBMIT buttons -->
  <input type="button" value="back" onclick="pagechange(10,9);">
  <input type="submit" value="Submit">
</div>
    • Utiliser un simple JS fonction pour basculer entre les pages

    .

    function pagechange(frompage, topage) {
  var page=document.getElementById('formpage_'+frompage);
  if (!page) return false;
  page.style.visibility='hidden';
  page.style.display='none';

  page=document.getElementById('formpage_'+topage);
  if (!page) return false;
  page.style.display='block';
  page.style.visibility='visible';

  return true;
}

    Modifier

    Si vous souhaitez utiliser un tableau de mise en page, pause le pour dans plusieurs tables (une pour chaque page) et donner la ids tables à la place de la divs

    Il y avait une erreur dans la fonction JS - utilisé frompage deux fois au lieu de topagedans la deuxième utilisation fixe.
    Cela fonctionne parfaitement lors de l'utilisation de divs. Si j'utilise des tables les boutons précédent et suivant apparaissent de toutes les tables, et aucun d'eux n'afficher/masquer. Ils sont également tous apparaissent en haut et l'habitude de se déplacer vers le bas. Une idée? Ne veulent pas vraiment à utiliser des divs que je vais avoir besoin de re-style de tout.
    Êtes-vous sûr à 100% que vous avez écrit <table id="formpage_1"> ?
    <table id="formpage_1" style="visiblity: visible; display:block;" class="widthOneHundredPercent"> .... Viens de parler à mon patron et il suggère de mettre la table à l'intérieur de la div. De cette façon, nous n'aurez pas à re-style de tout, pense que cela pourrait être le chemin à parcourir.
    Aussi @Eugen lorsque je clique sur suivant dans un formulaire qui est très long, il me prend à mi-chemin de la forme suivante, par opposition à la haut de. de toute façon de résoudre ce problème?

    OriginalL'auteur Eugen Rieck

  2. 3

    Si vous voulez juste pour organiser le formulaire dans la vue, comment au sujet de quelque chose comme un widget accordéon? Jetez un oeil à http://docs.jquery.com/UI/Accordion

    OriginalL'auteur ma cılay

  3. 1

    Bien, si vous êtes heureux d'utiliser les CSS (et garder à l'esprit la croix-navigateur problèmes qui peuvent survenir), une approche consiste à utiliser la :target pseudo-classe.

    Distincte de la forme dans les groupes d'entrées, en utilisant dans ce cas le fieldset tag. Donner à chaque fieldset un id attribut et de cibler ceux fieldsets à l'aide de a balises.

    HTML:

    <form action="#" method="post">
    <a href="#one">Page One</a>
    <fieldset id="one">
        <legend>Page One</legend>
        <label for="p1i1">label for input one</label>
        <input id="p1i1" />
        <label for="p1i2">label for input two</label>
        <input id="p1i2" />
    </fieldset>

    <a href="#two">Page Two</a>
    <fieldset id="two">
        <legend>Page Two</legend>
        <label for="p2i1">label for input three</label>
        <input id="p2i1" />
        <label for="p2i2">label for input four</label>
        <input id="p2i2" />
    </fieldset>
</form>

    CSS:

    fieldset {
    height: 0;
    display: none;
    overflow: hidden;
    -o-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    -ms-transition: all 2s linear;
    -moz-transition: all 2s linear;
    transition: all 2s linear;
}
fieldset:target {
    display: block;
    height: 5em;
    -o-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    -ms-transition: all 2s linear;
    -moz-transition: all 2s linear;
    transition: all 2s linear;
}

    JS Fiddle démo.

    Références:

    OriginalL'auteur David Thomas