Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript
| Search | Today's Posts | Mark Forums Read
Javascript General Javascript discussions.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old August 5th, 2004, 04:56 AM
Registered User
 
Join Date: Jul 2004
Location: Blore, Karnataka, India.
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to Mekala Send a message via Yahoo to Mekala
Default Display based on radio button selection

I have 2 radio buttons in page. When the first one is selected a textarea should appear between the 2 buttons & on deselect, the textarea shd disappear. I have the code that displays the textarea correctly when selected and when deselected disappears. But after disappearing the focus is still in the first radio button itself. Can someone clarify with the same.

The code i used is:

<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-16">
<script language="javascript">
<!--
    function swap1() {
        var layer;
        if(document.all){
        layer = document.all("initial");
        }
        else if(!document.all && document.getElementById){
        layer = document.getElementById("initial");
        }
        layer.style.display = 'inline';
        var layer1;
        if(document.all){
        layer1 = document.all("final");
        layer1.style.display = 'none';
        }
        else if(!document.all && document.getElementById){
        layer1 = document.getElementById("final");
        layer1.style.visibility = 'hidden';
        }
        }
        //-->
        </script>
        <script language="javascript">
        <!--
        function swap2() {
        var layer;
        if(document.all){
            layer = document.all("final");
        }
        else if(!document.all && document.getElementById){
            layer = document.getElementById("final");
        }
        layer.style.display = 'inline';
        var layer1;
        if(document.all){
            layer1 = document.all("initial");
            layer1.style.display = 'none';
        }
        else if(!document.all && document.getElementById){
            layer1 = document.getElementById("initial");
            layer1.style.visibility = 'hidden';
        }
        }
        //--></script></head>
        <body>
        <input type="radio" name="radio" value="1" onclick="swap2()" onblur="swap1()">Check1
        <div id="outer" style="position:relative;">
        <div id="initial" style="display:inline"><br></div>
        <div id="final" style="display:none"><br><textarea rows="5" cols="70">blalalansdflasfd</textarea></div>
        </div>
        <input type="radio" name="radio" value="2">Check2</body>
</html>
 
Old August 5th, 2004, 05:07 AM
Friend of Wrox
 
Join Date: Jul 2003
Location: , , United Kingdom.
Posts: 683
Thanks: 0
Thanked 1 Time in 1 Post
Default

Hi Mekala,

I think you need to move the function call to the other radio button as an onclick, rather than calling it onblur...

Code:
<input type="radio" name="radio" value="1" onclick="swap2()">Check1

... 

<input type="radio" name="radio" value="2" onclick="swap1()" >Check2
HTH,

Chris

 
Old August 5th, 2004, 05:45 AM
Registered User
 
Join Date: Jul 2004
Location: Blore, Karnataka, India.
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to Mekala Send a message via Yahoo to Mekala
Default

Hi chris,
Thanks for ur reply!
But the problem is the second radio button generated is dynamic. It is one among the many!
I need to include the events only to the first radio button and cant add to the rest. So, can it be done?

Mekala
 
Old August 5th, 2004, 06:27 AM
Friend of Wrox
 
Join Date: Jul 2003
Location: , , United Kingdom.
Posts: 683
Thanks: 0
Thanked 1 Time in 1 Post
Default

Hi Mekala,

Can't you attach the method call to the onclick when the radio button is created dynamically?

If not, you could attach it when the onclick is executed - add the following to the start of your swap2()

Code:
function swap2(pRad) { 

    // attach hide function to other button if it exists
    var f = pRad.form;
    for(var i = 0; i < f.length; i++){
        var el = f.elements[i];
        if(el.name == pRad.name && el != pRad){
            el.onclick = swap1;
            break;
        }
    }
and change the first radio button to...

Code:
<input type="radio" name="radio" value="1" onclick="swap2(this)">
HTH,

Chris

 
Old August 5th, 2004, 11:36 PM
Registered User
 
Join Date: Jul 2004
Location: Blore, Karnataka, India.
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via AIM to Mekala Send a message via Yahoo to Mekala
Default

Hi chris,

Thanks! Its working fine!

Mekala




Similar Threads
Thread Thread Starter Forum Replies Last Post
How to automate selection of radio button using vb satish_k VB.NET 11 December 14th, 2006 11:28 AM
enable/disable textfields based on radio selection carrie.mims Javascript How-To 5 December 8th, 2006 05:41 AM
Form changes with radio button selection jekel13 PHP How-To 16 February 17th, 2006 04:56 PM
Page display based on radio button selected Mekala HTML Code Clinic 3 July 10th, 2004 06:12 AM
check if radio button list selection made jtyson Classic ASP Basics 1 July 3rd, 2004 12:34 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.