Javascript simple script doesn't execute

Question

I've always been hesitant to learn JS since I have to go out of my way to debug the script. The support for such things is poor compared to IDEs for C#/C++ etc.

I'm trying a simple PHP and JS script to retrieve data from my MySQL database, but "onchange" doesn't seem to be triggered:

<!DOCTYPE HTML>

<html>

<head>

<script type='text/javascript'>

function ShowUser(name)
{
    if(name == "")
    {
        document.getElementById("display").innerHTML = "Please enter a username to check";
        return;
    }
    if(window.XMLHttpRequest)
    {
        xmlhttp = new XMLHttpRequest();
    }
    else
    {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function()
    {
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            document.getElementById("display").innerHTML = xmlhttp.responseText;
        }
    };

    xmlhttp.open("GET", "index.php?uName=" + name, true);
    xmlhttp.send();

}

</script>

</head>

<body>

<form>

    <?php
        $data = array();
        if(!empty($_GET['uName']))
        {
            $r = mysql_connect("localhost", "root", "pass") or die("Couldn't connect to db");
            mysql_select_db("db", $r) or die ("Couldn't select db");
            $q = mysql_query("select * from users where uName = '{$_GET['uName']}'") or die("Couldn't query table");
            $data = mysql_fetch_assoc($q);
            mysql_close($r);
        }

    ?>

    <input type="text" name="fUName" onchange="ShowUser(this.value);" style="width:125px;">

</form>

<div id="display"><?php print_r($data); ?></div>

</body>

</html>

It must be something silly I'm missing. Most of this code was taken from W3schools and put with my own PHP and HTML.

Thanks for any help.

Use IE Dev Tool, Firebug, or Chrome debugger to debug your javascript. — Thomas Li
– Thomas Li, Commented Jul 13, 2011 at 3:04
@Lee A couple tips, you should declare variables with var to avoid polluting the global scope. I'd avoid line-breaks after parentheses in JavaScript, since it can lead to bugs. Try this for example: var abc = function () { } (0 === 1);. (With the line-break after function ().) — fncomp
– fncomp, Commented Jul 13, 2011 at 3:07
nothing wrong with your javascript onchange trigger. Put alert in your function start. It is working. — Jayantha Lal Sirisena
– Jayantha Lal Sirisena, Commented Jul 13, 2011 at 3:07
@Matt I understand those concepts. This was supposed to be something quick to test I understand what I've been reading today, before bed! @Josh, my braces habits come from other languages I know. It's a shame I'll have to change for JS. Thanks for all your help. — Lee
– Lee, Commented Jul 13, 2011 at 3:08

sdleihssirhc · Accepted Answer · 2011-07-13 03:06:11Z

3

It looks like the reason your code isn't even being called is because the onchange event isn't triggered until after the text input has lost focus (at least, that's what happens in Chrome). So you're probably changing the value of the text box like crazy, but never clicking outside of it, so nothing happens.

answered Jul 13, 2011 at 3:06

sdleihssirhc

42.6k6 gold badges56 silver badges67 bronze badges

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

2 Comments

sdleihssirhc Over a year ago

Side note: when you do onchange="ShowUser(this.value)", you're still going to get an error, because this in that context refers to window, not the text box's value.

Lee Over a year ago

Aha! I must be tired.. I never clicked outside of the text box! Also, this.value works for me. Thanks

Michael Aaron Safyan · Accepted Answer · 2011-07-13 03:15:36Z

There are actually a number of wonderful tools out there such as the Closure JavaScript compiler, which can perform type-checking and other static analysis of JavaScript, the Chrome developer tools, which make it possible to test JavaScript on the fly and observe and debug the execution of JavaScript, and Firefox's Firebug add-on which is comparable to the developer tools built into Chrome. (See also my post about type-safety and testability of JavaScript in which I express my surprise at the great tooling).

I did a test to see if 'onchange' was the problem in Chrome by visiting 'about:blank', and inserting*:

<input type="text" onchange="document.write('changed')" />

And I observed that the change event is not called until you hit enter and finalize the content of the box. Is the bug that you were expecting it to trigger each time a new letter was entered? You might want to load your page in Chrome or Firebug and look at the script console to see if there are any errors.

*In the developer tools in Chrome, it is very easy to alter the DOM of a page to try out new things, and add arbitrary JavaScript in the console to prototype things before implementing them.

Also, you may find the Google JavaScript style guide useful to avoid staying out of hot water.

lambacck · Accepted Answer · 2011-07-13 03:07:10Z

0

On change does not fire until you move focus out of the input box.

If you want a good debugger use one of:

Chrome/Safari's webkit inspector (aka developer tools)
The Firebug addon in Firefox
The developer tools in IE8/9

These tools are every bit as good at debugging Javascript as IDEs for C#/C++.

answered Jul 13, 2011 at 3:07

lambacck

9,9463 gold badges37 silver badges46 bronze badges

Comments

Globalz · Accepted Answer · 2011-07-13 03:07:45Z

To debug javascript, I would recommend using the javascript console in Chrome's web inspector or the Firebug extension for firefox. Opera also has their own javascript console called dragonfly.

Taken from a Google Chome help page:

There are a couple of ways to view JavaScript errors and work to debug them in Google Chrome:

JavaScript Console: click the Page menu icon and select Developer > JavaScript Console. From here, you'll be able to view errors in the JavaScript execution, and enter additional JavaScript commands to execute.

JavaScript Debugger: available as Page menu icon > Developer > Debug JavaScript, the debugger provides a command prompt from which you can set breakpoints, backtrace, and more. Type help at the debugger command line to get started.

Collectives™ on Stack Overflow

Javascript simple script doesn't execute

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related