...

View Full Version : how to create a chained selection ?



graziano
11-12-2004, 06:37 AM
Hello

I have 2 radio buttons

* CARS
o House

The html code is the following


<html>
<head>
<title>TEST</title>
</head>
<body>

<form method="POST" action="http://www.post.com">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr>
<td width="4%"><input type="radio" value="car" name="choose" checked></td>
<td width="96%">CAR</td>
</tr>
<tr>
<td width="4%"><input type="radio" value="house" name="choose"></td>
<td width="96%">House</td>
</tr>
</table>


<p><input type="submit" value="CONTINUE" name="B1"></p>
</form>
</body>

</html>

below the 2 radio modules above , I would have a disabled module like this



<select size="1" name="chooselesect">
<option value="audi" selected>audi</option>
</select>


When an user select the "Car" radio , a javascript code should activate
this



<p><select size="1" name="chooselesect">
<option value="audi" selected>audi</option>
<option value="mercedes">mercedes</option>
<option value="alfa romeo">alfa romeo</option>
</select></p>


When an user select the "House" radio , a javascript code should instead activate this



<p><select size="1" name="chooseselect">
<option value="audi">rent</option>
<option value="buy">buy</option>
</select></p>


Any way to do that with javascript ?

Thanks a lot
Graziano

Kor
11-12-2004, 09:24 AM
Try this:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="JavaScript" type="text/JavaScript">
var cars= new Array()
cars[0] ='audi';
cars[1] ='mercedes';
cars[2] ='alfa romeo';
var houses= new Array()
houses[0] ='rent';
houses[1] ='buy';
function setSel(r){
var s=document.getElementById('chooselesect');
while(s.hasChildNodes()){
s.removeChild(s.childNodes[0]);//removes the old elements
}
if(r=='car'){var arr=cars}else{var arr=houses}//get the needed array
for(var i=0;i<arr.length;i++){
var newE = document.createElement('option');//creates the new option element
var texE = document.createTextNode(arr[i]);//creates the text
newE.setAttribute('value',arr[i]);//set the attribute's value
s.appendChild(newE);//appends element
newE.appendChild(texE);//appends text
}
s.disabled=false;//enable selection
}
</script>
</head>
<body>
<form method="POST" action="http://www.post.com">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr>
<td width="4%"><input type="radio" value="car" name="choose" onclick="setSel(this.value)"></td>
<td width="96%">CAR</td>
</tr>
<tr>
<td width="4%"><input type="radio" value="house" name="choose" onclick="setSel(this.value)"></td>
<td width="96%">House</td>
</tr>
</table>
<select size="1" name="chooselesect" id="chooselesect" disabled>
<option value="audi" selected>audi</option>
</select>

<p><input type="submit" value="CONTINUE" name="B1"></p>
</form>

</body>
</html>

graziano
11-12-2004, 10:02 AM
foarte multumescu ! :thumbsup:

Kor , a private question for you . On december I will go on craiova from my parent's wife . I will bring my notebook , I will need to find an isp for internet connection . Can you suggest me a romania isp which can offer free internet (where I pay only phone call) after online registration ?
In this way I will be able to connect from house of my parents using their phone.
Multumescu !

graziano
11-12-2004, 10:44 AM
Kor another problem , I hope you can help me again ..

I added some rollover effect . When I click on radio button no problem
it works. If I click on car OR house <select> doesn't change as required.
Any idea to solve this ?

I will have to add also another select .
I was thinking to do this


var moto= new Array()
moto[0] ='rent';
moto[1] ='buy';


and to replace


if(r=='car'){var arr=cars}else{var arr=houses}


with



if(r=='car')
{var arr=cars}
if(r=='houses')
{var arr=houses}
if(r=='moto')
{var arr=moto}

Will it work ?

Thank you



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="JavaScript" type="text/JavaScript">
var cars= new Array()
cars[0] ='audi';
cars[1] ='mercedes';
cars[2] ='alfa romeo';
var houses= new Array()
houses[0] ='rent';
houses[1] ='buy';
function setSel(r){
var s=document.getElementById('chooselesect');
while(s.hasChildNodes()){
s.removeChild(s.childNodes[0]);//removes the old elements
}
if(r=='car'){var arr=cars}else{var arr=houses}//get the needed array
for(var i=0;i<arr.length;i++){
var newE = document.createElement('option');//creates the new option element
var texE = document.createTextNode(arr[i]);//creates the text
newE.setAttribute('value',arr[i]);//set the attribute's value
s.appendChild(newE);//appends element
newE.appendChild(texE);//appends text
}
s.disabled=false;//enable selection
}
</script>
<SCRIPT LANGUAGE='JavaScript'>
// rollover
var border_width='1px';
var border_style='solid';
var border_color='#3B3B3B';

var select_color='#e7e7e7';
var off_color='#ffffff';

