introducing collapsible pannel

how to make a particular section visible only when a radio button is c

Page 1 of 1

2 Replies - 583 Views - Last Post: 10 September 2009 - 06:04 PM

#1 shivane  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 29-July 09

introducing collapsible pannel

Post icon  Posted 08 September 2009 - 05:53 PM

I have introduced javascript to enable and disalbe particular checkboxes on selection on radio buttons. But i want the checkboxes to appear on the page only when a particular checkbox is checked. Please guide me the way to do so.

regards,
SHivane
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Contact us</title>
	<script language = "Javascript">
	function Validate(){
		var name=document.loginForm.fname
		var mail=document.loginForm.email
		var sadd=document.loginForm.sadd
		var mobile=document.loginForm.mobile

		if ((name.value==null)||(name.value=="")){
			alert("Please Enter User Name")
			//uid.focus()
			return false
		}
		if ((mail.value==null)||(mail.value=="")){
			alert("Please Enter Email Address")
			//pwd.focus()
			return false
		}
		if ((sadd.value==null)||(sadd.value=="")){
					alert("Please Enter Street Address")
					//pwd.focus()
					return false
		}
		if ((mobile.value==null)||(mobile.value=="")){
					alert("Please Enter Mobile Number")
					//pwd.focus()
					return false
		}
		else
		{
		   return true
		}
	}

	function disableall(){
		resedential(true)
		commercial(true)

	}

	function resedential(val){
		document.getElementById("ip1").disabled=val;
		document.getElementById("ip2").disabled=val;
		document.getElementById("ip3").disabled=val;
		document.getElementById("ip4").disabled=val;
		document.getElementById("ip5").disabled=val;
		document.getElementById("ip6").disabled=val;
		document.getElementById("ip7").disabled=val;
		document.getElementById("ip8").disabled=val;
		document.getElementById("ip9").disabled=val;
	}

	function commercial(val){
		document.getElementById("ip10").disabled=val;
		document.getElementById("ip11").disabled=val;
		document.getElementById("ip12").disabled=val;
		document.getElementById("ip13").disabled=val;
		document.getElementById("ip14").disabled=val;
		document.getElementById("ip15").disabled=val;
		document.getElementById("ip16").disabled=val;
	}

	function resedentialEn(){
		commercial(true)
		resedential(false)

	}

	function commercialEn(){
		resedential(true)
		commercial(false)
	}

	</script>
</head>
<body onload="disableall()">
<center>
<h1><font face="calibri" color="#000000">Contact us</font></h1>

<hr width="100%">
</center>
<form id="loginForm" name="loginForm" method="post"  onsubmit="return Validate()" action="contactus.php">
<table>
	<tr><td><font >First Name</font></td><td><input id="fname" type="text" name="fname" /><img src="Tick-red.png" height="25" width="25" /></td></tr>
	<tr><td><font >Last Name</font></td><td><input type="lname" name="lname" /></td></tr>
	<tr><td><font >Email Address</font></td><td><input id="email" type="text" name="email" /><img src="Tick-red.png" height="25" width="25" /></td></tr>
	<tr><td><font >Street Address</font></td><td><input id="saddress" type="text" name="sadd" /><img src="Tick-red.png" height="25" width="25" /></td></tr>
	<tr><td><font >Suburb</font></td><td><input id="suburb" type="text" name="suburb" /></td></tr>

	<tr>
		<td><font >State</font></td><td><input id="state" type="text" name="state" /></td>
		<td><font >Postal Code</font></td><td><input id="pcode" type="text" name="pcode" /></td>
	</tr>
	<tr><td><font >Phone#</font></td><td><input id="phone" type="text" name="phone" /></td></tr>
	<tr><td><font >Mobile</font></td><td><input id="mobile" type="text" name="mobile" /><img src="Tick-red.png" height="25" width="25" /></td></tr>

	<tr><td colspan="3" bgcolor="yellow">Type of Property</td></tr>
	<tr>
		<td><input type="radio" name="resradio" value="RESIDENTIAL (HOUSE,UNIT,TOWNHOUSE,CARS,BOATS ETC)" onchange="resedentialEn()"></td>
		<td>RESIDENTIAL (HOUSE,UNIT,TOWNHOUSE,CARS,BOATS ETC)</td>
	</tr>
	<tr>
		<td><input type="radio" name="resradio" value="COMMERCIAL (OFFICE,RETAIL,STRATA,FACTORY ETC)" onchange="commercialEn()"></td>
		<td>COMMERCIAL (OFFICE,RETAIL,STRATA,FACTORY ETC)</td>

	</tr>


	<tr><td colspan="3" bgcolor="yellow">RESIDENTIAL</td></tr>
