Javascript – How to approach multiple page form with just one save option

css3htmlhtml5javascriptjquery

The screen shot shows the magento product upload page.

The left nav allows you to switch to different options for the product. Basically each option in the left nav appears as a different page. However when you save and close, it will save all the updates made on each page.

Using Foundation4, html, css, js – what would be the best approach to replicating something similar? Say I want 3 pages and one save button option.

Using http://foundation.zurb.com/docs/components/section.html#panel2 and having the save buttons the top line form level seems a possible option.

Magento screen shot

Best Answer

Perhaps you should re-think your design. Instead of displaying options on a separate page, display them within a div. And if you need to display more info than the div has room for, display it in a floating hidden div that you fill, show and hide when appropriate. That way everything remains on one page.

I can think of umpteen relatives who would be confused with tabs. When purchasing something they tend to assume: 1) there is only 1 submit/save button; and 2) a running total is being displayed in the right hand column.

Related Topic