Help me improve my form wizard

Hey everyone,

So I think this might just be the best place to post this. So here goes.

I am trying to change a form into a mobile-friendly wizard and I think I have it working... but I am not sure if it's coded right.

Here (codepen.io code)is what I have so far. And it works. From a functionality point of view, when the user gets to question 8 to submit the form... clicking the submit button loads up a temporary blank page before going to s1proc.php; which it should. Why does it load up that blank page though? And is there a way to speed this submission process up?

The second this is, I saw this tutorial on how to get more fields to show on selecting a radiobutton. How could I transfer this here such that the "next" button doesn't show unless the user selects an answer?

Thank you very much

 

Well, the code is a mess. Apart from that, you're also repeating a lot of code that should only be there once - like the next/prev buttons. What you should do is load the whole form, and hide everything apart from the first question with javascript, then have a next/prev button underneath the switching items which then loads the next/previous item. Then, on last page/item, you switch the "next" out with a submit button - you can style submits and buttons exactly the same, so I don't really understand the need for using a button. Use a submit, that way the form will work even if javascript is turned off.
The code is also in need of a bit of fixing... I'll see if I can rewrite it a bit.

 

Whereas I would actually have those... kind of... What I wouldn't have involved?

JavaScript. Much less the fat boated idiotic halfwit TRAIN WRECK of how NOT to write JavaScipt known as jQuery.

In modern browsers I'd use/abuse radio buttons to choose each question, empty labels with FOR attributes instead of buttons for prev/next, plug in the previous / next text using generated content, and use CSS 3 for the animations and selections via Element:checked.

For Pre CSS3 capable browsers, I'd just show all the questions at once, OH WELL they don't get the prev/next and silly animated rubbish.

Here, try this:
http://www.cutcodedown.com/for_others/asgsoft/template.html

As with all my examples the directory:
http://www.cutcodedown.com/for_others/asgsoft/

...is wide open for easy access.

JavaScript? We don't need to steenkin JavaScript?

JS for nothing and your scripts for free... that ain't workin', that's not how you do it. Lemme tell ya, those guys are dumb.

Pre CSS3 browsers the prev/next buttons are invisible as they do not recieve style nor are they populated, so only the submit shows up at the bottom for those. Modern browsers you get your fancy fade in/fade out animations, prev/next buttons, etc, etc...

As such it has "graceful degradation" -- form is usable on everything from IE 5.5 to modern bleeding edge, even if older browsers don't get all the bells and whistles.

You could also try using anchors and :target, but that can introduce an undesired scrolling behavior. The advantage of that approach being less markup (you could axe the outer radio buttons) and no "oddball radio buttons" showing when CSS is disabled/unavailable/inapplicable.

 

I just belted out a version using :target as well, just so you can see both methods of doing this.

http://www.cutcodedown.com/for_others/asgsoft/target/

-- edit -- doh, forgot to implement the show/hide of the next/submit. Added that functionality to the :target version using :checked and :valid. Should do the trick.

 

This is perfect! Thank you soo much for this.

One small question though. In the "target" version, how could I get the initial screen to be the "number of days" rather than the link to start.

 

Actually, the :target method is broken in IE as they're jackasses about handling :valid as "onchange" doesn't fire until the element loses focus... so it's not a perfect solution.

Making #days first just means adding that to the URL.

I'm heading out for lunch, but when I get back I'll try to update the radio button version to hide "next" and/or "submit" -- but again it doesn't work in IE so it may need some scripting assist for the show/hide of the buttons. I'll have to play with it.