Radio buttons were designed to select one of many.
This little program will allow you to select one radio button and move it up or down in the list.
And when you submit the form it will display the value of the selected radio button.
Javascript Code:
<html>
<head>
<script>
// Array arr1 holds the name/value pairs of the radio buttons. Add or subtract as many as you need.
var arr1 = new Array(
new Array("Radio 1","1"),
new Array("Radio 2","2"),
new Array("Radio 3","3"),
new Array("Radio 4","4"),
new Array("Radio 5","5"),
new Array("Radio 6","6")
);
var v,s;
function shift_down(v)
{
var l=arr1.length;
var t="",j=0,i;
var temp=new Array();
for(i=0;i<l;i++)
{
if(arr1[i][0]==v)
{
t=arr1[i];
}
else
{
temp[j]=arr1[i];j++;
if(t){temp[j]=t;j++;t="";}
}
}
for(i=0;i<temp.length;i++)
{
arr1[i]=temp[i];
}
temp="";
for(i=
0;i<arr1.
length;i++
) {
if(arr1[i][0]==v){s="checked";}else{s="";}
temp+="<input type='radio' name='radio1' id='"+arr1[i][0]+"' value='"+arr1[i][1]+"' onclick='v=this.id'"+s+"> "+arr1[i][0]+"<br />";
}
document.getElementById("div1").innerHTML=temp;
}
function shift_up(v)
{
var l=arr1.length;
var t="",j=l-1,i;
var temp=new Array();
for(i=l-1;i>=0;i--)
{
if(arr1[i][0]==v&&i>0)
{
t=arr1[i];
}
else
{
temp[j]=arr1[i];j--;
if(t){temp[j]=t;j--;t="";}
}
}
for(i=0;i<temp.length;i++)
{
arr1[i]=temp[i];
}
temp="";
for(i=
0;i<arr1.
length;i++
) {
if(arr1[i][0]==v){s="checked";}else{s="";}
temp+="<input type='radio' name='radio1' id='"+arr1[i][0]+"' value='"+arr1[i][1]+"' onclick='v=this.id' "+s+"> "+arr1[i][0]+"<br />";
}
document.getElementById("div1").innerHTML=temp;
}
function show_value()
{
var v = document.getElementsByTagName("input");
var l = v.length;
for(i=0;i<l;i++)
{
if(v[i].type=="radio")
{
if(v[i].checked==true)
{
alert(v[i].value);
}
}
}
}
</script>
</head>
<body onload="shift_down();">
<form action="#" method="post" onsubmit="show_value();return false;">
<div id="div1" style="border:1px solid #000;float:left;padding:10px;"></div>
<p style="clear:both;">
<button onclick="shift_down(v);">Down</button>
<button onclick="shift_up(v);">Up</button>
</p>
<input type="submit" value="Submit" name="submit";>
</form>
</body>
</html>
Linear Mode
