Jump to content

Sub forms

Guest Brivtech

Recommended Posts

Guest Brivtech

I've seen some websites that have forms, where as soon as you click on a radio button, or a drop-down option, a new form automatically apears underneath.

How do they do that? Where do I begin on my journey to rediscovery?

I'm sure I could do this a few years back, I think I must have been unwittingly abducted by aliens who stole the knowledge from my brain! :cry:<_<:D

Here's an example:

Are you _ MALE / _ FEMALE?

(Press MALE)

What's your favourite Sci Fi? _________

(Press FEMALE)

What's your favourite Romantic Drama? ____________

Of course, I want this to happen without the page reloading.

<Yah, I know, stereotypical nonsense, but you try think something up on the spot!>

Link to comment
Share on other sites

And a great help it is to! Many thanks, it's refreshed my memory a touch, and I think I should be able to figure the rest out from that. :cry:

Can you please share?

I'm guessing its just hidden divs, with Javascript to enable...

You've asked in this forum, its polite to share the information so others will find it.


Link to comment
Share on other sites

Guest Brivtech

To be honest, the code I got won't help most people with this, it's something that's for a different application, but there are elements within that are a great help, the secret ingredient was in "onChange": http://www.w3schools.com/jsref/jsref_onchange.asp

Where I was going wrong in trying to find answers was in the terminology I was using. Hidden DIVs? haven't come across anything like that for this yet.

I have a load of figuring out to do now, how I can match this up with the application I need it for, and what coding I need to do to get there. Sorry, but there isn't much else for me to share at this stage until I have more answers - Very early days on this I fear.


Do a Google search for : "The script adds and removes form fields based on user actions. Try the form below." and all the answers of manipulating forms will be revealed! If anyone has come across something better, let us know!

Link to comment
Share on other sites

Hi Brivtech,

I'm sorry if my post came out a bit short - I'd had a row with my ex-wife.


Just to add to what you've posted, its possible to hide html code within a div

Put your HTML code in a <div> and set:

display: none;

Using some javascript, its possible to show the hidden <div>

Each div will require its own id, so:



  margin: 0px 20px 0px 20px;

  display: none;


<div id="commentForm">

Extra elements go here


<a href="java script:toggleLayer('id1Form');" title="Add more info">

Add more info.


And the javascript to show the layer:

function toggleLayer( whichLayer )


  var elem, vis;

  if( document.getElementById ) // this is the way the standards work

	elem = document.getElementById( whichLayer );

  else if( document.all ) // this is the way old msie versions work

	  elem = document.all[whichLayer];

  else if( document.layers ) // this is the way nn4 works

	elem = document.layers[whichLayer];

  vis = elem.style;

  // if the style.display value is blank we try to figure it out here


	vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';

  vis.display = (vis.display==''||vis.display=='block')?'none':'block';


This isn't my work - it was taken from a google search for css hide div

Not sure if this is helpful, I can't see why you can't put form elements inside the hidden divs.


Link to comment
Share on other sites

Guest Brivtech

No probs Jason, we all get bad days.

My subsequent reading assigned the "hidden" blocks to TR, but I've been playing with it, and you can indeed use DIVs instead. There's also no need to hide them, as the DIV can be empty to start with.

Isn't this cool!

X : I am Hungry

What do you want to eat?

_ - Food

_ - I will starve

_ - A baby! :)


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...