Cannot copy one field to another

Question

I have a site that has a checkbox. When the checkbox is clicked it will copy one form value to another. It worked fine until I actually wrapped the fields in the <form> tag. Now it no longer copies. Here is what I was using

function sameBilling(){
    document.getElementById("billingFirst").value = document.getElementById("mailingFirst").value;  
    document.getElementById("billingLast").value = document.getElementById("mailingLast").value;
    document.getElementById("billingCity").value = document.getElementById("mailingCity").value;
    document.getElementById("billingState").value = document.getElementById("mailingState").value;
    document.getElementById("billingZip").value = document.getElementById("mailingZip").value;
    document.getElementById("billingAddress").value = document.getElementById("mailingAddress").value;
}

form

 <form action="xxxxxxxxxxxxxxxxx" method="post">
      <table width="840" border="0" cellpadding="10">
        <tr>
          <td align="center"><strong>Shipping Address</strong></td>
          <td>&nbsp;</td>
          <td align="center"><strong>Billing Address</strong></td>
        </tr>
        <tr>
          <td align="right"><label for="mailingFirst">First Name</label>
            <input type="text" name="mailingFirst" id="mailingFirst" onfocus='remove_errors("mailingFirst")'></td>
          <td align="right">Same Billing Address?
            <input name="sameBilling" id="billingCheck" type="checkbox" value="Same Billing" onClick="sameBilling();"></td>
          <td align="right"><label for="billingFirst">First Name</label>
            <input type="text" name="billingFirst" id="billingFirst" onfocus='remove_errors("billingFirst")'></td>
        </tr>
        <tr>
          <td align="right"><label for="mailingLast">Last Name</label>
            <input type="text" name="mailingLast" id="mailingLast" onfocus='remove_errors("mailingLast")'></td>
          <td><input type="hidden" name="product01" id="product01"></td>
          <td align="right"><label for="billingLast">Last Name</label>
            <input type="text" name="billingLast" id="billingLast" onfocus='remove_errors("billingLast")'></td>
        </tr>
        <tr>
          <td align="right"><label for="mailingAddress">Address</label>
            <input type="text" name="mailingAddress" id="mailingAddress" onfocus='remove_errors("mailingAddress")'></td>
          <td><input type="hidden" name="product02" id="product02"></td>
          <td align="right"><label for="billingAddress">Address</label>
            <input type="text" name="billingAddress" id="billingAddress" onfocus='remove_errors("billingAddress")'></td>
        </tr>
        <tr>
          <td align="right"><label for="mailingCity">City</label>
            <input type="text" name="mailingCity" id="mailingCity" onfocus='remove_errors("mailingCity")'></td>
          <td><input type="hidden" name="product03" id="product03"></td>
          <td align="right"><label for="billingCity">City</label>
            <input type="text" name="billingCity" id="billingCity" onfocus='remove_errors("billingCity")'></td>
        </tr>
        <tr>
          <td align="right"><label for="mailingState">State</label>
            <input type="text" name="mailingState" id="mailingState" onfocus='remove_errors("mailingState")'></td>
          <td><input type="hidden" name="product04" id="product04"></td>
          <td align="right"><label for="billingState">State</label>
            <input type="text" name="billingState" id="billingState" onfocus='remove_errors("billingState")'></td>
        </tr>
        <tr>
          <td align="right"><label for="mailingZip">Zip</label>
            <input type="text" name="mailingZip" id="mailingZip" onfocus='remove_errors("mailingZip")'></td>
          <td>&nbsp;</td>
          <td align="right"><label for="billingZip">Zip</label>
            <input type="text" name="billingZip" id="billingZip" onfocus='remove_errors("billingZip")'></td>
        </tr>
        <tr>
          <td align="right">&nbsp;</td>
          <td>&nbsp;</td>
          <td align="right">&nbsp;</td>
        </tr>
        <tr>
          <td align="right"><label for="ccNum">CC Number</label>
            <input type="text" name="ccNum" id="ccNum" onfocus='remove_errors("ccNum")'></td>
          <td align="center"><label for="ccExp">CC Expiration</label>
            <input type="text" name="ccExp" id="ccExp" onfocus='remove_errors("ccExp")'></td>
          <td align="right"><label for="ccType">CC Type</label>
            <input type="text" name="ccType" id="ccType" onfocus='remove_errors("ccType")'></td>
        </tr>
        <tr>
          <td align="right"><input type="submit" value="Submit Order"></td>
        </tr>
      </table>
    </form> 

Answer 1

EDIT: I think the problem (in IE, anyway) is that your function name sameBilling() is the same as the checkbox input name="sameBilling". When I copied your HTML and JS code to test it out for myself the only change I had to make to get it to work was to rename the function or rename the input.

IE does this thing where element names and ids are treated as if they were global variables, and so it gets confused if you have your own variables or functions with the same name. (Some other browsers have the same problem because they have tried to be consistent with what IE does.)

(Having said that, it doesn't explain why your fix to stop using .getElementById() would work.)

The .getElementById() method belongs to the document object, like so:

document.getElementById("someId")

It doesn't matter where on the page the element with id="someId" is or whether that element is a child of a form element because id is supposed to be unique on the page.

So your code doesn't work because you are trying to use .getElementById() on a form element:

document.forms[0].getElementById("billingFirst").value = ...
//       ^^^^^^^^^ - remove the "forms[0]." part

You should change it to:

document.getElementById("billingFirst").value =
                          document.getElementById("mailingFirst").value;
// etc

Answer 2

I gave the form name="theForm" and changed the lines in the function to

document.theForm.elements["billingFirst"].value = document.theForm.elements["mailingFirst"].value;

Now it works.

Answer 3

Missing . in documentgetElementById - change to document.getElementById.