従業員番号を入力すると氏名を表示させるというプログラムを作成しておりますが、エラーが出てしまいます。

質問

AJAX超初心者です。
従業員番号を入力すると非同期処理を行って社員マスタで検索した氏名を表示させたいのですが、エラーが出てしまい、煮詰まってしまいました。
エラーを解決する方法をどうかご教授ください。

【エラー】
document.getElementById("emp_no") is null
※emp_noがなぜ取得出来ないのかが分かりません。。。

【sample1.htm】
<script type="text/javascript" src="funcs.js"></script>
<script type="text/javascript" >
//<![CDATA[
function getEmpName(){
var emp_no = document.getElementById("emp_no").value;
var emp_name;
var httpObj = getHttpObject();

httpObj.open("GET", "sample1.php?emp_no=" + emp_no);
httpObj.send(null);
httpObj.onreadystatechange = function(){
if(httpObj.readystate == 4){
if(httpObj.status == 200){
emp_name = httpObj.responseText;
document.getElementById("emp_name").value = emp_name;
}
}
}
}
//]]>
</script>

<tr>
<td>従業員番号：<input type="text" name="emp_no"
onblur="getEmpName();" /></td>
<td>従業員氏名：<input type="text" name="emp_name" id="emp_name" />

【funcs.js】
function getHttpObject() {
var xmlhttp;
if (window.ActiveXobject){
try {
xmlhttp = new ActiveXobject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
}else if (window.XMLHttpRequest) {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
function addListener(eSrc, eType, eFunc, cap) {
if(eSrc.attachEvent) {
eSrc.attachEvent('on' + eType, eFunc);
}else if(eSrc.addEventListener) {
eSrc.addEventListener(eType, eFunc, cap);
}else {
alert('No support on your Browser');
return false;
}
}

【sample1.php】
<?php
$emp_no = $_GET["emp_no"];

//データベースへ接続
mysql_query("set names utf8");

$result = mysql_query("select * from *** where *** = '$emp_no'");

$row=mysql_fetch_array($result, MYSQL_ASSOC);

echo $row["emp_name"];

?>

長々とソースを記載してしまい申し訳ございませんがどうぞ宜しくお願い致します。

補足 エラー表示された環境はFirebugになります。
どうぞ宜しくお願い致します。

回答No.1

noname#94983 · ベストアンサー

>document.getElementById("emp_no") is null
>※emp_noがなぜ取得出来ないのかが分かりません。。。

idが"emp_no"のオブジェクトがないから。
よく見てごらん。name="emp_no"はあるけど、id="emp_no"はない。

お礼

ご指摘どうも有難うございます！
修正しましたらエラーは無くなりました。
ほんとうにどうも有難うございました。
ただ、エラーは解決したのですが目的の動きをしてくれません。。。
社員マスタからの値は取得しているようなのですが、テキストボックス（従業員氏名欄）に取得した値が全く表示されないのです。
こちらもご教授頂けますと非常に有難いです。
どうぞ宜しくお願い致します。

回答No.2

神崎 渉瑠（@taloo）

onreadystatechangeをセットするタイミングが遅すぎませんか？
openの前にセットするか、同期通信にしてみてはいかがでしょうか。

お礼

早速のアドバイスどうも有難うございます。
同期通信で問題解決することが出来、非常に助かりました。
有難うございました！
これから色々勉強していきたいと思います。