www.webdeveloper.com
Results 1 to 10 of 10

Thread: [RESOLVED] How to select a radio button using javascript?

  1. #1
    Join Date
    May 2008
    Posts
    4

    resolved [RESOLVED] How to select a radio button using javascript?

    Hi,

    I have 2 radio buttons as shown below:

    <input id="poBoxRadio" name="poBoxRadio" type="radio" class="radio-btn" value="No" /> No
    <input id="poBoxRadio" name="poBoxRadio" type="radio" class="radio-btn" value="Yes" /> Yes


    I want to select one of this radio button, according to the following condition in javascript:

    <script type="text/javascript">
    if (<%=option1%> != ""){
    // Radiobutton "No" should be selected.
    }
    else if (<%=option2%> != ""){
    // Radiobutton "Yes" should be selected.
    }
    </script>



    How can I do this in Javascript? Any help will be highly appreciated.

    Thanks,
    Rishi

  2. #2
    Join Date
    Oct 2006
    Location
    Ontario Canada
    Posts
    1,160
    First get the elements By Name
    Second, set the index of the radio button you want checked to true

    PHP Code:
    function selectRadioButton()
    {
    var 
    radioButtons document.getElementsByName('poBoxRadio');
    radioButtons[1].checked true;

    Drew

    Here is a working sample
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <script>
    
    function selectRadioButton()
    {
    var radioButtons = document.getElementsByName('poBoxRadio');
    radioButtons[1].checked = true;
    }
    
    
    </script>
    
    </head>
    
    <body>
    
    
    <input id="poBoxRadio" name="poBoxRadio" type="radio" class="radio-btn" value="No"  /> No
    <input id="poBoxRadio" name="poBoxRadio" type="radio" class="radio-btn" value="Yes" /> Yes
    <label>
    <input type="submit" name="button" id="button" value="Submit" onclick="selectRadioButton()" />
    </label>
    
    </body>
    </html>

  3. #3
    Join Date
    May 2008
    Posts
    4
    Thanks a lot for the info.
    But how can I make sure that one of the checkbox is checked as soon as the page is loaded, not using a submit button.

  4. #4
    Join Date
    Oct 2006
    Location
    Ontario Canada
    Posts
    1,160
    From your code above it looks like you are using ASP.NET

    You might want to check on the server side if the checkbox control is checked in the Page_Load() method.

  5. #5
    Join Date
    May 2008
    Posts
    4
    I am using JSP. I want one of the radiobuttons to be selected according to the condition mentioned in original post, as soon as the page is loaded, without using any submit button. I want to implement this in client-side itself.

    Thanks,
    Rishi

  6. #6
    Join Date
    Oct 2006
    Location
    Ontario Canada
    Posts
    1,160
    Try this

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Select Radio Button</title>
    
    <script type="text/javascript">
    
    function SelectRadioButtons()
    {
    	//DUMMY VARIABLES -- REPLACE WITH JSP VARS
    	var option1 = "<%=option1%>";
    	var option2 = "<%=option2%>";
    	
    	//Get readio buttons
    	var radioButtons = document.getElementsByName('poBoxRadio');
    	
    	//validate
    	if (option1 != "")
    	{
    		radioButtons[0].checked = true; //select NO
    	}
    	else if (option2 != "")
    	{
    		radioButtons[1].checked = true; //select YEs
    	}
    }
    
    
    //ATTACH TO WINDOW ONLAD EVENT
    window.onload = function() { SelectRadioButtons(); }
    </script>
    
    </head>
    <body>
    <input id="poBoxRadio" name="poBoxRadio" type="radio" class="radio-btn" value="No" /> No
    <input id="poBoxRadio" name="poBoxRadio" type="radio" class="radio-btn" value="Yes" /> Yes
    </body>
    </html>

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356

    Question Question ...

    I thought it was not a good idea to have duplicate ID values in a script?
    PHP Code:
    <input id="poBoxRadio" name="poBoxRadio" type="radio" class="radio-btn" value="No" /> No
    <input id="poBoxRadio" name="poBoxRadio" type="radio" class="radio-btn" value="Yes" /> Yes 
    Are they really needed in this case?

  8. #8
    Join Date
    Oct 2006
    Location
    Ontario Canada
    Posts
    1,160
    Well I dont use the ID in the JS code.
    I use document.getElementsByName(...)
    I can then refer to the collection of elements through an array.

    it all depends on how you reference the elements.
    If you change the ID the current function will still work.
    You you change the 'name' then it wont.

  9. #9
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Duplicate ids are invalid, don't use them.

    Why are you not doing this server side?
    At least 98% of internet users' DNA is identical to that of chimpanzees

  10. #10
    Join Date
    May 2008
    Posts
    4
    I have solved this issue using the following:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    var a='', b='d';
    </script>
    </head>
    <body>
    <input id="poBoxRadioNo" name="poBoxRadio" type="radio" class="radio-btn" value="No" /> No
    <input id="poBoxRadioYes" name="poBoxRadio" type="radio" class="radio-btn" value="Yes" /> Yes
    <script type="text/javascript" defer="defer">
    <!--
    if(document.getElementById){
    if (a != ""){
    // Radiobutton "No" should be selected.
    document.getElementById('poBoxRadioYes').checked = false;
    document.getElementById('poBoxRadioNo').checked = true;
    }
    else if (b != ""){
    // Radiobutton "Yes" should be selected.
    document.getElementById('poBoxRadioNo').checked = false;
    document.getElementById('poBoxRadioYes').checked = true;
    }
    }
    // -->
    </script>
    <input disabled type="button" value="UP" onclick="setVariable('move=1')">
    </body>
    </html>



    Thanks to all of you!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles