Thread: Checkbox toggle

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    2
    Rep Power
    0

    Checkbox toggle


    Hi there,
    Just learning the ropes and wondered if someone could assist with my form for an assignment.
    The 3 x name= "regular service" options should appear only if the name="service" value "regular" button is checked. Otherwise they should be hidden.
    Then, once a user selects one of these three values, they should be able to select one of the name ="years" fields.

    Many thanks in advance.

    <head>
    <title>BuffetQuote 2012 </title>
    <script type="text/javascript">

    window.onload = function()
    {
    var toggle_object = document.form1.regularservice.value
    if (document.form1.regular.checked)
    {
    toggle_object.style.display = "block";
    }
    else
    {
    toggle_object.style.display = "none";
    }
    }

    </script>
    </head>
    <body>
    <form action="script.url"name="form1">

    <h1>Please select number of times the service is required</h1>
    <input type="radio" name="service" value="onceonly" /> Once Only
    <input type="radio" name="service" value="regular" /> Regular Service<br /> <br />


    <input type="radio" name="regularservice" value="twelveyear" /> Once a month for a year
    <input type="radio" name="regularservice" value="sixeyear" /> Once a month for six months
    <input type="radio" name="regularservice" value="onceyear" /> Once a year

    <br />

    <input type="radio" name="years" value="oneyearcontract" /> 1 year contract
    <input type="radio" name="years" value="twoyearcontract" /> 2 year contract
    <input type="radio" name="years" value="threeyearcontract" /> 3 year contract

    </form>
    </body>
    </html>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    4
    Rep Power
    0
    Use this one:---
    <head>
    <title>BuffetQuote 2012 </title>
    <script type="text/javascript">

    window.onload = function()
    {
    function ChangeDropdowns(value)
    {
    if(value=="regularserviceYes")
    {
    document.getElementById('demo1').style.display='none';
    }
    else if(value=="radiobuttonNo")
    {
    document.getElementById('demo1').style.display='block';
    }
    }

    </script>
    </head>
    <body>
    <form action="script.url"name="form1">

    <h1>Please select number of times the service is required</h1>
    <input type="radio" name="service" value="onceonly" /> Once Only
    <input type="radio" name="service" value="regular" /> Regular Service<br /> <br />


    <input type="radio" name="regularservice" value="twelveyear" id="demo1" /> Once a month for a year
    <input type="radio" name="regularservice" value="sixeyear" /> Once a month for six months
    <input type="radio" name="regularservice" value="onceyear" /> Once a year

    <br />

    <input type="radio" name="years" value="oneyearcontract" /> 1 year contract
    <input type="radio" name="years" value="twoyearcontract" /> 2 year contract
    <input type="radio" name="years" value="threeyearcontract" /> 3 year contract

    </form>
    </body>
    </html>
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    2
    Rep Power
    0
    Thanks very much, but it doesn't seem to work. All the options are on the page when the page loads - can you assist?

    Thanks!
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,118
    Rep Power
    119
    Code:
    <head>
    <title>BuffetQuote 2012 </title>
    
    <style>
    #demo1, #demo2 {
    display:none;
    }
    </style>
    
    <script type="text/javascript">
    
    function ChangeDropdowns(value)
    {
    
    if (value=="regular")
    {
    document.getElementById('demo1').style.display='none';
    document.getElementById('demo2').style.display='block';
    }
    else if (value=="onceonly")
    {
    document.getElementById('demo2').style.display='none';
    document.getElementById('demo1').style.display='block';
    }
    }
    
    </script>
    </head>
    <body>
    <form action="script.url"name="form1">
    
    <h1>Please select number of times the service is required</h1>
    <input type="radio" name="service" value="onceonly" onclick="javascript:ChangeDropdowns(this.value)"/> Once Only
    <input type="radio" name="service" value="regular" onclick="javascript:ChangeDropdowns(this.value)"/> Regular Service<br /> <br />
    
    <div id="demo1">
    <input type="radio" name="regularservice" value="twelveyear"/> Once a month for a year
    <input type="radio" name="regularservice" value="sixeyear" /> Once a month for six months
    <input type="radio" name="regularservice" value="onceyear" /> Once a year
    </div>
    
    <div id="demo2">
    <input type="radio" name="years" value="oneyearcontract" /> 1 year contract
    <input type="radio" name="years" value="twoyearcontract" /> 2 year contract
    <input type="radio" name="years" value="threeyearcontract" /> 3 year contract
    </div>
    
    </form>
    </body>
    </html>

IMN logo majestic logo threadwatch logo seochat tools logo