nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Child Item

Need Help:: Forms / Menu Options

decbuck

Hi,
I am looking to create a GUI or something in javascript or free software that will allow me to create a tabbed webpage.

If tabbing is not available, I need to have drop down menus. If something is selected from one drop down menu then different options appear below.

Does this make sense?

For example,
If I log on to the page and see two buttons, male or female.

If I click the male button, i get further options about male questions and vice versa

If I can do this with some free software or javascript this would be great.

Thanks a million.

Find more posts tagged with

Quick Links

Comments

seamus

You may have trouble finding a javascript script that will do exactly what you are looking for, out of the box, but there are plenty of sites with free scripts. I've found a few good ones on www.getelementbyid.com

The modern and funky way to do this would be via AJAX, but it's quite advanced.

DJB

Hi,

I've created a neat little tab interface using js/css show/hide divs. It's simple enough code and use it in forms like what you are talking about. View the source on the tab system to see how it's done. It might help you out. Basically, I use onclick to show/hide a div tag. Whichever tab you click on, it will hide all tabs and show the one you click. It's still the one page. The next previous links work nice as well.

http://www.davidbehan.com/tabs/

Would be interested in finding out AJAX way of doing this. Must get my head into it soon as I'm still not 100% on it. At the risk of hijacking the thread... any pointers in doing this via AJAX?

Rgds,

Dave

tomED

DJB wrote:

Hi,
any pointers in doing this via AJAX?

The first thing you should ask is there a point doing it via AJAX. Personally in this instance I don't see a need for you to go the AJAX route.

Tom

DJB

Cheers tom. Just so I'm clear. I'm writing this message in the quick reply at the bottom of the page. When I submit it, it posts the message without reloading the page. This is use of AJAX... yes?

tomED

Hang on - haven't used this facility before... let's see....

tomED

Yep - looks like it!!!

Sorry - didn;t read your initial post properly - this would be very useful to you!!!

seamus

I would tend towards the solution which consumed the least amount of bandwidth. Maybe it's the 56k-er in me.

The CSS/Javascript solution with hidden DIVs is a nice simple solution, I've used something similar before. I have two main issues with it: 1. You have to load all of your data, just keep a big chunk of it hidden. This increases page load times. 2. Different browsers interpret CSS differently. It can somtimes take some tinkering to get right.

I've never used AJAX, though it's something which I'm keen to give a shot. I just need to find the right application for it.

I like it cos it's neat and fast.

An alternative solution I've used in the past with PHP, is a double-submit system using forms. Basically you present the form with whatever inital options, and a drop-down. You add an onChange() handler to the drop-down which triggers a submit in the form. The form handler determines that the final data has not been submitted (based on the variables it receives), and then regenerates the form based on the value selected in the drop down.

All three solutions require Javascript to be enabled though....

rsynnott

DJB wrote:

Cheers tom. Just so I'm clear. I'm writing this message in the quick reply at the bottom of the page. When I submit it, it posts the message without reloading the page. This is use of AJAX... yes?

Strictly speaking, it's only AJAX if transmission is by XML.