Question

I have a code which enabled the user to enter a Value in the first TextBox and I wanted it to populate the same value in the other TextFields with the same ID. (There are 9 Textfields in a column which have same ID)

Here is my code, but the problem is the value ONLY gets populated in the first inbox (TextF1) and nothing happens to the other 8. Does anyone see the issue here

<form >
<input type='text' id='VarField' onKeyUp="document.getElementById('VarField1').value=this.value"  value='' size="10">

<input type='text' name='TextF1' id='VarField1' value='' size="10">
<input type='text' name='TextF2' id='VarField1' value='' size="10">
<input type='text' name='TextF3' id='VarField1' value='' size="10">
.
.
.
<input type='text' name='TextF8' id='VarField1' value='' size="10">
<input type='text' name='TextF9' id='VarField1' value='' size="10">
</form>

Answer 1

It’s bad practice to have more than one tag with the same ID – because of this, the getElementById method only accesses the first tag with that ID. Instead, give each input the same class, select all of them, and iterate through them.

So your code would look something like this (I separated the function from the onKeyUp event to make it easier to see):

<script type="text/javascript">
    function writeText()
    {
        var textFields = document.getElementsByClassName("VarField1");
        for(i = 0; i < textFields.length; i++)
        {
            textFields[i].value = document.getElementById("VarField").value;
        }
    }
</script>

<form >
    <input type='text' id='VarField' onKeyUp="writeText()"  value='' size="10">

    <input type='text' name='TextF1' class='VarField1' value='' size="10">
    <input type='text' name='TextF2' class='VarField1' value='' size="10">
    <input type='text' name='TextF3' class='VarField1' value='' size="10">
    <input type='text' name='TextF8' class='VarField1' value='' size="10">
    <input type='text' name='TextF9' class='VarField1' value='' size="10">
</form>

Note that you must iterate through in this way – although it’s tempting to use a foreach (for … in) loop, that will not work for the NodeList that getElementsByClassName returns.