Невозможно скопировать одно поле в другое

Question

У меня есть сайт с флажком. Когда флажок установлен, он копирует одно значение формы в другое. Это работало нормально, пока я фактически не обернул поля в тег <form>. Теперь это больше не копирует. Вот что я использовал

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 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

Отсутствует . в documentgetElementById - изменить на document.getElementById.

Answer 2

Я дал форму name="theForm" и изменил строки в функции на

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

Теперь это работает.

Answer 3

РЕДАКТИРОВАТЬ: Я думаю, что проблема (в любом случае в IE) заключается в том, что имя вашей функции sameBilling() совпадает с вводом флажка name="sameBilling".Когда я скопировал ваш код HTML и JS, чтобы проверить его для себя, единственное изменение, которое я должен был сделать, чтобы заставить его работать, состояло в том, чтобы переименовать функцию или переименовать ввод.идентификаторы обрабатываются так, как если бы они были глобальными переменными, и поэтому возникает путаница, если у вас есть собственные переменные или функции с одинаковым именем.(У некоторых других браузеров та же проблема, потому что они пытались соответствовать тому, что делает IE.)

(Сказав это, это не объясняет, почему ваше исправление, чтобы прекратить использование .getElementById() сработало бы.)

Метод .getElementById() принадлежит объекту document, например:

document.getElementById("someId")

Не имеет значения, где на странице находится элемент с id = "someId"является или является ли этот элемент дочерним по отношению к элементу формы, потому что id должен быть уникальным на странице.

Таким образом, ваш код не работает, потому что вы пытаетесь использовать .getElementById() в элементе формы:

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

Вы должны изменить его на:

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