var border_on = border_width + " " + border_style + " " + border_color;
var border_off = border_width + " " + border_style + " " + off_color;


function select_row(what, num)
{
if (navigator.appName == 'Microsoft Internet Explorer')
{
row = document.all[what + "_row" + num.toString()];
if (!row) return;
row.style.backgroundColor = select_color;

lcell = document.all[what + "_left_cell" + num.toString()];
rcell = document.all[what + "_right_cell" + num.toString()];

lcell.style.borderLeft = border_on;
lcell.style.borderTop = border_on;
lcell.style.borderBottom = border_on;

rcell.style.borderRight = border_on;
rcell.style.borderTop = border_on;
rcell.style.borderBottom = border_on;

var i = 0;

while(i < 10)
{
if (!document.all[what + "_row" + i.toString()]) break;

if (i != num)
{
row = document.all[what + "_row" + i.toString()];
lcell = document.all[what + "_left_cell" + i.toString()];
rcell = document.all[what + "_right_cell" + i.toString()];

row.style.backgroundColor = off_color;

lcell.style.borderLeft = border_off;
lcell.style.borderTop = border_off;
lcell.style.borderBottom = border_off;

rcell.style.borderRight = border_off;
rcell.style.borderTop = border_off;
rcell.style.borderBottom = border_off;
}
i++;
}
}
else if (navigator.appName == 'Netscape')
{
row = document.getElementById(what + "_row" + num.toString());
if(!row) return;
row.style.backgroundColor = select_color;

lcell = document.getElementById(what + "_left_cell" + num.toString());
rcell = document.getElementById(what + "_right_cell" + num.toString());

lcell.style.borderLeft = border_on;
lcell.style.borderTop = border_on;
lcell.style.borderBottom = border_on;

rcell.style.borderRight = border_on;
rcell.style.borderTop = border_on;
rcell.style.borderBottom = border_on;

rows = document.getElementsByName(what + "_row");
lcells = document.getElementsByName(what + "_left_cell");
rcells = document.getElementsByName(what + "_right_cell");

for(var i = 0; i < rows.length; i++)
{
if(i != num)
{
rows[i].style.backgroundColor = off_color;

lcells[i].style.borderLeft = border_off;
lcells[i].style.borderTop = border_off;
lcells[i].style.borderBottom = border_off;

rcells[i].style.borderRight = border_off;
rcells[i].style.borderTop = border_off;
rcells[i].style.borderBottom = border_off;
}
}
}
else
{
}
}
</SCRIPT>

</head>
<body>
<form method="POST" action="http://www.post.com">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr name='plan_row' id='plan_row0' onClick='document.forms[0].choose[0].checked = true; select_row("plan", 0); return true;'>
<td name='plan_left_cell' id='plan_left_cell0' width="6%" align="center" width="4%">
<input type="radio" value="car" name="choose" onclick="setSel(this.value)"></td>
<td name='plan_right_cell' id='plan_right_cell0' width="96%">CAR</td>
</tr>
<tr name='plan_row' id='plan_row1' onClick='document.forms[0].choose[1].checked = true; select_row("plan", 1); return true;' >
<td name='plan_left_cell' id='plan_left_cell1' width="4%">
<p align="center">
<input type="radio" value="house" name="choose" onclick="setSel(this.value)"></td>
<td name='plan_right_cell' id='plan_right_cell1' width="96%">House</td>
</tr>
</table>
<select size="1" name="chooselesect" id="chooselesect" disabled>
<option value="audi" selected>audi</option>
</select>

<p><input type="submit" value="CONTINUE" name="B1"></p>
</form>

</body>
</html>

Kor
11-12-2004, 11:37 AM
var motos= new Array()
motos[0] ='rent';
motos[1] ='buy';

better avoid using same name for variables and for passed parameters.
and:

if(r=='car')
{var arr=cars}
else if(r=='houses')
{var arr=houses}
else if(r=='moto')
{var arr=motos}
------------
I don't have a paypal account, I have only a bank account for currency, but I guess the banking operation costs will overpass the 15 EUR value... :D

Kor
11-12-2004, 11:55 AM
onClick='document.forms[0].choose[0].checked = true;select_row("plan", 0);setSel("document.forms[0].choose[0].value"); return true;
...
onClick='document.forms[0].choose[1].checked = true;select_row("plan", 1);setSel("document.forms[0].choose[1].value"); return true;
...
and so on for the rest of the cells

graziano
11-12-2004, 01:03 PM
onClick='document.forms[0].choose[0].checked = true;select_row("plan", 0);setSel("document.forms[0].choose[0].value"); return true;
...
onClick='document.forms[0].choose[1].checked = true;select_row("plan", 1);setSel("document.forms[0].choose[1].value"); return true;
...
and so on for the rest of the cells

