Using onchange to enter data in second field javascript

Question

I am trying to put two forms on one page, but to have only one main display area where selections can be made. My page would look something like this:

Sequence ID---Select Processor---Select Reviewer

1-------------------A------------------------B---------------Action Button

2-------------------A------------------------B---------------Action Button

3-------------------A------------------------B---------------Action Button

Where A and B are drown-down lists the users can select.

Then, in a separate part of the page and in a separate form, the A and B which are selected above will be populated in separate text fields. The issue is the way the two forms are process. The "Action Button" above does not use the A and B drop-down information AT ALL. But to make the display more concise, I don't want to make the user scroll to various parts of the page for different actions. Too confusing.

Here is the kicker. The total numbers in the sequence will different depending on the form. So, I need to create an array for the fields. I know that is not making much sense, so I here is my code:

<script type="text/javascript">
function myFunction() {
document.proc[1].value = f.processor[1].value;
            document.write.getElementById("proc[1]").value;
            document.rev[1].value = f.reviewer[1].value;
            document.write.getElementById("rev[1]").value;
            document.proc[2].value = f.processor[2].value;
            document.write.getElementById("proc[2]").value;
            document.rev[2].value = f.reviewer[2].value;
            document.write.getElementById("rev[2]").value;
            document.proc[3].value = f.processor[3].value;
            document.write.getElementById("proc[3]").value;
            document.rev[3].value = f.reviewer[3].value;
            document.write.getElementById("rev[3]").value;
        }
</script>
<form id="form" action="thispage.php" method="post">
    <select name="processor[1]" onchange="myFunction(this.document)"  id="processor[1]">
        <option value="0">--Please select from the list...</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
    <select name="reviewer[1]" onchange="myFunction(this.document)" id="reviewer[1]">
        <option value="0">--Please select from the list...</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
    <select name="processor[2]" onchange="myFunction(this.document)"  id="processor[2]">
        <option value="0">--Please select from the list...</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
    <select name="reviewer[2]" onchange="myFunction(this.document)" id="reviewer[2]">
        <option value="0">--Please select from the list...</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
    <select name="processor[3" onchange="myFunction(this.document)"  id="processor[3]">
        <option value="0">--Please select from the list...</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
    <select name="reviewer[3]" onchange="myFunction(this.document)" id="reviewer[3]">
        <option value="0">--Please select from the list...</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
<input type="submit" name="action" value="Action Button">
</form>
<form id="newForm" action="thisform.php" method="post">
    <input type="text" name="proc[1]" id="proc[1]">
    <input type="text" name="rev[1]" id="rev[1]">
    <input type="text" name="proc[2]" id="proc[2]">
    <input type="text" name="rev[2]" id="rev[2]">
    <input type="text" name="proc[3]" id="proc[3]">
    <input type="text" name="rev[3]" id="rev[3]">
</form>

When I make the selection, the data is not entered into the text fields in the newForm, which is what I would like to happen.

Any advice anyone could offer would be greatly appreciated.

Answer 1

Answer to why the selection doesn't get transferred: Having <input type="text" name="proc[1]" id="proc[1]"> doesn't allow you to reference it by document.proc[1]. The document object model just isn't that magical.

Other notes: There are a lot of other issues with this code, e.g. this.document and document.write.getElementById(...).value. You should probably spend some time learning JavaScript and the document object model and finding the approach that's right for this application.