View Full Version : I m Newbie to Programming world kindly help Grey Out certain Divs using JavaScript

09-06-2011, 03:24 PM
Hi All,

I m newbie on JavaScript Coding.

I have Form where the there are 4 radio buttons.

Requirement is OnClick of Each radio buttons, some Div must Greyed out.

<input type="radio" name="cf_basic_type" value="Apartment" checked="checked" />Apartment
<input type="radio" name="cf_basic_type" value="Villa" />Villa
<input type="radio" name="cf_basic_type" value="Independant" />Independant house
<input type="radio" name="cf_basic_type" value="Plot" />Plot</div>

and Grey Part of Form is:

Area Size:<input type="text" name="cf_area_size" id="cf_area_size" /></div>
Plot Size:<input type="text" name="cf_area_length" id="cf_area_length" />
<input type="text" name="cf_area_width" id="cf_area_width" />

so for Plot radio selected the 'Area Size' must be greyed out but when others radio button selected is must be active

For Apartment radio selected or Villa radio selected, Plot Size must be greyed out.

Hope that makes clear.... Its very Urgent kindly help me with this..

Thnks in Advnce

Philip M
09-06-2011, 06:25 PM
Here you are:-

<style type = "text/css">
.disabled {background-color:#C9C9C9}
.enabled {background color:white}

<form name = "myform">
<input type="radio" name="cf_basic_type" value="Apartment" checked="checked" onclick = "greyIt()"/>Apartment
<input type="radio" name="cf_basic_type" value="Villa" onclick = "greyIt()"/>Villa
<input type="radio" name="cf_basic_type" value="Independent" onclick = "greyIt()"/>Independent house
<input type="radio" name="cf_basic_type" value="Plot" onclick = "greyIt()"/>Plot</div>

Area Size: <input type="text" name="cf_area_size" id="cf_area_size" class = "enabled"/></div>
Plot Size: <input type="text" name="cf_area_length" id="cf_area_length" class = "disabled" disabled = true/>
<input type="text" name="cf_area_width" id="cf_area_width" />

<script type = "text/javascript">

function greyIt() {
for (var i =0; i <document.myform.cf_basic_type.length; i++) {
if (document.myform.cf_basic_type[i].checked) {
var x = i;

if (x == 3) {
document.getElementById('cf_area_size').className= 'disabled';
document.getElementById('cf_area_size'). disabled = true;
document.getElementById('cf_area_size').value = "";
document.getElementById('cf_area_length').className= 'enabled';
document.getElementById('cf_area_length').disabled = false;

else {
document.getElementById('cf_area_size').className= 'enabled';
document.getElementById('cf_area_size'). disabled = false;
document.getElementById('cf_area_length').className= 'disabled';
document.getElementById('cf_area_length').disbaled = true;
document.getElementById('cf_area_length').value = "";



Haikus are easy
But sometimes they don't make sense.