Jquery question: How can I break up a multi-part form so that only one fieldset is visible at a time?

Question

Hi! I have a firm grasp on XHTML & CSS, but PHP & Javascript look like magic to me.

I'm building a discussion site using the PHP-based Textpattern CMS. When users are logged in, they can use a public-side form to add a new discussion topic. There are a lot of input fields, grouped by the HTML fieldset element within a single form element that adds a new row to a specific database table. What I want to do is show only one fieldset at a time, inserting previous and next links that will allow people to navigate between fieldsets.

Textpattern comes bundled with jquery, and I found a jquery plugin that describes this functionality. But I can't get it to work.

Here's what I have in my 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"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://site.url/scripts/jquery.babysteps-0.2.1.js"&gt;&lt;/script&gt;
<script type="text/javascript" language="javascript">
 $('#step1').bindStep('#step2');
 $('#step2').bindStep('#step3');

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

My form is something like this:

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

The results are that the style declaration hides every fieldset, but the script doesn't show step1 at all. I've double-checked all the file paths, and I've tried this using a link to my local jquery bundle instead of the Google version, but I get the same results.

I would be happy if I could get this working, but if there is another way to achieve this without the babysteps plugin, I'd be happy with that outcome as well.

Any guidance or concrete advice you can offer would be greatly appreciated! Step-by-step instructions or practical troubleshooting questions (Do you have your computer plugged in?) might also be helpful.

Thanks in advance!

Answer 1

Im not sure on that particular plugin, but with just jquery:

$(function(){

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

});

where you have

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

inside step1

and your css:

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

im sure you can work out how to repeat this for all your steps :)

Answer 2

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

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

If that doesn't work, ditch the plugin. (Seriously, not even the demo on that page works.)