CODEWITHSUNDEEP
javascript
Pierce McGeough
Pierce McGeough

Reputation: 3086

TypeError: ID is not a function

As i type into the form fields the input thats at the bottom should also auto write in the same address as the above fields.

The JavaScript im using is working when I have the input outside the as you can see below but I need it in the form for submitting. The Error I get in the console is "TypeError: autoAddress is not a function" The form below 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" />

What I need DOES NOT WORK and is below. Im sure im just missing something simple. Notice the input at the bottom is inside the form.

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

The JavaScript is as follows

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

Upvotes: 3

Views: 3320

Answers (3)

C3roe
C3roe

Reputation: 96151

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

That might actually be the problem here – some browsers tend to import IDs of HTML elements into the global JavaScript namespace (Internet Explorer is a main offender here, but other browsers have adapted the same behavior for compatibility reasons). And that can lead to actual JS objects/variables from JavaScripts loaded before being overwritten.

So try naming your HTML element and your JavaScript function something different.

Upvotes: 4

acdcjunior
acdcjunior

Reputation: 135742

Rename the function (or the <input>).

When

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

is inside the form, for all <... onkeyup="autoAddress();"/> autoAddress here is actually a reference to the element with the autoAddress id. That does not happen when the <input> is outside the function (because then the scope of the <script> tag, wherever you put it, has higher precedence).

So either rename the function, or the input (or leave it outside the <form>).

Upvotes: 2

Isaac
Isaac

Reputation: 11805

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

I had this error myself once, the id autoAddress creates an object in the DOM. Change either the function name or the ID and it will work

Upvotes: 3

Related Questions