Jump to content


Photo

Interactive forms using Javascript


  • Please log in to reply
7 replies to this topic

#1 playaz

playaz
  • Members
  • PipPipPip
  • Advanced Member
  • 55 posts

Posted 17 July 2006 - 11:16 AM

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.zimmertec...ms-tutorial.php

#2 emehrkay

emehrkay
  • Staff Alumni
  • Advanced Member
  • 1,214 posts

Posted 18 July 2006 - 04:20 AM

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;
}
}

#3 playaz

playaz
  • Members
  • PipPipPip
  • Advanced Member
  • 55 posts

Posted 18 July 2006 - 10:22 AM

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



#4 PureEvil

PureEvil
  • Members
  • PipPip
  • Member
  • 19 posts

Posted 18 July 2006 - 05:44 PM

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 =)

#5 PureEvil

PureEvil
  • Members
  • PipPip
  • Member
  • 19 posts

Posted 18 July 2006 - 07:47 PM

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.

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

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

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

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

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

#6 playaz

playaz
  • Members
  • PipPipPip
  • Advanced Member
  • 55 posts

Posted 19 July 2006 - 11:17 AM

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

#7 nogray

nogray
  • Members
  • PipPipPip
  • Advanced Member
  • 930 posts
  • LocationSan Francisco CA

Posted 19 July 2006 - 04:17 PM

this should solve your problem
<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>

NoGray.com


#8 playaz

playaz
  • Members
  • PipPipPip
  • Advanced Member
  • 55 posts

Posted 20 July 2006 - 08:57 AM

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 :)




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users