RE: JS and Radio Button Issue

[Robertson-Ravo, Neil (RX)]

I think what you have here is simply Prototype - you should not require
jquery.







-----Original Message-----
From: Kevan Stannard [mailto:[EMAIL PROTECTED] 
Sent: 10 January 2007 09:27
To: CF-Talk
Subject: RE: JS and Radio Button Issue

Hi Bruce,

Something that you might want to look at is either the Prototype or jQuery
(www.jquery.com) javascript libraries. They are just amazing in how they can
manipulate a page. They are cross browser compatible too.

For example, using jQuery you would write your code as follows (may not be
exactly right (I am still learning) but will give you the idea)

Just include the jquery-latest.js file at the top of your page.

<script language="JavaScript">
    function toggle(divToShow) {
        if (divToShow == "with") {
            $("#withdiv").show();
            $("#withoutdiv").hide();
        } else {
            $("#withdiv").hide();
            $("#withoutdiv").show();
        }
    }
</script>

With jQuery it helps to know a little CSS as the same syntax is used for
selecting page elements.

Best regards

Kevan


-----Original Message-----
From: Bruce Sorge [mailto:[EMAIL PROTECTED] 
Sent: Wednesday, 10 January 2007 3:05 PM
To: CF-Talk
Subject: RE: JS and Radio Button Issue

Thanks Charlie. That did it.

-----Original Message-----
From: Charlie Griefer [mailto:[EMAIL PROTECTED] 
Sent: Tuesday, January 09, 2007 4:20 PM
To: CF-Talk
Subject: Re: JS and Radio Button Issue

few things i can see would be a problem.

you have multiple elements with ids "with" and "without" (the radio
buttons and the divs).

the code below should work.

<script language="JavaScript">
        function toggle(divToShow) {
                if (document.getElementById) {
                        if (divToShow == "with") {
        
document.getElementById('withdiv').style.display = "inline";
        
document.getElementById('withoutdiv').style.display = "none";
                        } else {
        
document.getElementById('withdiv').style.display = "none";
        
document.getElementById('withoutdiv').style.display = "inline";
                        }
                }
        }
</script>

<input type="radio" name="VBM" value="1" id="with"
onclick="toggle('with')" /> With
<br /><br />
<input type="radio" name="VBM" value="2" id="without"
onclick="toggle('without')" /> Without

<br /><br />

<div id="withdiv" style="display:none;">
        With vote by mail options here
</div>
<div id="withoutdiv" style="display:none;">
        without vote by mail options here
</div>

On 1/9/07, Bruce Sorge <[EMAIL PROTECTED]> wrote:
> I have a form that has two radio buttons. Their function is to show one of
> two hidden divs.
> The JS is this:
> <script language="JavaScript">
> function toggle('with', 'without')
> {
> if (document.getElementById) {
> withvbm= document.getElementById('with');
> withoutvbm= document.getElementById('without');
> }
>
> if (withvbm.style.display == "none"){
> withvbm.style.display = "";
> withoutvbm.style.display = "none";
> }
>
> else if (withoutvbm.style.display == "none"){
> withoutvbm.style.display = "";
> withvbm.style.display = "none";
> }
> }
> </script>
> The radio buttons look like this:
>  <input type="radio" name="VBM" value="1" id="with"
onclick="toggle('with',
> 'without')">With<BR><BR>
>    <input type="radio" name="VBM" value="2" id="without"
> onclick="toggle('without', 'with')">With Out
>
> And the divs look like this:
>  <div id='with' style="display:none;">
>  With vote by mail options here
>  </div>
>  <div id='without' style="display:none;">
>  without vote by mail options here
>  </div>
> When I click either button, I get an error that and Object is expected.
The
> error is on the radio buttons. From what I can tell everything looks OK.
Can
> anyone see any issues with this? Also, I tried changing the first div's
> style to display:block assuming that the page needed to see one of them
and
> of it did not work, but then I though no, that cannot be it since I want
> both div's hidden until the user clicks one of the buttons.
>
> Thanks,
> --
> Bruce Sorge
>
>
> 







~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Create robust enterprise, web RIAs.
Upgrade & integrate Adobe Coldfusion MX7 with Flex 2
http://ad.doubleclick.net/clk;56760587;14748456;a?http://www.adobe.com/products/coldfusion/flex2/?sdid=LVNU

Archive: 
http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:266112
Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4