Parts of form not working

JavaScript
1

Good day everyone!

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>

Thanks very much everyone!

Nov

2

That’s ok - the bill’s in the mail :smiley:

Have a good one :slight_smile:

3

Thanks for all the advise time and help! I owe you one.

All seem to be working so far, I’ll keep you posted if there are any changes as to how the code is functioning.

Nov

4

Hello Kalon,

Thanks for all your help!

I noticed something funny going on with the labels. Maybe it is something I wrote that is sending everything out of spin.

The radio buttons will only work if you have them wrapped in a label tag.

Example:

<label><input type="radio" name="radioBtn" />colors</label>

If you use for, it does not work.

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.

Not sure whats going on.

Nov

5

Basically I did the following:

  1. removed the onclick function in your html and included it in your onload function.

  2. assigned a property called msgNum to your radio buttons and gave it the current value of i and passed it to your
    displayMsg() function.

  3. changed the output element in your switch() to be the textbox in the form.

6

You are replacing the

 
onclick="displayMsg(0);"

with a new onclick in your window.onload

 
    aObj[i].onclick = function() {
         fillSelect(this.nextSibling.data);
    }

and so displayMsg() is never called when you click a radio button.

7

Thanks a million, your way worked.

However, if you want to, can you provide me some explanation as to what you did and why? You don’t have to but it will make me learn better.

Thanks again!

Nov

8

One way to do it is

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

Thanks very much, you have been a great resource!

Someday I hope to acquire some of your knowledge. :slight_smile:

Have a great weekend.

Nov

10

That’s ok :wink:

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

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

I tried switching everything around but for some reason I can only get one part of the code to work at a time.

I am still working on it but wouldn’t mind a suggestion.

Any ideas?

Nov