Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Radio Button OnChange Event

Status
Not open for further replies.
antonyx6666

antonyx6666

Programmer
Sep 9, 2010
38
GB
Hello all

I have some radio buttons that update some drop down menus on my form.

Each radio button has a different value (1-7). The problem I am having is that even when I select radio button 5, it is updating the drop down menus as value 1.

Not quite sure why this is happening. Any help would be greatly appreciated.

The HTML in full is below:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>test page</title>

<SCRIPT type="text/javascript">
/*<![CDATA[*/

var FillArray=[];
FillArray[1]=[4,2,2];
FillArray[2]=[4,2,2];
FillArray[3]=[4,2,2];
FillArray[4]=[4,3,3];
FillArray[5]=[5,4,4];
FillArray[6]=[6,5,5];
FillArray[7]=[8,8,8];

function Fill(){
 var ary=FillArray[document.getElementById('radiochoice').value],selary=['pk1pax','pk1case','pk1carry'],sel,z0=0,z1a;
 for (;z0<selary.length;z0++){
  sel=document.getElementById(selary[z0]);
  sel.options.length=0;
  if (ary&&ary[z0]){
   for (z1a=0;z1a<ary[z0];z1a++){
    sel.options[z1a]=new Option(z1a+1,z1a+1);
   }
   sel.selectedIndex=0;
  }
 }
}
/*]]>*/
</SCRIPT>


</head>

<body>

<form id="bookingform" name="bookingform" action="##">

<!-- start -->

<p>
Value 1<input type="radio" name="radiochoice" id="radiochoice" value="1" onclick="Fill();">
Value 4<input type="radio" name="radiochoice" id="radiochoice" value="4" onclick="Fill();">
Value 5<input type="radio" name="radiochoice" id="radiochoice" value="5" onclick="Fill();">
Value 7<input type="radio" name="radiochoice" id="radiochoice" value="7" onclick="Fill();">
</p>

<p>
Value 2<input type="radio" name="radiochoice" id="radiochoice" value="2" onclick="Fill();">
Value 3<input type="radio" name="radiochoice" id="radiochoice" value="3" onclick="Fill();">
Value 6<input type="radio" name="radiochoice" id="radiochoice" value="6" onclick="Fill();">
</p>

<p>Drop 1: <select style="width:50px;" class="smallselect" name="pk1pax" id="pk1pax">
<option value="">...</option></select></p>

<p>Drop 2: <select style="width:50px;" class="smallselect" name="pk1case" id="pk1case">
<option value="">...</option></select></p>

<p>Drop 3: <select style="width:50px;" class="smallselect" name="pk1carry" id="pk1carry">
<option value="">...</option></select></p>

<!-- end -->

</form>

</body>
</html>
 
Sort by date Sort by votes
this works for me. the problem you are having is that the radio button always has the same value regardless of whether it is checked. and as you have given all the radios the same ID (bad idea), only the first ever gets tested. which always has the value of 1.

apply an event listener to a change in state of any of the radio buttons, then test whether the change is selected or not. then act on that.

Code: 
<!DOCTYPE HTML>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>test page</title>

<script type="text/javascript">

var FillArray=[];
FillArray[1]=[4,2,2];
FillArray[2]=[4,2,2];
FillArray[3]=[4,2,2];
FillArray[4]=[4,3,3];
FillArray[5]=[5,4,4];
FillArray[6]=[6,5,5];
FillArray[7]=[8,8,8];


function init(){
	var radios = document.getElementsByName('radiochoice');
	for (var i=0; i < radios.length; i++) {
		radios[i].addEventListener('click', function(e){ Fill(this);}, false);
		//set initial state on page load
		Fill(radios[i]);
	}
}

function Fill( elem ){
	elem = (typeof elem != 'undefined') ? elem : this;
	if(elem.checked){
		var val = elem.value;
	} else {
		return;
	}
	if(typeof FillArray[val] == 'undefined') return;
	
	var sels = document.getElementsByTagName('select');
	for(var i = 0; i < sels.length; i++){
		sels[i].innerHTML = ''; //get rid of ellipsis or existing elements
		for(var j=1; j<FillArray[val][i]; j++){			
			var option=document.createElement("option");
			option.text = j ;
			option.value = j ;
			sels[i].add(option);
		}
	}
}



