Javascript simple script doesn't execute
I've always been hes开发者_StackOverflow中文版itant 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.
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.
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.
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++.
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.
加载中,请稍侯......
精彩评论