I have two forms (below) one is a trip calculator and one a spending money calculator
There is a spending money radio on the trip calculator(if clicked "yes", will open the spending money calculator in new tab, functionality not added yet)
From a usability perspective should I:
- Leave the two calculators separate as they are large enough visually already
OR
- Add a conditional section to the main calculator where if clicked yes, the spending money calculator will open in the same page as the main calculator making the whole calculator longer if opened?
http://tripcalculator.travel2mania.com/WrestleMania.php
http://spendingcalculator.travel2mania.com/WrestleManiaspending.php
Do you have the time to do this right? Because if you do, I would not use a form generator, and I would not even use forms. See this question.
I also would use a tabbed UI. The forms are a bit overwhelming... having fewer sections per screen, with either a next=> button, or a tabbed UI, would be easier to use. (Note that when creating a tabbed interface, the tabs are merely a visual trick. In reality, all fields are available to you, the developer, as if they all were on the same page) Thanks to jQueryUI Tabs, making tabbed interfaces are a breeze!
If you re-work your UI, then you can bring both up on the same screen.
Also, sounds like you could use some tips on using modals (aka "lightboxes"). You will love them.
And, if you don't already know about these two things, you should take a half hour each and brush up...
jQuery -- important: use down arrow to start showing things on each slide
flexbox
More about AJAX
Also...
Some tips on building your project
For each of the above widgets (Tabs, Modals, etc) - do a few tiny, simplistic tests/exercises first. Don't just run into trying to work them into your project. You will not save time -- you will waste it.
When you build your project, first build each of these widget interfaces in its own project -- as though that one thing (the jQUI Tabs, for eg) is the only thing in the project. So build each widget separately. THEN integrate them as the final step. You will be glad you did.
If you have any PHP in the project, either use a lot of fopen() Write-to-File statements, so you know where the code got to before it crashed, or learn to use the PHPConsole Chrome add-in.
