- ベストアンサー
Javascriptを用いた社員番号から名前を検索する方法
- javascriptを使用して、テキストエリアに入力された6桁の社員番号を取得し、名前を検索する仕組みを作成する方法について教えてください。
- 検索機能の実装にはPHPを使用し、MySQLのデータベースにアクセスして名前を取得します。
- 質問者は、テキストエリアに6桁の社員番号が入力された時に検索を行い、別のテキストエリアに名前を表示させる方法を知りたいとしています。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 簡単にですが作ってみました。 セキュリティやエラーチェック等特に考慮していませんのでその辺は適切に実装してください。 社員名を取得するphpに関しては相当簡易的に書いています。 Ajax部分についてはjqueryを利用してみました。 (初めて使ったので他の良い記述方法があるかもしれませんがご了承下さい) 社員番号が111111と222222の場合は社員名、そのほかは該当無しとしています。 フォーム画面====================================================== <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>テスト</title> <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript"> <!-- var formRegist; $(document).ready ( function(){ formRegist = document.formRegist; }); function getUserName ( userId ) { if ( userId.length < 6 ) { // 6文字以下は社員名に空白をセット setUserName ( "" ); } if ( userId.length == 6 ) { // 6文字になった場合にusername.phpへアクセスし社員名を取得 // username.php?userid=xxxxxx $.getJSON ( "username.php", {userid:userId}, callbackUserName ); } } function callbackUserName ( data ) { // ajax通信後に呼ばれjsonデータが返ってくる // {"username":"社員名"} setUserName ( data.username ); } function setUserName ( userName ) { // userNameに与えられた文字列を社員名フィールドにセット formRegist.username.value = userName; } //--> </script> </head> <body> <form name="formRegist" action="regist.php"> 社員番号:<input type="text" name="userid" onkeyup="getUserName(this.value);"><br> 社員名:<input type="text" name="username" readonly><br> <input type="submit" value="登録"> </form> </body> </html> username.php====================================================== <?php $userName = ""; $userId = $_GET['userid']; if ( $userId == "111111" ) { $userName = "○○ 太郎(" . $userId . ")"; } else if ( $userId == "222222" ) { $userName = "■■ 二郎(" . $userId . ")"; } else { $userName = "該当者無し"; } print '{"username":"'. $userName . '"}'; ?>
その他の回答 (2)
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 例えばですが初期表示時は空のフォームを表示し、社員番号の入力後表示した場合にフォーム表示部分でその検索結果を埋める感じでしょうか。 if ( 社員番号が入ってるか ) { // 社員番号から社員名を取得 $userName = "社員名の取得処理で入った名前"; } // フォーム出力部分 <input type="text" name="userName" value="<?= $userName ?>"> とすれば社員番号が入ってきたときに社員名を初期値として出すことが出来ます。 Ajaxについてはいろいろなライブラリがあり、それは検索してみてください。
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 一番簡単なのはフォーム自体を社員名取得にsubmitしてしまい、社員番号から社員名を検索後再表示する方法です。 フォームの定義がわかりませんが、 document.フォーム名.action="社員名取得.php"; document.フォーム名.submit(); で飛ばしちゃいます。 他の方法としては6文字入力された時点でAjaxの機能を利用して非同期に社員名取得.phpへ社員番号を送信し、結果を受け取って社員名フィールドにセットします。 この方法であれば画面の再描画は行われません。
お礼
早速のご回答ありがとうございます。 私もそのように思いましたが、社員名取得のphpから、どうやって元画面に 取得した名前を返して来るのかがわかりません。。。 取得php側で何かアクションがあれば良いのですが、、、それもない為。。。 教えて頂ければ幸いです。 よろしくお願いします。