Interactive forms using Javascript

[playaz]

Hi guys,

I am currently developing some 'advanced HTML forms' for a clients site, the form needs to hide elements on the page dependant upon the user selection of previous fields.
For instance, its for an Estate Agents - if the user wants to buy/rent/let a Bungalow, he or she select 'Bungalow' from the drop down menu.

The effect I want now is to hide elements below in the form which won't be relevant for a bungalow such as I have a question stating 'How many floors does the property have?' obviously a Bungalow will only have the one floor so this question would be need to be hidden from the user's view.

So, in this case the user selects 'Bungalow' from a drop-down menu, and it will hide the question 'How many floors does the property have?' along with its related drop-down menu from the screen.

Can anyone suggest how this would be done using javascript techniques?

*UPDATE*
I found this which is kinda what i am looking for.. if anyone else finds anything similar please post to the board :)
http://www.zimmertech.com/tutorials/web-design/22/interactive-hidden-forms-tutorial.php

[emehrkay]

this shouldnt be too difficult with a little dom and css properties

first the area that you want to show and hide should have a unique id

<div id="roomNumbers"> info to show and hide </div>

then you add an action to the controlling field. something like onclick or onblur = "showHide('roomNumbers', 'show');"

function showHide(id, act){
var ele = document.getElementById(id);

switch(act){
case "show":
ele.style.visibility = "visible";
break;
case "hide":
ele.style.visibility = "hidden";
break;
}
}

[playaz]

This looks very good!

My javascript isnt the best though.. could you possibly illustrate this with an example or possibly post the full code here so I can view it. If you could do that I would much appreciative, kind thanks

[PureEvil]

I did this and it appears to work almost 100% after adding onload="showHide('roomHide', 'hide');" to the body tag.

The problem I'm now running in to, being a nOOb to java is that I wanted to use this kind of script from an <option> tag. Can you do this? It does not appear to work.

Example:
<option>1</option>
<option onfocus="showHide('roomHide', 'show');">2</option>
<option>3</option>

Also is there a way to make this work on more than just text? I was hoping to make an <input> box appear as well.

Thanks for any and all help in advance =)

[PureEvil]

Playaz:

This is what I found to work after playing around for a bit.

Now seeings how I've never used java before I assume it can be written better. But here goes.

[code]<script type=\"text/javascript\">
function ShowMenu(num, id){
var id2 = id + 1;
if ( num == 1 ){
document.getElementById(id2).style.display = 'block';
}
else
{
document.getElementById(id2).style.display = 'none';
}
}
</script>[/code]

Place the above in your header. Then add the following to your <select> tag.

[code] id=\"Type\"
onChange=\"javascript: ShowMenu(document.getElementById('Type').value,'CID');\"[/code]

Then just like in the other example add a <div> tag with [code]id="CID1"[/code]

Hope that helps. I know it works for my current project.

[playaz]

Hi guys,

Still struggling.. javascript is definately my weak point :(

Can anyone show me some code that will just do the following:

If user selects radio button 'YES' then hide a <div>, however if user selects radio button 'NO' then show the same <div>. By default I want the <div> hidden using the onload event.
Can anyone explain how to do this, I think the heat is killing the brain cells today it feels like 50 degrees in this office! :(

Thanks again

[nogray]

this should solve your problem
[code]
<script language="javascript">
function show(){
document.getElementById('extra_content').style.display = "";
}
function hide(){
document.getElementById('extra_content').style.display = "none";
}
</script>

<input type="radio" onclick="show();" id="radio1" name="radio" /> <label for="radio1">Yes</label><br />
<input type="radio" onclick="hide();" id="radio2" name="radio" /> <label for="radio2">No</label>

<div id="extra_content" style="display:none;">
This text is hidden
</div>
[/code]

[playaz]

Thanks gray!

I think that looks to be exactly what I need :)

I really appreciate all the help from yourself & everyone else, keep up the good work :)