</script>


</head>

<body onload="init();">

<form id="bookingform" name="bookingform" action="##">

<!-- start -->

<p>
Value 1<input type="radio" name="radiochoice" id="radiochoice" value="1" >
Value 4<input type="radio" name="radiochoice" id="radiochoice" value="4" >
Value 5<input type="radio" name="radiochoice" id="radiochoice" value="5" >
Value 7<input type="radio" name="radiochoice" id="radiochoice" value="7" >
</p>

<p>
Value 2<input type="radio" name="radiochoice" id="radiochoice" value="2" >
Value 3<input type="radio" name="radiochoice" id="radiochoice" value="3" >
Value 6<input type="radio" name="radiochoice" id="radiochoice" value="6" >
</p>

<p>Drop 1: <select style="width:50px;" class="smallselect" name="pk1pax" id="pk1pax">
<option value="">...</option></select></p>

<p>Drop 2: <select style="width:50px;" class="smallselect" name="pk1case" id="pk1case">
<option value="">...</option></select></p>

<p>Drop 3: <select style="width:50px;" class="smallselect" name="pk1carry" id="pk1carry">
<option value="">...</option></select></p>

<!-- end -->

</form>

</body>
</html>
 
Upvote 0 Downvote
Thank you for that. Works great.

Just for the record, the array above FillArray[7]=[8,8,8]; actually shows options 1-7 only in the drop down menu it preifills, however you can just use FillArray[7]=[9,9,9]; to display 1-8.

 
Upvote 0 Downvote
you are corrrect of course. change line 42 as shown

