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

Thread: How do you attach an event listener to radio button using javascript

  1. #1
    Join Date
    Jul 2013
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default How do you attach an event listener to radio button using javascript

    Hello everyone.

    i am fairly new to javascript and having problems attaching an event listener to a radio button .

    i am trying to get the values from a clicked radio button so that i can then attach those values to a javascript enclode64. but i don't seem to be able to attach to the event.

    it might be easier if i show u what i have done so far;

    The HTML radio button tag: They are NOT enclosed within a form

    PHP Code:
    <input class="link-selector-flash" type="radio" name="link-type" id="link-type-template" data-url-base="www.sample.url1" />

    <
    input class="link-selector-flash" type="radio" name="link-type" id="link-type-template" data-url-base="www.sample.url2" />

    <
    input class="link-selector-flash" type="radio" name="link-type" id="link-type-bespoke" data-url-base="www.sample.url2" /> 
    the javacript code
    PHP Code:
    window.onload = function(){

    document.getElementsByName('link-type').onclick = function(){
     
    alert('it works link name');

      var 
    radioButtons document.getElementsByName("link-type");
        for (var 
    0radioButtons.lengthi++) {
            if (
    radioButtons[i].checked) {

            var 
    thevalue  =  radioButtons[i].value;

       
    document.getElementById('str64').value Base64.encode(thevalue);
            }
        }

    you will note that i tried to place the returned value in a Base64 encode ( i have not enclosed the javacript code for the encoder as this has been separately tested and it works perfectly.

    the imput bar that i tried to transfer it to is listed below .

    PHP Code:
    <input type="text" name="str64" id="str64" size="34" /> 
    The code fell apart because i don't seem to be able to attach the right event to the listener. i.e to listen for the click of the radio button.

    warm regards

    Andreea

  2. #2
    Join Date
    Jul 2008
    Posts
    128
    Thanks
    0
    Thanked 17 Times in 16 Posts

    Default

    Eliminate the onload handler by putting this at the end of the document:

    Code:
    (function()
    {
      var radioButtons = document.getElementsByName("link-type");
       
      for ( var i = 0; radioButtons[ i ]; i++ ) 
        radioButtons[ i ].onclick = f;
    
      function f()
      {
        document.getElementById('str64').value = Base64.encode( this.value );
      }
    })()

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Only real problem there is that those radio buttons have no values.

    I kind of cringe a little though when I see a for loop where a while loop would work, also when I see i++ when ++i would work. These are just efficiencies though and don't matter with such a small amount of items to check. Limiting the loop by the existence of the element will fail in some older Mozilla script engines. Again, a fine point. Best to use the number:

    Code:
    var i = -1, limit = radioButtons.length;
    while(++i < limit) radioButtons[ i ].onclick = f;
    Going backwards is even more efficient if feasible - it is in this case:

    Code:
    var i = radioButtons.length;
    while(--i > -1) radioButtons[ i ].onclick = f;
    All fine points. But the killer is that those radios have no values.
    - John
    ________________________

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

  4. #4
    Join Date
    Jul 2013
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hello jscheuer1's and cluefu

    thank you so much for your time taken to answer this question. Indeed, i think i just experienced the problem echoed by Jscheuer1. i just spent the last 30 mins trying to alert the values from the radio button, but to no avail.

    Indeed, the radio buttons should have some values. it is these values i am trying to transfer .

    if you look at my radio button, you will see that the values are contained within the : data-url-base. i.e

    data-url-base="www.sample.url2"

    it is these values that i need to collect and tranfer each time the radio button is clicked

    i tried the following to echo the values
    (function()
    {
    var radioButtons = document.getElementsByName("link-type");

    for ( var i = 0; radioButtons[ i ]; i++ )
    {
    radioButtons[ i ].onclick = f;

    }
    function f()
    { alert( radioButtons[ i ] );
    document.getElementById('str64').value = Base64.encode( this.value );

    }
    })()
    So , i guess the question is this; how do i do it so that i can incorporate into the function a method to get the values from data-url-base

    warm regards

    Andreea

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You would need AJAX for that. jQuery is the easiest method. But I'm curious how much unencoded data is in those files. The only Base64.encode javascript function I've ever seen cannot handle a lot of unencoded data unless it's already UTF-8 only characters anyway.

    But lets just assume all that is OK for now, then:

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(function($){
    	$('input[name="link-type"]').click(function(){
    		$.ajax({
    			url: this.getAttribute('data-url-base'),
    			cache: false,
    			success: function(result){
    				$('#str64').val(Base64.encode(result));
    			}
    		});
    	});
    });
    </script>
    should be the only script code you need.

    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

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

  6. #6
    Join Date
    Jul 2013
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    i thought i should just mentioned that the value for the radio button have to be placed like this;

    Code:
    data-url-base="www.sample.url2"
    The data-url-base is tied to another script that utilizes these values

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Which other script? The Base64 script, specifically its Base64.encode() function? That's sort of how you have it written. If so, we could forget the jQuery and do:

    Code:
    <script type="text/javascript">
    (function(){
    	function f(){
    		document.getElementById('str64').value = Base64.encode(this.getAttribute('data-url-base'));
    	}
    	var radioButtons = document.getElementsByName("link-type"), i = radioButtons.length;
    	while(--i > -1) radioButtons[ i ].onclick = f;
    })();
    </script>
    Put that before the closing </body> tag.

    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

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

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Here's a working demo using webtoolkit.base64.js (from http://www.webtoolkit.info/javascript-base64.html):

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Button64 Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="webtoolkit.base64.js"></script>
    </head>
    <body>
    <input class="link-selector-flash" type="radio" name="link-type" id="link-type-template" data-url-base="www.sample.url1" /> 
    
    <input class="link-selector-flash" type="radio" name="link-type" id="link-type-template" data-url-base="www.sample.url2" /> 
    
    <input class="link-selector-flash" type="radio" name="link-type" id="link-type-bespoke" data-url-base="www.sample.url2" /> <br>
    <textarea id="str64" cols="50" rows="5" wrap="off"></textarea>
    <script type="text/javascript">
    (function(){
    	function f(){
    		document.getElementById('str64').value = Base64.encode(this.getAttribute('data-url-base'));
    	}
    	var radioButtons = document.getElementsByName("link-type"), i = radioButtons.length;
    	while(--i > -1) radioButtons[ i ].onclick = f;
    })();
    </script>
    </body>
    </html>
    - John
    ________________________

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

  9. #9
    Join Date
    Jul 2013
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hello again

    one last question, when i tried to alert out the values from the returned results, it did not return the values in the radio button. but instead gave me a whole page of information. i have enclosed what i attempted to do below:

    jQuery(function($){
    $('input[name="link-type"]').click(function(){
    $.ajax({
    url: this.getAttribute('data-url-base'),
    cache: false,
    success: function(result){
    alert(result);
    $('#str64').val(Base64.encode(result));

    }
    });
    });
    });
    what should i do?

    warm regards

    Andreea

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    What are you after, the url listed or the actual text? If it's the actual text, use the demo I just made up in my post:

    http://www.dynamicdrive.com/forums/s...247#post297247
    - John
    ________________________

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

  11. The Following User Says Thank You to jscheuer1 For This Useful Post:

    andreea115 (07-19-2013)

Similar Threads

  1. How to select a radio button using javascript?
    By rishirich4y in forum JavaScript
    Replies: 14
    Last Post: 11-09-2011, 01:04 AM
  2. Replies: 1
    Last Post: 06-11-2010, 08:38 AM
  3. event listener not working
    By farridav in forum JavaScript
    Replies: 1
    Last Post: 03-23-2010, 09:16 AM
  4. Replies: 4
    Last Post: 05-05-2007, 09:22 PM
  5. file attach to flash button
    By xeno in forum Other
    Replies: 2
    Last Post: 04-07-2006, 05:32 PM

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
  •