Why isn't Javascript changing a variable with onChange?

Question

So this is my code, I am wondering why changeUp isn't sending an alert to me or setting the variable value:

var selecteduname;
var xmlhttp;
function changeUp()
{
document.getElementById("useruname").onChange = function() {
    selecteduname = this.value;
    alert(selecteduname);
updateAdduser();
}


function loadXMLDoc()
{

if (window.XMLHttpRequest)
  {
 xmlhttp=new XMLHttpRequest();
}
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
}

function updateAdduser()
{loadXMLDoc();
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    var json = xmlhttp.responseText;
    var fields = JSON.parse(json);
    Object.keys(fields).forEach(function (name) {
  var input = document.getElementsByName(name);
  input.value = fields[name];
});
}
}
xmlhttp.open("GET", "ajaxuseradd.psp?uname="+selecteduname, true);
xmlhttp.send();
}

</script>

and

<form action="adduser.psp" method="get">
<fieldset>
    <label for="uname">Username:</label>
    <select name="uname" id="useruname" onChange="changeUp();">
<%
Blah blah blah Python Code to generate option values
%>


<%= options %> //More Python code, this actually puts them into the select box

</select>

</fieldset>
<fieldset>
    <label for="fname">First Name:</label>
    <input type="text" name="fname" />
</fieldset>
<fieldset>
    <label for="lname">Last Name:</label>
    <input type="text" name="lname" />
</fieldset>
<fieldset>
    <label for="email">Email:</label>
    <input type="text" name="email">
</fieldset>

Probably because the property's name is onchange not onChange (might still be more wrong with your code though). — Felix Kling
– Felix Kling, Commented Nov 3, 2011 at 19:29
One quick thing for sure: You're missing a closing } at least, to end your loadXMLDoc method — James
– James, Commented Nov 3, 2011 at 19:32
@Itay Moav - Every modern browser supports this method of registering events. Yes, even IE7. Heck, even IE6. Check it out — Ryan Kinal
– Ryan Kinal, Commented Nov 3, 2011 at 19:33
I think the closing } was the problem! Thanks! I need to start using an actual IDE for this. EDIT: Nope, not quite. Got it to give me an alert, but not fill the fields. Argh. — Steven Matthews
– Steven Matthews, Commented Nov 3, 2011 at 19:35

rossipedia · Accepted Answer · 2011-11-03 19:54:56Z

1

As commented above, the property name is "onchange", not "onChange". Javascript is case-sensitive, so those two are definitely different.

Also, the code you posted looks like it's missing a } somewhere. As it is, everything's inside the changeUp function. Which, coincidentally, never closes before that ending script tag.

However, there's something else going on here. This line in your markup:

<select name="uname" id="useruname" onChange="changeUp();">

Gets completely wiped out by this line in your code:

document.getElementById("useruname").onChange = function() {

Here's how I'd fix it up. First, the javascript:

function createAjax() {
    if(window.XMLHttpRequest)
        return new XMLHttpRequest();
    else
        return new ActiveXObject("Microsoft.XMLHTTP");
}


function updateAddUser(username) {
    var ajax = createAjax();
    ajax.onreadystatechange = function() {
        if(ajax.readyState == 4 && ajax.status == 200) {
            var json = ajax.responseText;
            var fields = JSON.parse(json);
            Object.keys(fields).forEach(function (name) {
                var input = document.getElementsByName(name);
                input.value = fields[name];
            });
        }
    }
    ajax.open("GET", "ajaxuseradd.psp?uname=" + username, true);
    ajax.send();
}

Then you can just change the HTML select tag to:

<select name="uname" id="useruname" onchange="updateAddUser(this.value)">

Having said all that, I would strongly urge you try something like jQuery. It would make the javascript code as trivial as:

$('#username').change(function(){
    $.get('ajaxuseradd.php', {uname:$(this).val()}, function(data, status, xhr) {
        $.each(data, function(key,value) {
            $('#'+key).val(value);
        });
    }, 'json');
});

Yeah, that's really terse, I know. More expressively, it could be written like this:

$('#username').change(function() {
    var userName = $(this).val();
    $.ajax({
        type: 'GET',
        url: 'ajaxuseradd.php',
        data: {
            uname: userName
        },
        success: function(data, status, xhr) {
            $.each(data, function(key, value) {
                $('#' + key).val(value);
            });
        },
        dataType: 'json'
    })
});

edited Nov 3, 2011 at 19:54

answered Nov 3, 2011 at 19:49

rossipedia

59.8k10 gold badges95 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Steven Matthews Over a year ago

I have been considering using jQuery, but everyone who I talk to about it is very anti-jQuery, and says that learning "actual Javascript" is better.

rossipedia Over a year ago

"Everyone" is a very general term. Just do a quick google search, and you'll see that the people you are talking to are misinformed. jQuery has even been adopted by Microsoft as the official client-side javascript library for ASP.net. I've been programming in Javascript since '97, and jQuery is the best thing that's ever happened to it.

Steven Matthews Over a year ago

Ok, well, it seems easier, and more intuitive. Should I learn much more Javascript before learning it, or should I dive right in now?

rossipedia Over a year ago

It's a good idea to learn the underlying technology that jQuery is built on, so that you don't get caught unawares. But there's no reason you can't learn both jQuery and basic javascript at the same time.

rishi · Accepted Answer · 2011-11-03 19:38:29Z

0

You are missing a brace. Try running jslint on your code.

Secondly, You are trying to assign a function to the onChange event inside the method changeUp. Whereas changeUp is again the same method invoked in the first place. May be causing recursion.

Thanks, RR

answered Nov 3, 2011 at 19:38

rishi

1021 silver badge7 bronze badges

Collectives™ on Stack Overflow

Why isn't Javascript changing a variable with onChange?

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related