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

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.