I have an HTML select list that is populated when a user click on radio buttons.
That part seem to be working fine.
The problem is, I also need a message to appear in a textfield which is in another form. So say when a user click checkbox 1, some text are displayed in a textfield. Example: You click checkbox 1.
I just can’t get that part to work.
Here is the complete code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
var aObj = document.getElementsByName('fav');
var i = aObj.length;
while(i--) {
aObj[i].onclick = function() {
fillSelect(this.nextSibling.data);
}
}
}
var color = ['red','green','blue'];
var car = ['ford','toyota','mazda'];
var genre = ['horror','scifi','comedy'];
function fillSelect(arrayName) {
var f = document.myform;
f.list.options.length = null;
for(var i=0; i<window[arrayName].length; i++) {
f.list.options[i]=new Option(window[arrayName][i], window[arrayName][i]);
}
}
/*FUNCTION TO DISPLAY TEXT IN TEXTFIELD*/
function displayMsg(text) {
var msgVar = document.getElementById("msgBox");
if (msgVar.elements.length > 0) {
switch(text)
{
case 0: msgVar.elements[0].value="Type of colors";
break;
case 1: msgVar.elements[0].value="Type of car";
break;
case 2: msgVar.elements[0].value="Type of movies";
break;
}
}
}
</script>
<style type="text/css">
label {display:block;}
</style>
</head>
<body>
<!--VALUE OF RADIO BUTTON WILL DISPLAY IN THIS TEXT FIELD WHEN USER CLICK-->
<form action="javascript:void(0)" id="msgBox">
<label for="textBox">Radio button selected</label>
<input type="text" id="textBox" name="textBox" />
</form>
<br />
<br />
<form action="#" name="myform">
<select name="list">
</select>
<label><input type="radio" name="fav" onclick="displayMsg(0);">color</label>
<label><input type="radio" name="fav" onclick="displayMsg(1);" checked>car</label>
<label><input type="radio" name="fav" onclick="displayMsg(2);">genre</label>
</form>
</body>
Never seen something like this before, also the labels must carry the same name as the array, example: color. If the radio is different from the array, it does not work.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
var aObj = document.getElementsByName('fav');
for(i=0; i < aObj.length; i++) {
aObj[i].msgNum = i;
aObj[i].onclick = function() {
fillSelect(this.nextSibling.data);
displayMsg(this.msgNum);
} //end of onclick
} //end of for loop
} //end of onload
var color = ['red','green','blue'];
var car = ['ford','toyota','mazda'];
var genre = ['horror','scifi','comedy'];
function fillSelect(arrayName) {
var f = document.myform;
f.list.options.length = null;
for(var i=0; i<window[arrayName].length; i++) {
f.list.options[i]=new Option(window[arrayName][i], window[arrayName][i]);
}
}
/*FUNCTION TO DISPLAY TEXT IN TEXTFIELD*/
function displayMsg(msgNum) {
var msgVar = document.getElementById("textBox");
switch(msgNum) {
case 0: msgVar.value="Type of colors";
break;
case 1: msgVar.value="Type of car";
break;
case 2: msgVar.value="Type of movies";
break;
}
}
</script>
<style type="text/css">
label {display:block;}
</style>
</head>
<body>
<!--VALUE OF RADIO BUTTON WILL DISPLAY IN THIS TEXT FIELD WHEN USER CLICK-->
<form action="javascript:void(0)" id="msgBox">
<label for="textBox">Radio button selected</label>
<input type="text" id="textBox" name="textBox" />
</form>
<br />
<br />
<form action="#" name="myform">
<select name="list">
</select>
<label><input type="radio" name="fav" >color</label>
<label><input type="radio" name="fav" checked>car</label>
<label><input type="radio" name="fav" >genre</label>
</form>
</body>
I realised yesterday after the edit button for my post disappeared that you would probably want the <select> populated with the options associated with the default checked radio button.
Also, since the texts for the textbox are now in an array you don’t really need the swirch() anymore since the code for each case is now the same.
Below is your code streamlined a little further with the above edits in case it is of use to you.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript">
var color = ['red','green','blue'];
var car = ['ford','toyota','mazda'];
var genre = ['horror','scifi','comedy'];
var selFillArrays = [[color,"Type of colors"],[car,"Type of car"],[genre,"Type of movies"]];
window.onload = function() {
var aObj = document.getElementsByName('fav');
for(i=0; i < aObj.length; i++) {
if(aObj[i].checked) { //populate the <select> with default options
fillSelect(selFillArrays[i][0]);
}
aObj[i].msgNum = i;
aObj[i].onclick = function() {
fillSelect(selFillArrays[this.msgNum][0]);
displayMsg(this.msgNum);
} //end of onclick
} //end of for loop
} //end of onload
function fillSelect(arrayName) {
var f = document.myform;
f.list.options.length = null;
for(var i=0; i<arrayName.length; i++) {
f.list.options[i]=new Option(arrayName[i], arrayName[i]);
}
}
/*FUNCTION TO DISPLAY TEXT IN TEXTFIELD*/
function displayMsg(msgNum) {
var msgVar = document.getElementById("textBox");
msgVar.value=selFillArrays[msgNum][1];
}
</script>
<style type="text/css">
label {display:block;}
</style>
</head>
<body>
<!--VALUE OF RADIO BUTTON WILL DISPLAY IN THIS TEXT FIELD WHEN USER CLICK-->
<form action="javascript:void(0)" id="msgBox">
<label for="textBox">Radio button selected</label>
<input type="text" id="textBox" name="textBox" />
</form>
<br />
<br />
<form action="#" name="myform">
<select name="list">
</select>
<input type="radio" name="fav" >color
<input type="radio" name="fav" checked>car
<input type="radio" name="fav" >genre
</form>
</body>
The <label> means that clicking the text next to the radio button is the same as clickig the button itself.
I didn’t look at the other part of your code, but if you want to remove the lables and streamline your code a bit, I would put the data arrays and the text for the textbox into a 2 dimensional array similar to this.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript">
var color = ['red','green','blue'];
var car = ['ford','toyota','mazda'];
var genre = ['horror','scifi','comedy'];
var selFillArrays = [[color,"Type of colors"],[car,"Type of car"],[genre,"Type of movies"]];
window.onload = function() {
var aObj = document.getElementsByName('fav');
for(i=0; i < aObj.length; i++) {
aObj[i].msgNum = i;
aObj[i].onclick = function() {
fillSelect(selFillArrays[this.msgNum][0]);
displayMsg(this.msgNum);
} //end of onclick
} //end of for loop
} //end of onload
function fillSelect(arrayName) {
var f = document.myform;
f.list.options.length = null;
for(var i=0; i<arrayName.length; i++) {
f.list.options[i]=new Option(arrayName[i], arrayName[i]);
}
}
/*FUNCTION TO DISPLAY TEXT IN TEXTFIELD*/
function displayMsg(msgNum) {
var msgVar = document.getElementById("textBox");
switch(msgNum) {
case 0: msgVar.value=selFillArrays[msgNum][1];
break;
case 1: msgVar.value=selFillArrays[msgNum][1];
break;
case 2: msgVar.value=selFillArrays[msgNum][1];
break;
}
}
</script>
<style type="text/css">
label {display:block;}
</style>
</head>
<body>
<!--VALUE OF RADIO BUTTON WILL DISPLAY IN THIS TEXT FIELD WHEN USER CLICK-->
<form action="javascript:void(0)" id="msgBox">
<label for="textBox">Radio button selected</label>
<input type="text" id="textBox" name="textBox" />
</form>
<br />
<br />
<form action="#" name="myform">
<select name="list">
</select>
<input type="radio" name="fav" >color
<input type="radio" name="fav" checked>car
<input type="radio" name="fav" >genre
</form>
</body>