I'm trying to call a function with onchange() in an input form.

When I check the console in Chrome, the code below returns:

ReferenceError: changingNow is not defined

In safari, it says:

ReferenceError: Can't find variable changingNow

Here's the code:

function changingNow() {
 first_name=document.getElementById(first_name);
 last_name=document.getElementById(last_name);
 username=document.getElementById(username);
 category=document.getElementById(category);
 if ((first_name!=="")&&(last_name!=="")&&(username!=="")&&(category!="empty")) {
   form1.process.disabled = false;
 }
 else {
  form1.process.disabled = true;
 }

 document.getElementById('tweet').value = 'I just voted for '+first_name+' '+last_name+'('+username+')'+'in the '+category+' category!';
 }


 First Name<input type="text" name="first_name" id="first_name" class="first_name" maxlength="50" onchange="changingNow"/><br/>

Googling this seems to indicate that jQuery is responsible, but there's no jQuery on the page.

EDIT

Rob W is correct, I've already tried brackets, they're irrelevant in sorting this problem.

I'm trying to call a function with onchange() in an input form.

When I check the console in Chrome, the code below returns:

ReferenceError: changingNow is not defined

In safari, it says:

ReferenceError: Can't find variable changingNow

Here's the code:

function changingNow() {
 first_name=document.getElementById(first_name);
 last_name=document.getElementById(last_name);
 username=document.getElementById(username);
 category=document.getElementById(category);
 if ((first_name!=="")&&(last_name!=="")&&(username!=="")&&(category!="empty")) {
   form1.process.disabled = false;
 }
 else {
  form1.process.disabled = true;
 }

 document.getElementById('tweet').value = 'I just voted for '+first_name+' '+last_name+'('+username+')'+'in the '+category+' category!';
 }


 First Name<input type="text" name="first_name" id="first_name" class="first_name" maxlength="50" onchange="changingNow"/><br/>

Googling this seems to indicate that jQuery is responsible, but there's no jQuery on the page.

EDIT

Rob W is correct, I've already tried brackets, they're irrelevant in sorting this problem.

• javascript
• jquery
• dom-events

• 1 Where you have this code and where you call it? – Adil Commented Jun 27, 2012 at 16:46
• You mean you see it when you enter stuff (onchange)? – mvbl fst Commented Jun 27, 2012 at 16:46
• I checked the error consoles on each browser. Nothing came up, in the actual browser – Niall Paterson Commented Jun 27, 2012 at 16:47
• try calling the function: onchange="changingNow()" – jackwanders Commented Jun 27, 2012 at 16:47
• Is your code inside a $(document).ready(? changingNow needs to be global to use it on an inline handler. – gen_Eric Commented Jun 27, 2012 at 16:56

4 Answers 4

There are a lot of problems in your code. For starters, the lines where you get the values of your various text fields is incorrect:

first_name=document.getElementById(first_name);

getElementById expects a string. You aren't passing a string, you're passing an as-yet undefined variable named first_name. To make it a string, give some quotes! Second, you aren't using the var keyword, which affects the scope of the variable. Lastly, with those two errors corrected, you still aren't getting the value, you're getting the element -- getElementById gives you an HTMLElementObject. Further on, you try to treat this object as a string:

first_name!==""

As it stands, first_name will never equal an empty string because it is not a string, it is an object. Putting it all together, you want instead:

var first_name=document.getElementById('first_name').value;

This will give you the value of the text field with the id "first_name" as a string.

Further on, your if statement has way too many parenthesis!

if ((first_name!=="")&&(last_name!=="")&&(username!=="")&&(category!="empty"))

These parenthesis are not necessary, instead:

if (first_name !== "" && last_name !== "" && username !== "" && category!= "empty"){ }

// or my personal preference:

if (
     first_name !== "" &&
     last_name !== "" &&
     username !== "" &&
     category!= "empty"
){ }

Finally, I would suggest removing the inline onchange event and replacing it with a javascript assignment:

document.getElementById('first_name').onchange = changingNow;

This is just one way to apply an event, see this answer for more info on that.

Putting it all together:

var changingNow = function() {
    var first_name = document.getElementById('first_name').value;
    var last_name = document.getElementById('last_name').value;
    var username = document.getElementById('username').value;
    var category = document.getElementById('category').value;
    var form1 = document.getElementById('form1');
     if (
         first_name !== "" &&
         last_name !== "" &&
         username !== "" &&
         category!= "please choose a category"
    ){
        // this line of code is not valid in regular JS...
        //form1.process.disabled = false;
        document.getElementById('tweet').value = 'I just voted for '+first_name+' '+last_name+' ('+username+')'+' in the '+category+' category!';
    } else {
        // this line of code is not valid in regular JS...
         //form1.process.disabled = true;
        document.getElementById('tweet').value = 'please plete the fields above!';
    }
}
document.getElementById('first_name').onchange = changingNow;
document.getElementById('last_name').onchange = changingNow;
document.getElementById('username').onchange = changingNow;
document.getElementById('category').onchange = changingNow;
changingNow();

Try it out here: http://jsfiddle/yzbWr/

Documentation

• document.getElementById on MDN - https://developer.mozilla/en/DOM/document.getElementById
• addEventListener on MDN - https://developer.mozilla/en/DOM/element
• Variable scope cheatsheet on MDN - https://developer.mozilla/en/JavaScript/Reference/Scope_Cheatsheet

It might be that you have function changingNow() defined AFTER you have inserted the <input> field, and because you don't execute it onchange but assign it to onchange (changingNow() vs changingNow), you end up assigining it an undefined

You could fix this by giving a global namespace to your app and then calling the method explicitly:

window.myApp = {};
window.myApp.changingNow = function(){
    // your function code here
};

And then in your HTML:

<input type="text" ... onchange="window.myApp.changingNow">

Gentlemen (and ladies??) Our issue seems to have been solved. My issue was, pathetically, that <script type="text/javascript"> was omitting the 'text'.

Nevertheless, there are solutions. It seems the () are nessecary, but my thanks to Chris' excellent answer, and indeed his ments about getelementbyid are correct.

Yours etc,