How to fill multiple text fields from one text field.

[hopup]

I've been searching the internet for a while and can't find any conclusive ways to do this. I'm new to javascript however I have coding experience in java, c, perl, etc... I need a script that will allow you to type in one text field, say the header of a table of fields, and autofill those fields with whatever is typed into the header. Also the amount of fields to be filled is dynamically chosen on the page before, so the script must be able to fill varying numbers of fields depending on what the user chose on the previous page. To clarify, there is a table generated with birthday eartag cage comment and under those headers are multiple fields that all need to be filled with the same information in each column. Any help appreciated as the script I started to write isn't very good and is not working.

[hyperionXS]

<input type="text" id="headerInput" />

<input type="text" class="autofill" />
<input type="text" class="autofill" />
<input type="text" class="autofill" />
<input type="text" class="autofill" />
<input type="text" class="autofill" />
<input type="text" class="autofill" />

<script type="text/javascript">
	inputs = document.getElementsByClassName('autofill');
	document.getElementById('headerInput').onkeyup = function(){
		for(var i=0; i<inputs.length; i++){
			inputs[i].value = this.value;
		}
	}
</script>

[nicovece]

thank you #hyperionXS,
i'm using your code and it's a great solution
but i can't make it work in ie8
any suggestion?

thank you
nico

[xelawho]

you are right - IE8 (and below) does not support getElementsByClassName. Her is a cross-browser alternative:

<script type="text/javascript">
	inputs = document.getElementsByTagName('input');
	document.getElementById('headerInput').onkeyup = function(){
		for(var i=0; i<inputs.length; i++){
		if(inputs[i].className=="autofill"){
			inputs[i].value = this.value;
			}
		}
	}
</script>

[nicovece]

thank you!