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

    Toggle visibility of checkboxes

    Hi there,
    Just learning the ropes and wondered if someone could assist with my form.
    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.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <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
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    <title>BuffetQuote 2012 </title>
    <script type="text/javascript">
    
    window.onload = function(){
     Set1();
    }
    
    function Set1(obj){
     var objs=document.form1.regularservice;
     for (var z0=0;z0<objs.length;z0++){
      objs[z0].checked=false;
     }
     var objs=document.form1.years;
     for (var z0=0;z0<objs.length;z0++){
      objs[z0].checked=false;
     }
     document.getElementById('set1').style.display=obj&&obj.value=='regular'?'inline':'none';
     document.getElementById('set2').style.display='none';
    }
    
    function Set2(){
     document.getElementById('set2').style.display='inline';
    }
    
    </script>
    </head>
    <body>
    <form action="script.url"name="form1">
    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.
    
    <h1>Please select number of times the service is required</h1>
    <input type="radio" name="service" value="onceonly" onclick="Set1(this);"/> Once Only
    <input type="radio" name="service" value="regular" onclick="Set1(this);" /> Regular Service<br /> <br />
    
    <fieldset id="set1">
    <input type="radio" name="regularservice" value="twelveyear" onclick="Set2();" /> Once a month for a year
    <input type="radio" name="regularservice" value="sixeyear" onclick="Set2();" /> Once a month for six months
    <input type="radio" name="regularservice" value="onceyear" onclick="Set2();" /> Once a year
    </fieldset>
    <br />
    
    <fieldset id="set2">
    <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
    </fieldset>
    
    </form>
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks Vic - is there any way besides using document.getElementById?
    can you use document.form1.field.value?

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    <title>BuffetQuote 2012 </title>
    <script type="text/javascript">
    
    window.onload = function(){
     Set1();
    }
    
    function Set1(obj){
     var objs=document.form1.regularservice;
     for (var z0=0;z0<objs.length;z0++){
      objs[z0].checked=false;
     }
     objs[0].parentNode.style.display=obj&&obj.value=='regular'?'inline':'none';
     var objs=document.form1.years;
     for (var z0=0;z0<objs.length;z0++){
      objs[z0].checked=false;
     }
     document.form1.years[0].parentNode.style.display='none';
    }
    
    function Set2(){
     document.form1.years[0].parentNode.style.display='inline';
    }
    
    </script>
    </head>
    <body>
    <form action="script.url"name="form1">
    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.
    
    <h1>Please select number of times the service is required</h1>
    <input type="radio" name="service" value="onceonly" onclick="Set1(this);"/> Once Only
    <input type="radio" name="service" value="regular" onclick="Set1(this);" /> Regular Service<br /> <br />
    
    <fieldset>
    <input type="radio" name="regularservice" value="twelveyear" onclick="Set2();" /> Once a month for a year
    <input type="radio" name="regularservice" value="sixeyear" onclick="Set2();" /> Once a month for six months
    <input type="radio" name="regularservice" value="onceyear" onclick="Set2();" /> Once a year
    </fieldset>
    <br />
    
    <fieldset>
    <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
    </fieldset>
    
    </form>
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    Liz.2012 (09-23-2012)


  •  

    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
    •