Show / Hide Forms

[Norman]

Hello,
I have a working Show / Hide form, that works on FF, but what I would
like to do is to be able to display one part when a user clicks on one
radio button and display another part when the user clicks on the
second radio button - here is the code which just shows / hides the
whole form:

<script type="text/javascript">
<!--
var dl_elements = new Array('dl_address_country',
'dl_address_region',
'dl_address_county',
'dl_address_uk_region');

function show_creation_form() {
for (i=0; i < dl_elements.length; i++) {
element_id = dl_elements;
element= document.getElementById(element_id);
element.style.visibility = 'visible';
}
}

function hide_creation_form() {
for (i=0; i < dl_elements.length; i++) {
element_id = dl_elements;
element = document.getElementById(element_id);
element.style.visibility = 'hidden';
}
}
-->
</script>

<!-- This form is for the UK only -->
<dl id="dl_address_uk_region">
<dt><label for="company_region">Region</label></dt>
<dd>
<select name="company_region">
<option value="">[Select One]</option>
<optgroup stl:repeat="region create_form/regions"
label="${region/label}">
<option stl:repeat="county region/counties"
value="${county/id}">${county/label}</option>
</optgroup>
</select>
</dd>
</dl>
<!-- This form is for the UK only -->

<!-- Non UK States, teritories or provinces form starts here -->

<dl id="dl_address_country">
<dt><label for="address_country">Country</label></dt>
<dd>
<input size="40" name="address_country" />
</dd>
</dl>
<dl id="dl_address_region">
<dt><label for="address_region">Region/State</label></dt>
<dd>
<input size="40" name="address_region" />
</dd>
</dl>
<dl id="dl_address_county">
<dt><label for="address_county">County</label></dt>
<dd>
<input size="40" name="address_county" />
</dd>
</dl>

So, what I would like is that if a User clicks on the UK - radio
button only the first part of the form is shown and hide the second
part and vice a versa, when a User clicks on Non - UK radio button the
second part of the form is show and the first is hidden.

Any advise will be much appreciated.

Many thanks

Norman

 

[broughcut]

I haven't got time to go through your code but here's how I did it a
few days ago

markup (I couldn't get it to work with the onclick in an external js
file for some reason):

<input type="radio" name="gymspashop" id="gymspashop" value="Gym"
checked="checked" onclick="Radio(this);"> Gym
<input type="radio" name="gymspashop" id="gymspashop" value="Spa"
onclick="Radio(this);"> Spa

js:


function analyseRadio(rad) {


if (rad.value == "Spa") {
document.getElementById('contactcontext-spa').style.display = "block"
document.getElementById('contactcontext-gym').style.display = "none"
}


etc


}

 

[broughcut]

spot the typo. should read onclick="analyseRadio(this)

 

[Norman]

spot the typo. should read onclick="analyseRadio(this)

Hi thanks for your reply, but I couldn't get it to work...

Do I need to give the id=contactcontext-spa or contactcontext-gym for
the differnt input values, please if you can send me the full example.

Cheers

Norman

PS Also, I found http://www.quirksmode.org/dom/usableforms.html, could
be of help...

 

[broughcut]

Hi thanks for your reply, but I couldn't get it to work...

Do I need to give the id=contactcontext-spa or contactcontext-gym for
the differnt input values, please if you can send me the full example.

example here:

http://tinyurl.com/37fbhj

 

[broughcut]

did I just paste the wrong tinyurl...

http://tinyurl.com/37fbhj

assign each radio button a unique value -- this value will be passed
on by the onclick event to the radio() function. As the radio buttons
themselves are an array each shares the same name and id.

the div 'contactcontext-spa' in this example is the name of the div
that is to be revealed or hidden.

 

[Norman]

did I just paste the wrong tinyurl...

http://tinyurl.com/37fbhj

assign each radio button a unique value -- this value will be passed
on by the onclick event to the radio() function. As the radio buttons
themselves are an array each shares the same name and id.

the div 'contactcontext-spa' in this example is the name of the div
that is to be revealed or hidden.

Thanks for your help, I got it to work