Javascriptを用いた社員番号から名前を検索する方法
- javascriptを使用して、テキストエリアに入力された6桁の社員番号を取得し、名前を検索する仕組みを作成する方法について教えてください。
- 検索機能の実装にはPHPを使用し、MySQLのデータベースにアクセスして名前を取得します。
- 質問者は、テキストエリアに6桁の社員番号が入力された時に検索を行い、別のテキストエリアに名前を表示させる方法を知りたいとしています。
- ベストアンサー
javascriptからの検索に関して
曖昧な質問で申し訳ありませんが、教えて下さい。 あるテキストエリアに、社員番号を入力したら、即座に別のテキストエリア に名前を表示させるというような仕掛けを作成しようと考えています。 Javascriptを用いて、６桁（社員番号）入力されたらキックするというような 記述をしましたが、名前自体がＭｙＳＱＬの中に存在する為、ＰＨＰで検索 しようと考えています。 <script language=javascript> function test(obj,tugi){ if(obj.value.length>=6) { } } ここからがどのように仕掛けを作成すれば良いかわかりません。 何かアドバイスを頂けないでしょうか？ よろしくお願いします。
- yurix_1
- お礼率38% (44/114)
- PHP
- 回答数3
- ありがとう数2
- みんなの回答 （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へ社員番号を送信し、結果を受け取って社員名フィールドにセットします。 この方法であれば画面の再描画は行われません。
関連するQ&A
- JavaScriptまったくの初心者です。
JavaScriptまったくの初心者です。 文法も何も分からない状態です。。。 ホームページの ・テキストエリア１ ・テキストエリア２ ・テキストエリア３ があったとして、そこに入力された文字列をホームページ上に表示させることってできますか？ 表示方法としては 「僕は「テキストエリア１に入力された文字列」「テキストエリア２に入力された文字列」です。」 という感じです。 テキストエリアに入力が無い場合は 「僕はです。」 といった感じで表示したいのです。。。 しかも、テキストエリアに入力があった場合、テキストエリアの文字の頭に「！」を付けたいです。 （例）テキストエリア１に「テスト」テキストエリア３に「サンプル」と入力があった場合 僕は！テスト！サンプルです。 JavaScriptでできるのかどうか、できる場合の記述を教えてください。 完全にまる投げとなってしまい本当に申し訳ございませんが、とても困っています。。。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- Javascriptフォーム形成
javascriptを使って入力フォームを形成しようと考えています。 PHPからテキストボックスの数を8、テキストエリアの数を6と送って8それぞれの入力フォームを作成したいです。動的にフォーム形成したいです。 こんなことできますかね？ 教えて下さい。よろしくお願いします。
- ベストアンサー
- JavaScript
- Javascriptでテキストエリアにタグの制限をかけたいです。
フォームで、テキストエリアの作成をしましたが、 迷惑メールで、テキストエリアにタグを入れて来るようになってしまったのですが、 テキストエリアへ、タグが入らないようにする、javascriptとかはありますでしょうか？ あれば教えて下さい。
- ベストアンサー
- JavaScript
- javascriptでボタンを押すたびにテキストエリアを追加
javascriptでボタンを押すたびにテキストエリアを追加しようとしています。 下記の内容を応用して 1 テキストエリア(1) 2 テキストエリア(2) 3 テキストエリア(3) 4 テキストエリア(4) ・ ・ ・ ボタンを押すたびに追加され15個まで増やすという風にしようとしているのですが、うまくいきません。テーブルの中に入るところまでは良くのですが、連番の数字を入れるのができません。 var tag_num=4; function myTextAreaAdd(obj){ var max=15; var c=count("howto"); if(c>=max) return false; var oTag = document.createElement("textarea"); oTag.setAttribute("name", "howto" + tag_num++); var oDiv = document.getElementById("area"); oDiv.appendChild(oTag); if(c>=max-1) obj.disabled=true; } 教えてください。宜しくお願いします。
- ベストアンサー
- JavaScript
- javascriptでメールアドレスが同一か確認
javascriptでメールアドレスが同一か確認 現在、問い合わせフォームをつくっております。 必須項目を部分的に作るのまではできたのですが、 メールアドレスを必須項目にしつつ、 メールアドレス確認の欄で同一のアドレスが記入されているのかを確かめ、 違った場合は「違います」とアラートをだしたいのです。 どのようにしたらいいのでしょうか？ 急ぎの為大変困っております。 どうかご回答お願い致します。 以下はこちらのサイトを参考に作成しました http://f32.aaa.livedoor.jp/~azusa/?t=js&p=formcheck#a_chkHissu ------java部分----- <script type="text/javascript"> function sample(frm){ /* 必須入力のname属性 */ var hissu=Array("name","hurigana","mail","mail2","naiyo"); /* アラート表示用 */ var hissu_nm = Array("お名前","ふりがな","メールアドレス","メールアドレス確認","内容"); /* 必須入力の数 */ var len=hissu.length; for(i=0; i<len; i++){ var obj=frm.elements[hissu[i]]; /* テキストボックス or テキストエリアが入力されているか調べる */ if(obj.type=="text" || obj.type=="textarea"){ if(obj.value==""){ /* 入力されていなかったらアラート表示 */ alert(hissu_nm[i]+"は必須入力項目です"); /* 未入力のエレメントにフォーカスを当てる */ frm.elements[hissu[i]].focus(); return false; } }else{ /* radioボタンがチェックされているか調べる */ for(var j=0, chk=0; j<obj.length; j++){ /* チェックされていたらchkフラグをプラス */ if(obj[j].checked) chk++; } if(chk==0){ /* 1つもチェックされていない場合はfalseを返してフォーム送信しない */ alert(hissu_nm[i]+"は必須入力項目です"); return false; } } } /* 必須入力項目が全て入力されている場合はtrueを返してフォーム送信 */ return true; } </script> ------html部分----- <form action="mail/●◎●.php" name="toiawase" method="post" onsubmit="return sample(this)"> ~省略~ メールアドレス<input type="text" name="mail" value="" size="35" maxlength="60"> メールアドレス確認<input type="text" name="mail2" value="" size="35" maxlength="60"> </form> 宜しくお願い致します。
- ベストアンサー
- JavaScript
- javascript 文字制限について
はじめまして。初心者でメールフォームを作成中です。 文字制限についてご教授ください。 初心者ながらどうにか6桁の文字制限をかける事が出来ました。 ここから最初の2桁のみ特定の数字（09）を入れなければエラーメッセージが表示されるようにしたいと考えています。 例：09****でないとエラーが出る この場合どうすればよいでしょうか？ <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!--// function restChar() { n = document.formN.textN.value.length; if(n > 6) alert("整理番号を正しく入力してください"); if(n < 6) alert("整理番号を正しく入力してください"); } //--> </SCRIPT> </HEAD> <BODY> 整理番号を入力してください <FORM name="formN"> <TEXTAREA rows="3" size="45" name="textN" onChange="restChar()"></TEXTAREA> </FORM> </BODY> </HTML> どうぞ宜しくお願いします。
- 締切済み
- JavaScript
- JavaScriptの正規表現について
お世話になります。 HTMLでテキストに入力された数値のチェックを下記のようにJavaScriptで行っています。 --------------------------------------------------------- function check_num(obj) {') obj_w = document.form_name.elements[obj];') if(obj_w.value.match(/^\d{0,1}(\.\d{1,3})?$/)){ return 0; else{ alert("測定値は整数部分1桁、小数部分3桁までの正の数値を入力して下さい。") obj_w.focus(); return 1; } } ----------------------------------------------------------- このとき、チェックする整数部分、小数部分の桁数を変数にして汎用性のある関数にしたいのですが、正規表現のなかで変数を使うにはどのようにしたらよいのでしょうか？ よろしくお願い致します。
- ベストアンサー
- JavaScript
- javascript
外部のテキストファイルをよみ、表示させています。テキストファイルは、例えば学生番号と名前が入っているテキストファイルを配列で並べており、表示は配列の番号で表示しています。 そこで、学生番号をランダムで表示（if文でもし、入力した値が、学生番号と一致していたら表示させるとか）出来るのでしょうか？
- 締切済み
- JavaScript
- JavaScriptを使ったらサーブレットの検索が出来なくなりました…
お世話になります。 ＨＴＭＬでテキストフォームに検索条件を入力し、送信ボタンを押すと 検索するサーブレットにとんで結果をＪＳＰで表示する…という プログラムを作っています。 ＨＴＭＬ上で、テキストフォームが未入力の場合はJavaScriptで 警告ウィンドウを表示させる様に作ったのですが、テキストフォームに 検索条件を入力した時にサーブレットにとばなくなってしまいました。 検索条件を入れて送信ボタンを押してもページは変わらず、 フォーム内容はクリアされます。この時は警告は出ません。 JavaScriptのコードを削除するとちゃんと検索結果のＪＳＰにまで 処理が行われるのですが…。 参考までに、ＨＴＭＬのソースも載せておきます。 <html> <head> <title>検索画面</title> <script language="JavaScript"> <!-- function getError() { txt=document.searchForm.search.value; if (txt=="") { alert("何も入力されていません！"); } } //--> </script> </head> <body> <center> <br><br><br><br><br><br><br><br><br><br> <b><font color=Salmon size=4>検索条件を入力して下さい。</font></b><br><br> <form name="searchForm"> <form method="post" action="../kadai7/Show" > <input type="text" name="search" size="25" maxlength="10"> <input type ="submit" value="GO!" onClick="getError()"> </form> <a href=Menu.htm>★MENUに戻る★</a><img src="HTML\poo.gif"> </center> </body> </html> どうすればちゃんと処理されるようになるのか分かりません。 宜しくお願いします。
- ベストアンサー
- JavaScript
- htmlフォーム（javascript）が動作しません。
htmlフォーム（javascript）が動作しません。 フォームの作成でクリックをするとあらかじめ表示されていた薄い文字（入力案内）が消えるようにしたいです。 何度か試してみましたが、うまく動作しません。 よろしければ、アドバイスをお願いします。 （この質問を打ち込む欄と同じ感じにしたいです。） 環境：Mac os10.06、Safari ツール：DreamweaverCS3 確認は、「ブラウザのプレビューで確認」をしています。 それと．．．バリデートをすると、inputタグで、「HideFormGuide(this)」属性はアクティブではない。。。」とコメントが出てしまいます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> バージョンをかえずに違う方法でエラーにならない方法がありましたらアドバイスをお願いします。 【HTML】 <input type="text" value="メッセージ" style="color:#999999; width:550px; height:200px; onfocus="HideFormGuide(this);" onblur="ShowFormGuide(this);"/> 【javascript】※<head>～</head>内に表示させています。 <script type="text/javascript"> var GuideSentence = 'メッセージ'; function ShowFormGuide(obj) { // 入力案内を表示 if( obj.value == '' ) { obj.value = GuideSentence; obj.style.color = '#808080'; } } function HideFormGuide(obj) { // 入力案内を消す if( obj.value == GuideSentence ) { obj.value=''; obj.style.color = '#000000'; } } </script>
- ベストアンサー
- ホームページ作成ソフト
お礼
早速のご回答ありがとうございます。 私もそのように思いましたが、社員名取得のphpから、どうやって元画面に 取得した名前を返して来るのかがわかりません。。。 取得php側で何かアクションがあれば良いのですが、、、それもない為。。。 教えて頂ければ幸いです。 よろしくお願いします。