Web Analytics Made Easy -
StatCounter I m Newbie to Programming world kindly help Grey Out certain Divs using JavaScript - CodingForum


No announcement yet.

I m Newbie to Programming world kindly help Grey Out certain Divs using JavaScript

  • Filter
  • Time
  • Show
Clear All
new posts

  • I m Newbie to Programming world kindly help Grey Out certain Divs using JavaScript

    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

  • #2
    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.
    Last edited by Philip M; Sep 6, 2011, 12:29 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.