Jump to content

Interactive forms using Javascript


playaz

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
Link to comment
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;
}
}
Link to comment
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

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

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

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

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  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...

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.