Jquery Frage: Wie kann ich ein mehrteiliges Formular aufteilen, so dass immer nur ein Feldsatz sichtbar ist?

Question

Ich habe ein festes Verständnis für XHTML & CSS, aber PHP & Javascript sieht aus wie Magie für mich.

Ich baue eine Diskussionsseite mit dem PHP-basierten Textpattern CMS. Wenn Benutzer angemeldet sind, können sie ein Formular auf der öffentlichen Seite verwenden, um ein neues Diskussionsthema hinzuzufügen. Es gibt viele Eingabefelder, gruppiert nach dem HTML-Element fieldset in einem einzelnen form -Element, das eine neue Zeile zu einer bestimmten Datenbanktabelle hinzufügt. Was ich tun möchte, ist zeigen nur eine Fieldset zu einem Zeitpunkt, Einfügen vorherigen und nächsten Links, die Menschen zu navigieren zwischen Fieldset ermöglicht.

Textpattern kommt zusammen mit jquery, und ich fand eine jquery plugin that describes this functionality. Aber ich kann es nicht zur Arbeit bringen.

Hier ist, was ich in meinem Dokument habe 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> 

Meine Form so etwas wie diese:

<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!" /> 

Die Ergebnisse sind, dass die style Erklärung fieldset jeden versteckt, aber das Skript zeigt step1 überhaupt nicht an. Ich habe alle Dateipfade doppelt überprüft, und ich habe dies mit einem Link zu meinem lokalen Jquery-Bundle anstelle der Google-Version versucht, aber ich bekomme die gleichen Ergebnisse.

Ich würde mich freuen, wenn ich das funktionierte, aber wenn es einen anderen Weg gibt, dies ohne das babysteps Plugin zu erreichen, wäre ich auch mit diesem Ergebnis zufrieden.

Jede Beratung oder konkrete Beratung, die Sie anbieten können, wäre sehr willkommen! Schritt-für-Schritt-Anweisungen oder praktische Fragen zur Fehlerbehebung (Haben Sie Ihren Computer angeschlossen?) Könnte auch hilfreich sein.

Vielen Dank im Voraus!

Answer 1

Ich bin nicht sicher, an diesem Plugin, aber mit nur jquery:

$(function(){ 

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

}); 

wo Sie

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

innen schritt1

und CSS haben:

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

bin sicher Sie können herausfinden, wie diese für alle Ihre Schritte wiederholen :)

Answer 2

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

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

Wenn das nicht funktioniert, das Plug-Graben. (Ernsthaft, nicht einmal die Demo auf dieser Seite funktioniert.)