Checkbox toggle - Dev Shed

Dev Shed Forums Sponsor:

September 22nd, 2012, 06:13 AM

Liz2012

Registered User

Join Date: Sep 2012

Posts: 2

Time spent in forums: 30 m 38 sec
Reputation Power: 0

Other - 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>

September 22nd, 2012, 07:24 AM

php_developer00

Registered User

Join Date: Sep 2012

Posts: 4

Time spent in forums: 1 h 22 m 3 sec
Reputation 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>

September 23rd, 2012, 02:16 AM

Liz2012

Registered User

Join Date: Sep 2012

Posts: 2

Time spent in forums: 30 m 38 sec
Reputation 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!

September 23rd, 2012, 02:38 AM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 656

Time spent in forums: 1 Week 2 Days 7 h 3 m
Reputation Power: 69

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>

Other - Checkbox toggle

Developer Shed Advertisers and Affiliates