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

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

• javascript

• What does "does not work" mean? – Mike Christensen Commented May 29, 2013 at 21:37
• Sure that everything else is the same? – benestar Commented May 29, 2013 at 21:39
• 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. – Pierce McGeough Commented May 29, 2013 at 21:40
• 1 Does the problem go away if you change the name of the function to something other than the element ID? – George Cummins Commented May 29, 2013 at 21:40
• Can you do some basic debugging? Is document.getElementById('autoAddress') a valid object? Does joined get created? Does autoAddress even get called? – Mike Christensen Commented May 29, 2013 at 21:42

3 Answers 3

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

<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

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