thank you really appreciated , but it didn't work for me .
When I click on house or car nothing happens on <select>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="JavaScript" type="text/JavaScript">
var cars= new Array()
cars[0] ='audi';
cars[1] ='mercedes';
cars[2] ='alfa romeo';
var houses= new Array()
houses[0] ='rent';
houses[1] ='buy';
function setSel(r){
var s=document.getElementById('chooselesect');
while(s.hasChildNodes()){
s.removeChild(s.childNodes[0]);//removes the old elements
}
if(r=='car'){var arr=cars}else{var arr=houses}//get the needed array
for(var i=0;i<arr.length;i++){
var newE = document.createElement('option');//creates the new option element
var texE = document.createTextNode(arr[i]);//creates the text
newE.setAttribute('value',arr[i]);//set the attribute's value
s.appendChild(newE);//appends element
newE.appendChild(texE);//appends text
}
s.disabled=false;//enable selection
}
</script>
<SCRIPT LANGUAGE='JavaScript'>
// rollover
var border_width='1px';
var border_style='solid';
var border_color='#3B3B3B';

var select_color='#e7e7e7';
var off_color='#ffffff';

var border_on = border_width + " " + border_style + " " + border_color;
var border_off = border_width + " " + border_style + " " + off_color;


function select_row(what, num)
{
if (navigator.appName == 'Microsoft Internet Explorer')
{
row = document.all[what + "_row" + num.toString()];
if (!row) return;
row.style.backgroundColor = select_color;

lcell = document.all[what + "_left_cell" + num.toString()];
rcell = document.all[what + "_right_cell" + num.toString()];

lcell.style.borderLeft = border_on;
lcell.style.borderTop = border_on;
lcell.style.borderBottom = border_on;

rcell.style.borderRight = border_on;
rcell.style.borderTop = border_on;
rcell.style.borderBottom = border_on;

var i = 0;

while(i < 10)
{
if (!document.all[what + "_row" + i.toString()]) break;

if (i != num)
{
row = document.all[what + "_row" + i.toString()];
lcell = document.all[what + "_left_cell" + i.toString()];
rcell = document.all[what + "_right_cell" + i.toString()];

row.style.backgroundColor = off_color;

lcell.style.borderLeft = border_off;
lcell.style.borderTop = border_off;
lcell.style.borderBottom = border_off;

rcell.style.borderRight = border_off;
rcell.style.borderTop = border_off;
rcell.style.borderBottom = border_off;
}
i++;
}
}
else if (navigator.appName == 'Netscape')
{
row = document.getElementById(what + "_row" + num.toString());
if(!row) return;
row.style.backgroundColor = select_color;

lcell = document.getElementById(what + "_left_cell" + num.toString());
rcell = document.getElementById(what + "_right_cell" + num.toString());

lcell.style.borderLeft = border_on;
lcell.style.borderTop = border_on;
lcell.style.borderBottom = border_on;

rcell.style.borderRight = border_on;
rcell.style.borderTop = border_on;
rcell.style.borderBottom = border_on;

rows = document.getElementsByName(what + "_row");
lcells = document.getElementsByName(what + "_left_cell");
rcells = document.getElementsByName(what + "_right_cell");

for(var i = 0; i < rows.length; i++)
{
if(i != num)
{
rows[i].style.backgroundColor = off_color;

lcells[i].style.borderLeft = border_off;
lcells[i].style.borderTop = border_off;
lcells[i].style.borderBottom = border_off;

rcells[i].style.borderRight = border_off;
rcells[i].style.borderTop = border_off;
rcells[i].style.borderBottom = border_off;
}
}
}
else
{
}
}
</SCRIPT>

</head>
<body>
<form method="POST" action="http://www.post.com">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr name='plan_row' id='plan_row0' onClick='document.forms[0].choose[0].checked = true; select_row("plan", 0);setSel("document.forms[0].choose[0].value"); return true;'>
<td name='plan_left_cell' id='plan_left_cell0' width="6%" align="center" width="4%">
<input type="radio" value="car" name="choose" onclick="setSel(this.value)"></td>
<td name='plan_right_cell' id='plan_right_cell0' width="96%">CAR</td>
</tr>
<tr name='plan_row' id='plan_row1' onClick='document.forms[0].choose[1].checked = true; select_row("plan", 1);setSel("document.forms[0].choose[1].value"); return true;' >
<td name='plan_left_cell' id='plan_left_cell1' width="4%">
<p align="center">
<input type="radio" value="house" name="choose" onclick="setSel(this.value)"></td>
<td name='plan_right_cell' id='plan_right_cell1' width="96%">House</td>
</tr>
</table>
<select size="1" name="chooselesect" id="chooselesect" disabled>
<option value="audi" selected>audi</option>
</select>

<p><input type="submit" value="CONTINUE" name="B1"></p>
</form>

