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

[andreea115]

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

<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

window.onload = function(){

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

  var radioButtons = document.getElementsByName("link-type");
    for (var i = 0; i < radioButtons.length; i++) {
        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 .

<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

[clueful]

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

(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 );
  }
})()

[jscheuer1]

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:

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:

var i = radioButtons.length;
while(--i > -1) radioButtons[ i ].onclick = f;

All fine points. But the killer is that those radios have no values.

[andreea115]

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

[jscheuer1]

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:

<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.

[andreea115]

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

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

The data-url-base is tied to another script that utilizes these values

[jscheuer1]

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:

<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.

[jscheuer1]

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

<!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>

[andreea115]

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

[jscheuer1]

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