Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: How to select a radio button using javascript?

  1. #1
    Join Date
    May 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation 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
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by rishirich4y View Post
    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
    It is against the specification to have more than one element per page with the same id.

    You haven't shown the full page structure. If you were to do so, there might be a way to access these buttons as a part of the document.forms collection - almost always preferable when dealing with form elements.

    But, even with what you have shown, if you were to use:

    Code:
    <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
    You could:

    Code:
    <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 (<%=option1%> != ""){
    // Radiobutton "No" should be selected.
    document.getElementById('poBoxRadioYes').checked = false;
    document.getElementById('poBoxRadioNo').checked = true;
    }
    else if (<%=option2%> != ""){
    // Radiobutton "Yes" should be selected.
    document.getElementById('poBoxRadioNo').checked = false;
    document.getElementById('poBoxRadioYes').checked = true;
    }
    }
    // -->
    </script>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    May 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    This seems to work only when I add it as part of a function to be executed when a submit button is clicked. But I want it to select the radio button as soon as the page is loaded.

    Thanks,
    Rishi

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Works onload here:

    Code:
    <!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>
    <div>
    <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
    </div>
    <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>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    May 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks a ton dude...It works!

  6. #6
    Join Date
    Aug 2008
    Location
    karanganyar, solo, indonesia
    Posts
    161
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default quenstions

    and what about if not using document.getElementById, but using document.form_name.buttonName.value?

    looks:
    Code:
    <form name="form_a">
    <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
    
    
    <input type="button" value="try" onclick="alert(document.poBoxRadio.value);">
    </form>
    
    
    it should return the value of "yes" or "no" if we check one of it, but it always return "undefined", can anyone help?
    ///////////////////////////////////////////////////
    ///// http://www.mediatutorial.web.id
    ///////////////////////////////////////////////////

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    In your example you aren't even doing document.formname.name.value (which should really be document.formname.elements.name.value), but even if you were, in javascript that's equivalent to getElementById insofar as the element's selector that you are seeking must be unique. You could do it this way though:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    function getPoBox(f, n){
     f = f.form.elements;
     for (var i = f.length - 1; i > -1; --i)
      if(f[i].name == n && f[i].checked)
       return f[i].value;
     return 'undefined';
    }
    </script>
    </head>
    <body>
    <form name="form_a">
    <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
    
    
    <input type="button" value="try" onclick="alert(getPoBox(this, 'poBoxRadio'));">
    </form>
    </body>
    </html>
    because then we are no longer looking for a single element.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Aug 2008
    Location
    karanganyar, solo, indonesia
    Posts
    161
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default hum,

    hum, yes, we can do it by getelementbyid, but is it possible to get it by using document.form_name.buttonName.value?

    look:
    Code:
    <form name="form_a">
    <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
    
    
    <input type="button" value="try" onclick="alert(document.form_a.poBoxRadio.value);">
    </form>
    it always return undefined. hoho
    ///////////////////////////////////////////////////
    ///// http://www.mediatutorial.web.id
    ///////////////////////////////////////////////////

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    My code uses the document.forms method.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Aug 2008
    Location
    karanganyar, solo, indonesia
    Posts
    161
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Arrow hum

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    function getPoBox(f, n){
     f = f.form.elements;
     for (var i = f.length - 1; i > -1; --i)
      if(f[i].name == n && f[i].checked)
       return f[i].value;
     return 'undefined';
    }
    function zoo(){
    	alert(getPoBox('form_a', 'poBoxRadio'));
    
    }
    </script>
    </head>
    <body>
    <form name="form_a">
    <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
    
    
    <input type="button" value="try" onclick="zoo();">
    </form>
    </body>
    </html>
    i tried this code but doesnt work.... actually your code work, but i add function zoo on there and then it not work, what 's wrong? help
    ///////////////////////////////////////////////////
    ///// http://www.mediatutorial.web.id
    ///////////////////////////////////////////////////

Bookmarks

Posting Permissions

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