[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 204
  • Last Modified:

Javascript Form Expansion

I am looking to create a form that expands when a checkbox is clicked. The form I am making is for a conference center. There is a checkbox that states "Full Service." If the checkbox is checked I want the form to expand to include other options. For example if checked I want the form to expand and have checkboxes for "Projector," "Drinks," "Microphone," etc. What is the best way to do this? Wouldn't Javascript be the best way and if so how would I do this? Would a lightbox be the best idea? Could this be done dynamically loading the expanded form using php?
0
NEComputer
Asked:
NEComputer
  • 2
1 Solution
 
kerwinsiyCommented:
are you trying to create a expand/collapse functionality using check box. if yes you could try placing the items inside a div, where everytime you trigger a expand/collapse. the div are shown or hide.

0
 
NEComputerAuthor Commented:
I am not sure if that is exactly what I am creating because I need to collect the data from the form on whether or not the event is "full service." I have created an expand/collapse before using div and css show and hide. This however has been glitchy and don't know how best to create it. Any guidance?
0
 
hieloCommented:
try:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
function toggle(eid){
	eid = document.getElementById(eid);
	eid.style.display=eid.style.display=="" ? "none" : "";
}
//-->
</script>
 
</head>
<body>
<input type="checkbox" name="service" value="Full Service" onclick="toggle('FullService')"/>Full Service
<div id="FullService" style="display:none;">
	<div><input type="checkbox" name="service" value="Projector"/>Projector</div>
	<div><input type="checkbox" name="service" value="Drinks"/>Drinks</div>
	<div><input type="checkbox" name="service" value="Microphone"/>Microphone</div>
</div>
</body>
</html>

Open in new window

0
 
NEComputerAuthor Commented:
Thanks for the solution. It works great! I added some sytle to the form and things still work. If I understand it properly, whatever ID I give the control I give to the objects I want the change to apply to. Again I appreciate the support. Thank You.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now