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

编辑：我认为问题（在IE中，无论如何）是您的函数名sameBilling()与复选框输入name="sameBilling"相同。当我复制你的HTML和JS代码来为自己测试时，我必须做的唯一改变是重命名函数或重命名输入。

IE执行此操作，其中元素名称和ID被视为全局变量，因此如果您拥有自己的变量或具有相同名称的函数，则会感到困惑。（其他一些浏览器也有同样的问题，因为他们试图与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

Answer 3

我给了表单name="theForm"并将函数中的行更改为

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

现在可行。

无法将一个字段复制到另一个字段

3 个答案: