Question de Jquery: Comment est-ce que je peux casser un formulaire en plusieurs parties de sorte qu'un seul fieldset soit visible à la fois?

Question

J'ai une bonne compréhension de XHTML & CSS, mais PHP & Javascript me semble magique.

Je construis un site de discussion en utilisant le Textpattern CMS basé sur PHP. Lorsque les utilisateurs sont connectés, ils peuvent utiliser un formulaire public pour ajouter un nouveau sujet de discussion. Il y a beaucoup de champs de saisie, regroupés par l'élément HTML fieldset dans un seul élément form qui ajoute une nouvelle ligne à une table de base de données spécifique. Ce que je veux faire est montrent qu'un seul fieldset à la fois, l'insertion précédent et suivant liens qui permettent aux gens de naviguer entre fieldsets. Textpattern est fourni avec jquery, et j'ai trouvé un jquery plugin that describes this functionality. Mais je ne peux pas le faire fonctionner.

Voici ce que j'ai dans mon document head:

<style type="text/css" media="screen"> 
    fieldset {display: none;} 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> 
<script type="text/javascript" src="http://site.url/scripts/jquery.babysteps-0.2.1.js"></script> 
<script type="text/javascript" language="javascript"> 
    $('#step1').bindStep('#step2'); 
    $('#step2').bindStep('#step3'); 

    $('#step1').show(); 
</script> 

Ma forme est quelque chose comme ceci:

<fieldset id="step1"> 
    <legend>Step 1 Fields</legend> 
    <!-- fields --> 
</fieldset> 
<fieldset id="step2"> 
    <legend>Step 2 Fields</legend> 
    <!-- fields --> 
</fieldset> 
<fieldset id="step3"> 
    <legend>Step 3 Fields</legend> 
    <!-- fields --> 
</fieldset> 
<input type="submit" value="Post this Article!" /> 

Les résultats sont que la déclaration style cache chaquefieldset, mais le script ne montre pas step1 du tout. J'ai vérifié tous les chemins de fichier, et j'ai essayé ceci en utilisant un lien vers mon bundle local de jquery au lieu de la version de Google, mais j'obtiens les mêmes résultats.

Je serais heureux si je pouvais obtenir ce travail, mais s'il y a un autre moyen d'y parvenir sans le plugin babysteps, je serais heureux avec ce résultat aussi bien.

Des conseils ou des conseils concrets que vous pouvez offrir seraient grandement appréciés! Des instructions pas à pas ou des questions de dépannage pratiques (avez-vous branché votre ordinateur?) Peuvent également vous être utiles.

Merci d'avance!

Answer 1

Je ne suis pas sûr de ce plugin particulier, mais avec juste jquery:

$(function(){ 

    $('#gotoStep2').click(function(){ 
     $('#step1').hide(); 
     $('#step2').show(); 
     return false; 
    }); 

}); 

où vous avez

<input type="button" id="gotoStep2" value="next &raquo;"/> 

intérieur step1

et votre code CSS:

#step2, #step3 //etc 
{ 
    display: none; 
} 

im sûr vous pouvez trouver comment répéter ceci pour toutes vos étapes :)

Answer 2

<script type="text/javascript" language="javascript"> 
    $(function(){ 
    $("#step1").bindStep("#step2"); 
    $("#step2").bindStep("#step3"); 

    $("#step1").show(); 
    }); 
</script> 

Si cela ne fonctionne pas, abandonnez le plugin. (Sérieusement, pas même la démo sur cette page fonctionne.)