</body>
</html>

Kor
11-12-2004, 01:56 PM
try this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="JavaScript" type="text/JavaScript">
var cars= new Array()
cars[0] ='audi';
cars[1] ='mercedes';
cars[2] ='alfa romeo';
var houses= new Array()
houses[0] ='rent';
houses[1] ='buy';
function setSel(r){
var s=document.getElementById('chooselesect');
while(s.hasChildNodes()){
s.removeChild(s.childNodes[0]);//removes the old elements
}
if(r=='car'){var arr=cars}else{var arr=houses}//get the needed array
for(var i=0;i<arr.length;i++){
var newE = document.createElement('option');//creates the new option element
var texE = document.createTextNode(arr[i]);//creates the text
newE.setAttribute('value',arr[i]);//set the attribute's value
s.appendChild(newE);//appends element
newE.appendChild(texE);//appends text
}
s.disabled=false;//enable selection
}

// rollover
var border_width='1px';
var border_style='solid';
var border_color='#3B3B3B';

var select_color='#e7e7e7';
var off_color='#ffffff';

var border_on = border_width + " " + border_style + " " + border_color;
var border_off = border_width + " " + border_style + " " + off_color;

function select_row(what, num)
{
if (navigator.appName == 'Microsoft Internet Explorer')
{
row = document.all[what + "_row" + num.toString()];
if (!row) return;
row.style.backgroundColor = select_color;

lcell = document.all[what + "_left_cell" + num.toString()];
rcell = document.all[what + "_right_cell" + num.toString()];

lcell.style.borderLeft = border_on;
lcell.style.borderTop = border_on;
lcell.style.borderBottom = border_on;

rcell.style.borderRight = border_on;
rcell.style.borderTop = border_on;
rcell.style.borderBottom = border_on;

var i = 0;

while(i < 10)
{
if (!document.all[what + "_row" + i.toString()]) break;

if (i != num)
{
row = document.all[what + "_row" + i.toString()];
lcell = document.all[what + "_left_cell" + i.toString()];
rcell = document.all[what + "_right_cell" + i.toString()];

row.style.backgroundColor = off_color;

lcell.style.borderLeft = border_off;
lcell.style.borderTop = border_off;
lcell.style.borderBottom = border_off;

rcell.style.borderRight = border_off;
rcell.style.borderTop = border_off;
rcell.style.borderBottom = border_off;
}
i++;
}
}
else if (navigator.appName == 'Netscape')
{
row = document.getElementById(what + "_row" + num.toString());
if(!row) return;
row.style.backgroundColor = select_color;

lcell = document.getElementById(what + "_left_cell" + num.toString());
rcell = document.getElementById(what + "_right_cell" + num.toString());

lcell.style.borderLeft = border_on;
lcell.style.borderTop = border_on;
lcell.style.borderBottom = border_on;

rcell.style.borderRight = border_on;
rcell.style.borderTop = border_on;
rcell.style.borderBottom = border_on;

rows = document.getElementsByName(what + "_row");
lcells = document.getElementsByName(what + "_left_cell");
rcells = document.getElementsByName(what + "_right_cell");

for(var i = 0; i < rows.length; i++)
{
if(i != num)
{
rows[i].style.backgroundColor = off_color;

lcells[i].style.borderLeft = border_off;
lcells[i].style.borderTop = border_off;
lcells[i].style.borderBottom = border_off;

rcells[i].style.borderRight = border_off;
rcells[i].style.borderTop = border_off;
rcells[i].style.borderBottom = border_off;
}
}
}
else
{
}
var ch=document.forms[0].elements['choose'];
for(var i=0;i<ch.length;i++){
if(ch[i].checked){
setSel(ch[i].value);break;
}
}
}
</script>
</head>
<body>
<form method="POST" action="http://www.post.com">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr name='plan_row' id='plan_row0' onClick='document.forms[0].choose[0].checked = true; select_row("plan", 0);return true;'>
<td name='plan_left_cell' id='plan_left_cell0' width="4%">
<input type="radio" value="car" name="choose"></td>
<td name='plan_right_cell' id='plan_right_cell0' width="96%">CAR</td>
</tr>
<tr name='plan_row' id='plan_row1' onClick='document.forms[0].choose[1].checked = true; select_row("plan", 1);return true;' >
<td name='plan_left_cell' id='plan_left_cell1' width="4%">
<input type="radio" value="house" name="choose"></td>
<td name='plan_right_cell' id='plan_right_cell1' width="96%">House</td>
</tr>
</table>
<select size="1" name="chooselesect" id="chooselesect" disabled>
<option value="audi" selected>audi</option>
</select>

<p><input type="submit" value="CONTINUE" name="B1"></p>
</form>

</body>
</html>

graziano
11-12-2004, 02:03 PM
you are really the best with js ! :eek: Thank you!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum