3

当我在表单字段中输入时，底部的输入也应该自动写入与上述字段相同的地址。

当我在下面看到输入时，我正在使用的 JavaScript 正在工作，但我需要在表单中提交它。我在控制台中得到的错误是“TypeError: autoAddress is not a function”下面的表格 WORKS

<form id="addNews" name="address" action="addevent.php" method="post" class="addStuff" enctype="multipart/form-data">
    <h3>Address1:</h3><input type="text" class="title" name="address1" onkeyup="autoAddress();">
    <h3>Address2:</h3><input type="text" class="title" name="address2" onkeyup="autoAddress();">
    <h3>City:</h3><input type="text" class="title" name="city" onkeyup="autoAddress();">
    <h3>County:</h3><input type="text" class="title" name="county" onkeyup="autoAddress();">
    <h3>PostCode:</h3><input type="text" class="title" name="pcode" onkeyup="autoAddress();">       
</form>
<input type="text" name="fulladdress" class="title" id="autoAddress" />

我需要的东西不起作用，如下所示。我确定我只是错过了一些简单的东西。请注意，底部的输入位于表单内部。

<form id="addNews" name="address" action="addevent.php" method="post" class="addStuff" enctype="multipart/form-data">
    <h3>Address1:</h3><input type="text" class="title" name="address1" onkeyup="autoAddress();">
    <h3>Address2:</h3><input type="text" class="title" name="address2" onkeyup="autoAddress();">
    <h3>City:</h3><input type="text" class="title" name="city" onkeyup="autoAddress();">
    <h3>County:</h3><input type="text" class="title" name="county" onkeyup="autoAddress();">
    <h3>PostCode:</h3><input type="text" class="title" name="pcode" onkeyup="autoAddress();">
    <input type="text" name="fulladdress" class="title" id="autoAddress" />
</form>

JavaScript如下

function autoAddress(){
    var address1 = document.address.address1.value;
    var address2 = document.address.address2.value;
    var city = document.address.city.value;
    var county = document.address.county.value;
    var postcode = document.address.pcode.value;

    var parts = [
        address1,
        address2,
        city,
        county,
        postcode
      ];

    var address = new Array();

    for (var i=0; i<=parts.length; i++){
        if (parts[i]){
            address.push(parts[i]) ;
        }
    }

    var joined = address.join(', ');

    document.getElementById('autoAddress').value = joined;
  }
4

3 回答 3

4 
<input type="text" name="fulladdress" class="title" id="autoAddress" />
                                                    ^^^^^^^^^^^^^^^^
function autoAddress(){
         ^^^^^^^^^^^

这实际上可能是这里的问题——一些浏览器倾向于将 HTML 元素的 ID 导入全局 JavaScript 命名空间（Internet Explorer 是这里的主要违规者，但其他浏览器出于兼容性原因也采用了相同的行为）。这可能导致在被覆盖之前加载来自 JavaScript 的实际 JS 对象/变量。

因此，尝试将您的 HTML 元素和 JavaScript 函数命名为不同的名称。

于 2013-05-29T21:44:01.170 回答
3 
<input type="text" name="fulladdress" class="title" id="autoAddress" />

我自己也遇到过这个错误，idautoAddress在 DOM 中创建了一个对象。更改函数名称或 ID 即可

于 2013-05-29T21:43:33.813 回答
2

重命名函数（或<input>）。

什么时候

<input type="text" name="fulladdress" class="title" id="autoAddress" />

在表单内部，因为<... onkeyup="autoAddress();"/> autoAddress这里的所有内容实际上是对具有autoAddressid 的元素的引用。<input>当在函数之外时不会发生这种情况（因为<script>标签的范围，无论你放在哪里，都有更高的优先级）。

因此，要么重命名函数，要么重命名输入（或将其留在外部<form>）。

于 2013-05-29T21:42:39.483 回答