Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Thanked 0 Times in 0 Posts

    Post 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
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    London, England
    Thanked 2,573 Times in 2,551 Posts
    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; 09-06-2011 at 06: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.


    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts