Best method of implementing a wizard using jQuery / Javascript

Danger781 · 17-09-2015 11:09pm #1

Hello all,

Just geting familiar with Javascript and jQuery over the last few days. I'm planning on putting together a web page that will include a GUI-like wizard. What would be the best method of implementing something like this?

Would it be something along the lines of..
$("nextButton").click( function() {

$("sectOne").html( ... )

$("sectTwo").html( ... )

});

Am I going about this the wrong way / too literally?

Danger781 · 17-09-2015 11:49pm

Danger781 wrote: »

Hello all,

Just geting familiar with Javascript and jQuery over the last few days. I'm planning on putting together a web page that will include a GUI-like wizard. What would be the best method of implementing something like this?

Would it be something along the lines of..
$("nextButton").click( function() {
$("sectOne").html( ... )

$("sectTwo").html( ... )
});

Am I going about this the wrong way / too literally?

Looked up some basic wizard examples and some posts on stack overflow. Seems like the best implementation would be dividing the entire form into sections and then using show() and hide() as needed.

Ill probably go with this method unless someone else has a more intelligent alternative.

Buford T Justice · 18-09-2015 12:04am

a bit more information would help, but failing that http://www.jquery-steps.com/

Giblet · 18-09-2015 12:06pm

Use CSS and the :target selector along with anchors, could be a nice JavaScript free alternative. Can animate in CSS as well as use the back button

<style>
    .step { max-height:0; overflow-y:hidden; opacity:0; transform; transition: opacity .15s ease-in-out  }   
    .step:target {  max-height:100%; overflow-y:visible; opacity:1;  }
</style>
<a href="#Step1"> Start Wizard! </a>
<div id="Step1" class="step">
   <p>This is step 1</p>
   <a href="#Step2">Next</a>
</div>
<div id="Step2" class="step">
   <p>This is step 2</p>
   <a href="#Step1">Prev</a>
   <a href="#Step3">Next</a>
</div>
<div id="Step3" class="step">
   <p>This is step 3</p>
   <a href="#Step2">Prev</a>
</div>

Danger781 · 18-09-2015 2:39pm

Buford T Justice wrote: »

a bit more information would help, but failing that http://www.jquery-steps.com/

Came across that library alright but I'm doing this as a learning experience - So I'd like to do it all myself. Thanks for the suggestion though!

Giblet wrote: »

Use CSS and the :target selector along with anchors, could be a nice JavaScript free alternative. Can animate in CSS as well as use the back button

Definitely an option, thanks. Like I said above I am doing this more as a learning experience so ideally I would use JS / jQuery but I guess I could try both and decide which implementation I prefer.

On that note is there any disadvantage to using JS over CSS for something like this? I would imagine 99% of people have Javascript enabled in their web browser nowadays..

Talisman · 30-09-2015 2:44pm

Take a look at the FormWizard jQuery plugin.

https://github.com/thecodemine/formwizard

Best method of implementing a wizard using jQuery / Javascript

Comments