Jump to content

Archived

This topic is now archived and is closed to further replies.

playaz

Interactive forms using Javascript

Recommended Posts

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

Share this post


Link to post
Share on other sites
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;
}
}

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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 =)

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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]

Share this post


Link to post
Share on other sites
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 :)

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.