<div style="width:1000px;height:20px;background-color:#666666" id="divCommercial">
	<tr bgcolor="666666">
		<td><input type="checkbox" name="residential[]" id="ip1" value="CARPET CLEANING"/>CARPET CLEANING</td>
		<td><input type="checkbox" name="residential[]" id="ip2" value="CAR SEAT"/>CAR SEAT</td>
	</tr>

	<tr bgcolor="666666">
	   	<td><input type="checkbox" name="residential[]" id="ip3" value="UPHOLSTERY"/>UPHOLSTERY</td>
		<td><input type="checkbox" name="residential[]" id="ip4" value="BLINDS" />BLINDS</td>
	</tr>
	<tr bgcolor="666666">
		<td><input type="checkbox" name="residential[]" id="ip5" value="LEATHER"/>LEATHER</td>
	   	<td><input type="checkbox" name="residential[]" id="ip6" value="MATRESSES"/>MATRESSES</td>

	</tr>
	<tr bgcolor="666666">
		<td><input type="checkbox" name="residential[]" id="ip7" value="OTHER(SPECIFY)"/>OTHER(SPECIFY)</td>
		<td><input type="checkbox" name="residential[]" id="ip8" value="RUGS"/>RUGS</td>
	</tr>
	<tr bgcolor="666666"><td><input type="text" height="50" width="800" name="specifications" id="ip9"  value="specifications"/></td></tr>

	 </div>

	<tr><td colspan="3" bgcolor="yellow">Commercial</td></tr>
	<div style="width:1000px;height:20px;back-ground-color:#666666" id="divCommercial">
	<tr bgcolor="666666">
		<td><input type="checkbox" name="commercial[]" id="ip10" value="CARPET CLEANING"/>CARPET CLEANING</td>
		<td><input type="checkbox" name="commercial[]" id="ip11" value="PARTICIAN"/>PARTICIAN</td>
	</tr>
	<tr bgcolor="666666">

		<td><input type="checkbox" name="commercial[]" id="ip12" value="OFFICE CHAIRS"/>OFFICE CHAIRS</td>
		<td><input type="checkbox" name="commercial[]" id="ip13" value="VINYL"/>VINYL</td>
	</tr>
	<tr bgcolor="666666">
		<td><input type="checkbox" name="commercial[]" id="ip14" value="OTHER(SPECIFY)"/>OTHER(SPECIFY)</td>
		<td><input type="checkbox" name="commercial[]" id="ip15" value="LEATHER"/>LEATHER</td>
	</tr>

	<tr bgcolor="666666"><td><input type="text" height="50" width="800" name="specifications" value="" id="ip16"/></td></tr>


	 </div>
	<tr><td colspan="3" bgcolor="yellow">Aditional</td></tr>
	<tr >
		  <td><input type="checkbox" name="additional[]" value="STAIN TREATMENT"/>STAIN TREATMENT</td>
		<td><input type="checkbox" name="additional[]" value="WATER/FLOOD SERVICES" />WATER/FLOOD SERVICES</td>

	</tr>
	<tr >
		  <td><input type="checkbox" name="additional[]" value="CARPET PROTECTION"/>CARPET PROTECTION</td>
		<td><input type="checkbox" name="additional[]" value="ODOUR REMOVAL"/>ODOUR REMOVAL</td>
	</tr>
	<tr >
		<td><input type="checkbox" name="additional[]" value="UPHOLSTERY PROTECTION"/>UPHOLSTERY PROTECTION</td>

		  <td><input type="checkbox" name="additional[]" value="PET STAINS/SMELL"/>PET STAINS/SMELL</td>
	</tr>
	<tr ><td colspan="3" bgcolor="yellow">Best Contact method</td></tr>
	<tr>
		  <td><input type="checkbox" name="bestcontact[]" value="PHONE"/>PHONE</td>
		<td><input type="checkbox" name="bestcontact[]" value="MOBILE"/>MOBILE</td>
		  <td><input type="checkbox" name="bestcontact[]" value="EMAIL"/>EMAIL</td>

	</tr>
	<tr><td colspan="3" bgcolor="yellow">Comments / Questions</td></tr>
	<tr><td><input type="text" height="5" width="80" id="comments" name="Comments" value="comments"></td></tr>
	<tr><td><input type="submit" value="Submit" /></td></tr>


</table>
<img src="Tick-red.png" height="25" width="25" />  The fields marked with (<img src="Tick-red.png" height="25" width="25" />) are mandatory fields
</form>
</body>

</html>




Is This A Good Question/Topic? 0
  • +

Replies To: introducing collapsible pannel

#2 paperclipmuffin  Icon User is offline

  • Disassembling...
  • member icon

Reputation: 13
  • View blog
  • Posts: 944
  • Joined: 16-April 09

Re: introducing collapsible pannel

Posted 09 September 2009 - 01:36 AM

Create each checkbox in a div of a connected name, with all the div's styles being display: none; overflow: hidden; height: 150px; then have a look at this nifty code:

if(document.getElementById('contact').style.display == 'none'){ document.getElementById('contact').style.display = 'block'; }else{ document.getElementById('contact').style.display = 'none'; }



That shows/hides the div by id. You can split that into a show function and a hide function and trigger them to show/hide each checkbox dynamically.

Hope I made sense and helped! :)

PS: If I did, please help me by clicking the "This post was helpful" link below! Thanks!

This post has been edited by paperclipmuffin: 09 September 2009 - 01:37 AM

Was This Post Helpful? 1

#3 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Re: introducing collapsible pannel

Posted 10 September 2009 - 06:04 PM

hello,
in addition to what paperclipmuffin said

1- you can't use div element to separate table rows, use tbody instead

2- ID must be identical, but you used "divCommercial" twice

3- onchange() event for the radio buttons will be fired up when you change the selection, so if RESIDENTIAL radio was checked and then you checked COMMERCIAL the event will be fired on RESIDENTIAL and calls its related function resedentialEn()
that's why, i think it's better to use onclick event instead

4- if you still want to disable the checkboxes you can save your self a few time by using loop (since the checkboxes IDs have a sequenced naming)
function resedential(val){
for (i=1;i<=9;i++){
	document.getElementById("ip"+i).disabled=val;
}
}

function commercial(val){
for (i=10;i<=16;i++){
	document.getElementById("ip"+i).disabled=val;
}
}



5- if you want show / hide the checkboxes group, correct your html as mentioned in (1,2),and as paperclipmuffin mentioned use the display property to do this:
assuming that you gave the Residential tbody an id="divResidential"
function resedential(val){
document.getElementById("divResidential").style.display=(val==true)?"none":"table-row-group"
}

function commercial(val){
document.getElementById("divCommercial").style.display=(val==true)?"none":"table-row-group"
}


This post has been edited by ahmad_511: 10 September 2009 - 06:09 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1