Code: 
	for(var j=1; j<[red]=[/red]FillArray[val][i]; j++){
 
Upvote 0 Downvote
Hi there, am just trying to edit the code now to apply to my actual website.

The code you produced did not actually specify which <select> items to apply the rule to. On the example page there were no other <select> items but on my actual form there are plenty others.

Therefore this line:

Code: 
function Fill( elem ){
	elem = (typeof elem != 'undefined') ? elem : this;
	if(elem.checked){
		var val = elem.value;
	} else {
		return;
	}
	if(typeof FillArray[val] == 'undefined') return;
	
	[b]var sels = document.getElementsByTagName('select');[/b]
	for(var i = 0; i < sels.length; i++){
		sels[i].innerHTML = ''; //get rid of ellipsis or existing elements
		for(var j=1; j<FillArray[val][i]; j++){			
			var option=document.createElement("option");
			option.text = j ;
			option.value = j ;
			sels[i].add(option);
		}
	}
}

I have changed to...

Code: 
function Fill( elem ){
	elem = (typeof elem != 'undefined') ? elem : this;
	if(elem.checked){
		var val = elem.value;
	} else {
		return;
	}
	if(typeof FillArray[val] == 'undefined') return;
	
	[b]var sels = document.getElementsByTagName('pk1pax','pk1case','pk1carry');[/b]
	for(var i = 0; i < sels.length; i++){
		sels[i].innerHTML = ''; //get rid of ellipsis or existing elements
		for(var j=1; j<FillArray[val][i]; j++){			
			var option=document.createElement("option");
			option.text = j ;
			option.value = j ;
			sels[i].add(option);
		}
	}
}

but that hasn't worked, perhaps it's a syntax problem...

thanks.
 
Upvote 0 Downvote
also... I do not wish to use the same radio ID's as it invalidates my code, therefore i think we need to change the following:

Code: 
function init(){
	var radios = document.getElementsByName('radiochoice');
	for (var i=0; i < radios.length; i++) {
		radios[i].addEventListener('click', function(e){ Fill(this);}, false);
		//set initial state on page load
		Fill(radios[i]);
	}
}

basically i want the rules to be applied as follows based on the following IDs (the radios will all have a NAME of pk1vehicle)

radio id=pksal > FillArray[1]=[4,2,2];
radio id=pksalexe > FillArray[2]=[4,2,2];
radio id=pksalvip > FillArray[3]=[4,2,2];
radio id=pkest > FillArray[4]=[4,3,3];
radio id=pkmpv > FillArray[5]=[5,4,4];
radio id=pkmpvexe > FillArray[6]=[6,5,5];
radio id=pkvan > FillArray[7]=[8,8,8];
 
Upvote 0 Downvote
maybe it would be easier to create a page with those items... i shall do that shortly to illustrate my request.
 
Upvote 0 Downvote
if you can get this page functioning where the named radio buttons apply the rule to the 3 selects that would be great!

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

<html>
<head>

<script type="text/javascript">

var FillArray=[];
FillArray[1]=[4,2,2];
FillArray[2]=[4,2,2];
FillArray[3]=[4,2,2];
FillArray[4]=[4,3,3];
FillArray[5]=[5,4,4];
FillArray[6]=[6,5,5];
FillArray[7]=[8,8,8];


function init(){
	var radios = document.getElementsByName('pk1vehicle');
	for (var i=0; i < radios.length; i++) {
		radios[i].addEventListener('click', function(e){ Fill(this);}, false);
		//set initial state on page load
		Fill(radios[i]);
	}
}

function Fill( elem ){
	elem = (typeof elem != 'undefined') ? elem : this;
	if(elem.checked){
		var val = elem.value;
	} else {
		return;
	}
	if(typeof FillArray[val] == 'undefined') return;
	
	var sels = document.getElementsByTagName('pk1pax','pk1case','pk1carry');
	for(var i = 0; i < sels.length; i++){
		sels[i].innerHTML = ''; //get rid of ellipsis or existing elements
		for(var j=1; j<=FillArray[val][i]; j++){
		var option=document.createElement("option");
			option.text = j ;
			option.value = j ;
			sels[i].add(option);
		}
	}
}

</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>test page</title>

</head>

<body onload="init();">

<form id="bookingform" name="bookingform" action="##">

<p>Please tell us the type of vehicle you require. If you are unsure please see our fleet page.</p>

<p>
<input type="radio" name="pk1vehicle" id="pksal" value="1"><img src="saloon.jpg" alt="Saloon Car">
<input type="radio" name="pk1vehicle" id="pkest" value="4"><img src="estate.jpg" alt="Estate Car">
<input type="radio" name="pk1vehicle" id="pkmpv" value="5"><img src="people-carrier.jpg" alt="People Carrier">
<input type="radio" name="pk1vehicle" id="pkvan" value="7"><img src="minivan.jpg" alt="Minivan">
</p>

<p>
<input type="radio" name="pk1vehicle" id="pksalexe" value="2"><img src="executive-saloon.jpg" alt="Executive Saloon Car">
<input type="radio" name="pk1vehicle" id="pksalvip" value="3"><img src="vip-saloon.jpg" alt="VIP Saloon Car">
<input type="radio" name="pk1vehicle" id="pkmpvexe" value="6"><img src="executive-people-carrier.jpg" alt="Executive People Carrier">
</p>

<p>Passengers: <select style="width:50px;" class="smallselect" name="pk1pax" id="pk1pax">
<option value="">...</option></select></p>

<p>Large bags (check-in size): <select style="width:50px;" class="smallselect" name="pk1case" id="pk1case">
<option value="">...</option></select></p>

<p>Small bags (carry-on size): <select style="width:50px;" class="smallselect" name="pk1carry" id="pk1carry">
<option value="">...</option></select></p>

</form>

</body>
</html>
 
Upvote 0 Downvote
hello

just change this line as shown
Code: 
var sels = document.getElementsByTagName([red]'select'[/red]);

basically i want the rules to be applied as follows based on the following IDs (the radios will all have a NAME of pk1vehicle)
Click to expand...

the array element of FillArray is chosen dependent on the value of the radio button that is clicked. so just ensure that the value attribute corresponds to the right bit of FillArray.

Code: 
var sels = document.getElementsByTagName('pk1pax','pk1case','pk1carry');
but that hasn't worked, perhaps it's a syntax problem...
Click to expand...

no. getElementsByTagName() takes a tag name as an argument, not an ID or a control name. in this case 'select'. the select boxes are assigned to an array of dom nodes in the dom order in which they are found.

 
Upvote 0 Downvote
ok so just to confirm, the code works but it is applying the rule to the 1st, 2nd and 3rd select items on my form.

at present i would need the rule to apply to the 5th, 6th and 7th select items on my form.

what would i need to change?

would it be..

Code: 
for(var i = 5; i < sels.length; i++){

or something of that sort?

 
Upvote 0 Downvote
I see, I can only see three selects on your form.

but yes, in your circumstances the code would look more like this

Code: 
function Fill(elem){
	elem = (typeof elem != 'undefined') ? elem : this;
	if (elem.checked) {
		var val = elem.value;
	}
	else {
		return;
	}
	if (typeof FillArray[val] == 'undefined') 
		return;
	
	var sels = document.getElementsByTagName('select');
	for (var i = 5; i <= sels.length; i++) {
		sels[i].innerHTML = ''; //get rid of ellipsis or existing elements
		for (var j = 1; j <= FillArray[val][i - 5]; j++) {
			var option = document.createElement("option");
			option.text = j;
			option.value = j;
			sels[i].add( option );
		}
	}
}
 
Upvote 0 Downvote
ok i have adjusted the code slightly and it now correctly updates the 5th, 6th and 7th select items on my form. however, this code is also updating the 8th select item which i do not want it to affect.. rather than putting in actual values into the 8th select it is just removing the default values and replacing it with blanks.

Code: 
function Fill(elem){
	elem = (typeof elem != 'undefined') ? elem : this;
	if (elem.checked) {
		var val = elem.value;
	}
	else {
		return;
	}
	if (typeof FillArray[val] == 'undefined') 
		return;
	
	var sels = document.getElementsByTagName('select');
	for (var i = 4; i < sels.length; i++) {
		sels[i].innerHTML = ''; //get rid of ellipsis or existing elements
		for (var j = 1; j <= FillArray[val][i - 4]; j++) {
			var option = document.createElement("option");
			option.text = j;
			option.value = j;
			sels[i].add( option );
		}
	}
}
 
Upvote 0 Downvote
this line here
Code: 
for (var i = 4; i < sels.length; i++) {
iterates over your select boxes.
because arrays and collections are zero-based (they start from the zeroth item) in javascript, setting i=4 means the first select box that will be handled is the _fifth_ in human counting.

setting the 'until' part of the for loop means that the loop will continue while the condition is true. so if you want to go one less than the number of selects, you need to subtract one from the until.

Code: 
for (var i = 4; i < sels.length - 1; i++ ) {

this is the same construct for the most basic 'for' loops that exists in many languages.
 
Upvote 0 Downvote
Hi again, that new line still has the same affect. It puts the array values in the select 4, 5 and 6 but then puts blank values in all remaining selects on the form. is there another way to restrict it to just the selects i want?
 
Upvote 0 Downvote
this code is tested. it acts _only_ on the 5th, 6th and 7th selects.

Code: 
<!DOCTYPE HTML>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>test page</title>

<script type="text/javascript">

var FillArray=[];
FillArray[1]=[4,2,2];
FillArray[2]=[4,2,2];
FillArray[3]=[4,2,2];
FillArray[4]=[4,3,3];
FillArray[5]=[5,4,4];
FillArray[6]=[6,5,5];
FillArray[7]=[8,8,8];


function init(){
	var radios = document.getElementsByName('radiochoice');
	for (var i=0; i < radios.length; i++) {
		radios[i].addEventListener('click', function(e){ Fill(this);}, false);
		//set initial state on page load
		Fill(radios[i]);
	}
}

function Fill(elem){
	elem = (typeof elem != 'undefined') ? elem : this;
	if (elem.checked) {
		var val = elem.value;
	}
	else {
		return;
	}
	if (typeof FillArray[val] == 'undefined') 
		return;
	
	var sels = document.getElementsByTagName("select");
	var l = sels.length;
	l--;
	for (var i = 4; i < (sels.length - 1) ; i++ ) {
		sels[i].innerHTML = ''; //get rid of ellipsis or existing elements
		for (var j = 1; j <= FillArray[val][i - 4]; j++) {
			var option = document.createElement("option");
			option.text = j;
			option.value = j;
			sels[i].add( option );
		}
	}
} 



</script>


</head>

<body onload="init();">

<form id="bookingform" name="bookingform" action="##">

<!-- start -->

<p>
Value 1<input type="radio" name="radiochoice" id="radiochoice" value="1" >
Value 4<input type="radio" name="radiochoice" id="radiochoice" value="4" >
Value 5<input type="radio" name="radiochoice" id="radiochoice" value="5" >
Value 7<input type="radio" name="radiochoice" id="radiochoice" value="7" >
</p>

<p>
Value 2<input type="radio" name="radiochoice" id="radiochoice" value="2" >
Value 3<input type="radio" name="radiochoice" id="radiochoice" value="3" >
Value 6<input type="radio" name="radiochoice" id="radiochoice" value="6" >
</p>

<p>Drop 1: <select style="width:50px;" class="smallselect" name="pk1pax" id="pk1pax">
<option value="">...</option></select></p>

<p>Drop 2: <select style="width:50px;" class="smallselect" name="pk1case" id="pk1case">
<option value="">...</option></select></p>

<p>Drop 3: <select style="width:50px;" class="smallselect" name="pk1carry" id="pk1carry">
<option value="">...</option></select></p>


<p>Drop 4: <select style="width:50px;" class="smallselect" name="pk1pax" id="pk1pax_1">
<option value="">...</option></select></p>

<p>Drop 5: <select style="width:50px;" class="smallselect" name="pk1case" id="pk1case_1">
<option value="">...</option></select></p>

<p>Drop 6: <select style="width:50px;" class="smallselect" name="pk1carry" id="pk1carry_1">
<option value="">...</option></select></p>

<p>Drop 7: <select style="width:50px;" class="smallselect" name="pk1pax" id="pk1pax_2">
<option value="">...</option></select></p>

<p>Drop 8: <select style="width:50px;" class="smallselect" name="pk1case" id="pk1case_2">
<option value="">...</option></select></p>
<!-- end -->

</form>

</body>
</html>

you can also address the select boxes directly of course.

Code: 
function Fill(elem){
	elem = (typeof elem != 'undefined') ? elem : this;
	if (elem.checked) {
		var val = elem.value;
	}
	else {
		return;
	}
	if (typeof FillArray[val] == 'undefined') 
		return;
	var sel = new Array;
	sel[0] = document.getElementById('pk1case_1');
	sel[1] = document.getElementById('pk1carry_1');
	sel[2] = document.getElementById('pk1pax_2');
	
	for (var i = 0; i < sel.length ; i++ ) {
		sel[i].innerHTML = ''; //get rid of ellipsis or existing elements
		for (var j = 1; j <= FillArray[val][i]; j++) {
			var option = document.createElement("option");
			option.text = j;
			option.value = j;
			sel[i].add( option );
		}
	}
}
 
Upvote 0 Downvote
Hi, I tried the code that lists the individual selects and it works fine. Thanks a lot for your efforts.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
143
gmmastros
gmmastros
berkshirea
  • Locked
  • Question
Radio Button Clicked, Another Radio Becomes Mandatory 1
Replies
2
Views
541
berkshirea
berkshirea
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
534
Rayj0000
Rayj0000
TheLazyPig
  • Locked
  • Question
Disable radio button after edit button click
Replies
1
Views
168
xwb
xwb
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
245
Daniel K
Daniel K

Part and Inventory Search

Sponsor

Back
Top