締切済み

商品コードを入れたら自動で商品名を表示(ASP)

2006/07/13 18:26

質問のタイトルの通り、商品コードを入力してタブでテキストボックスを移動するタイミングで商品名を表示させる処理を作りたいと思っています。ネットで検索した結果、inputのイベントハンドラでonchangeを使えばいいとこまではわかったのですが、例文では、そこでコールしているのが alertなどの単純な関数が多く、そこから商品コードを使って商品マスタが入っているＤＢに接続して検索をかけるようなソースは見つけることが出来ませんでした。（例文なんで当たり前ですが・・）現在作っているシステムでは呼び出されたaspでhtmlに表示させるタグを作成し（このタイミングでDBへ接続し必要なデータは抽出し、タグと一緒に編集している）、それを単純にhtmlで表示する仕組みになっています。なので、一度html(asp）を表示させてしまうと、そこからonchangeで関数を呼び出しても、DBへの接続や抽出のやり方がわからないのです。すいません。稚拙な文章で意図がうまく伝わってないかもしれませんが何かヒントでも構いませんので分かる方がいましたらご教授ください。

septem9
お礼率87% (57/65)

JavaScript
回答数7
ありがとう数12

みんなの回答 （7）
専門家の回答

みんなの回答

arenani_sorenani
ベストアンサー率73% (58/79)

2006/07/14 21:12 回答No.7

No5の回答に対するお礼を良く読むとどうも勘違いをされているような気がしてきました。念のため補足しておきますが input.aspは1度表示させたら再描画はさせずにあくまでも表示されたページ内の隠しフレームのみ再読込みを行わせるという意味です。 <iframe src="search.asp?cd=0" name="resp" width="0" height="0" frameborder="1"></iframe> ↑ここがキモです。また、呼び出し先の抽出用ASPは、当たり前ですがinput.asp自身ではなく専用のASPを一枚書いてください。 document.location.href = "input.asp?CD=123&SEQNO=1" では表示中のページが自分自身を再呼び出ししますので再描画されて画面は初期化されてしまいます。あくまでも隠しフレームであるrespを再読込みしますので document.resp.location.href="search.asp? CD=123&SEQNO=1" 呼び出し先もinput.aspではなく抽出専用のVBscriptのみのASPを記述します。

arenani_sorenani
ベストアンサー率73% (58/79)

2006/07/14 18:43 回答No.6

当初のご質問の「商品コードを入れたら自動で商品名を表示(ASP)」は解決してますよね・・後は、javascript上のテクニックで解決できると思います。要は返値を10個保存できれば良い訳です。ご自分で考えて下さい・・と言いたい処ですが、ここはjavascriptのカテなので一応お答えします。配列を使います。先ほどの呼び出し側htmlを以下のように変えればよろしいかと・・ <script type="text/javascript"> var arr=new Array(); function search_cd(num){ obj=document.forms[0]; if(obj.elements["code_"+num].value!=""){ document.resp.location.href="search.asp?cd="+obj.elements["code_"+num].value; setTimeout("write_syouhinmei("+num+")",2000); } } function write_syouhinmei(num){ arr[num]=resp.document.forms[0].ret.value for(i=0;i<10;i++){ if(arr[i]){ document.forms[0].elements["syouhinmei_"+i].value=arr[i]; } } } </script> <body> <form method="POST" action=""> 商品コード1： <input type="text" name="code_0" value="" onchange="search_cd(0)" /> 商品名1： <input type="text" name="syouhinmei_0" value="" /><br> 商品コード2： <input type="text" name="code_1" value="" onchange="search_cd(1)" /> 商品名2： <input type="text" name="syouhinmei_1" value="" /><br> 商品コード3： <input type="text" name="code_2" value="" onchange="search_cd(2)" /> 商品名3： <input type="text" name="syouhinmei_2" value="" /><br> 商品コード4： <input type="text" name="code_3" value="" onchange="search_cd(3)" /> 商品名4： <input type="text" name="syouhinmei_3" value="" /><br> 商品コード5： <input type="text" name="code_4" value="" onchange="search_cd(4)" /> 商品名5： <input type="text" name="syouhinmei_4" value="" /><br> 商品コード6： <input type="text" name="code_5" value="" onchange="search_cd(5)" /> 商品名6： <input type="text" name="syouhinmei_5" value="" /><br> 商品コード7： <input type="text" name="code_6" value="" onchange="search_cd(6)" /> 商品名7： <input type="text" name="syouhinmei_6" value="" /><br> 商品コード8： <input type="text" name="code_7" value="" onchange="search_cd(7)" /> 商品名8： <input type="text" name="syouhinmei_7" value="" /><br> 商品コード9： <input type="text" name="code_8" value="" onchange="search_cd(8)" /> 商品名9： <input type="text" name="syouhinmei_8" value="" /><br> 商品コード10： <input type="text" name="code_9" value="" onchange="search_cd(9)" /> 商品名10： <input type="text" name="syouhinmei_9" value="" /><br> </form> <iframe src="search.asp?cd=0" name="resp" width="0" height="0" frameborder="1"></iframe> </body> .

質問者

お礼 2006/07/18 12:58

何度もコメントいただきありがとうございます。仰る通り、まだ理解しきれていない部分があると認識してます。これらのコーディングを参考に、もう少し自力でやってみたいと思います。

arenani_sorenani
ベストアンサー率73% (58/79)

2006/07/14 11:56 回答No.5

No4の回答を補足して、具体的に書きます。呼び出し側html <script type="text/javascript"> function search_cd(){ obj=document.forms[0]; if(obj.elements["code"].value==""){ alert("商品コードを入力してください！！"); }else{ document.resp.location.href="search.asp?cd="+obj.elements["code"].value; setTimeout("write_syouhinmei()",2000); } } function write_syouhinmei(){ document.forms[0].elements["syouhinmei"].value=resp.document.forms[0].ret.value } </script> <body> <form method="" action=""> 商品コード： <input type="text" name="code" value="" /> <input type="button" value="検索" onclick="search_cd()" /> 商品名： <input type="text" name="syouhinmei" value="" /><br> </form> <iframe src="search.asp?cd=0" name="resp" width="0" height="0" frameborder="0"></iframe> </body> 抽出用ASP　ファイル名：search.asp <% Set con=Server.CreateObject("ADODB.Connection") con.Open [dsn_name],[user],[password] cd=Request.QueryString("cd") If cd<>0 Then mySQL="Select * From [table] Where cd=" & cd & ";" Set rs=con.Execute(mySQL) If rs.EOF Then Response.Write "<body><form><input name='ret' type='text' value='' /></form></body>" & vbCrLf Response.Write "<script language='javascript'>alert('該当する商品ＣＤはありません！！');</script>" Else Response.Write "<body><form><input name='ret' type='text' value='" & rs("商品名") & "' /></form></body>" & vbCrLf End If rs.Close Set rs=Nothing End If con.Close Set con=Nothing %> .

質問者

お礼 2006/07/14 16:40

ソースコードまで載せて頂いて大変ありがとうございます。参考にし、ソースをこねくりまわして商品名の表示はさせることができました。出来たのですが・・・・。商品コードを打つたび（タブ移動するたび）に、ページを書き直すことになり例えば、うちの商品コード登録は１画面で１０行まで入力できるのですが１行目に商品コードを入れると、その横に商品名１が表示され、今度２行目に商品コードを入れると、その横に商品名２が表示されるのですがさきほど入力した商品コード１の情報が消えてしまうのです。（Ｊａｖａから値を渡されるたびにａｓｐでｈｔｍｌを作り直してしまう）う～ん、、、何を言ってるのかわかってもらえますでしょうか(^_^; 画面遷移１．input.asp(ここでhtmlのタグ編集およびDBとの接続）２．入力画面表示（上記input.aspで編集したhtmlが表示）３．商品コード入力→タブ移動（onchangeのイベントハンドラでjavaの処理へ移動）４．javaからａｓｐへ商品コード１とシーケンス番号を渡す　　document.location.href = "input.asp?CD=123&SEQNO=1" ５．input.aspが呼ばれ、再度htmlタグ編集をする際に商品コード１が取得　　できるので商品名１を表示するようタグ編集。６．同じ画面より商品コード２を入力。　　３～５．の処理をし、商品名２を表示。　　ただし商品コード１、商品名１が消える。　　

arenani_sorenani
ベストアンサー率73% (58/79)

2006/07/13 22:23 回答No.4

隠しインラインフレームを作り、onchangeでそのフレームのロケーションをDBから抽出するASPにします。渡す時はGETで( http://***.com/***.asp？id=****)とすれば良いと思います。 ASP側では、抽出結果をnameをつけたinputタグにvalueとして書き出します。インラインフレーム内に結果が書き出されますので、javascriptでvalueを取得して必要な場所に書き出せば、見た目はAjaxのような無遷移で書き換えが行われます。実際に業務用のサイトで郵便番号検索などの10万件単位のデータ検索に使用しています。参考まで・・・ .

質問者

お礼 2006/07/14 10:40

おお！実現可能なんですね。しかしＡＳＰプログラミングを完璧に理解している人であれば大変参考になりそうなんですが、私にはまだそこまでのスキルがないためなんとなく・・・参考になりそうです。でも実際に業務で利用されているのを知り励みになりました。ありがとうございました。

LancerVII
ベストアンサー率51% (1060/2054)

2006/07/13 18:48 回答No.3

こんにちは。 No2です。どうでも良いことですが >データ量が膨大ですと実現的では無いですねのくだり、現実的では無いですねですね。すいません。

LancerVII
ベストアンサー率51% (1060/2054)

2006/07/13 18:41 回答No.2

こんにちは。 JavaScriptのみで実現する場合は、すべてのデータを一度読み込み、 JavaScript上に保持しておく必要があります。 >なので、一度html(asp）を表示させてしまうと、そこからonchangeで >関数を呼び出しても、DBへの接続や抽出のやり方がわからないのです。 DBに接続して取得する為には一度、サーバに接続が必要な為、どんなに調べても、考えてみても出てこないのです。 onChangeが呼ばれた時に、入力された商品コードをsubmitして、商品名を取得して再表示する必要があります。一度画面が切り替わる、サーバのレスポンスによっては待ちが出る可能性があります。上記の問題をクリアするのにAjaxという機能を使うと、サーバには接続しますが、画面の遷移は無いように作ることが可能です。なんにせよ、入力された都度情報を取得する際は、一度サーバに接続する必要があります。（すべての情報を最初に読み込めばその限りではありませんが、データ量が膨大ですと実現的では無いですね）

質問者

お礼 2006/07/14 10:14

コメントありがとうございます。１さんの内容と同じ手法になりますかね。Ａｊａｘというものを知らなかったので今後の勉強の課題にさせて頂きます。

galluda
ベストアンサー率35% (440/1242)

2006/07/13 18:36 回答No.1

がると申します。質問者さんがなさりたいことを「本当にそのまま」やるのであれば、昨今はやりになりつつあります「Ajax」という手法がそれにあたります。ただ、正直まだまだ手法として確立しているとはいいがたく、よほどスキルがなければ、ちと困難な道のりかとは思います。次点としては「あらかじめ全データをHTML内に抱え込む」やり方なのですが。データ量次第では現実的ですが、同じくデータ量次第では非現実的な解法となってしまいます。

質問者

お礼 2006/07/14 10:12

コメントありがとうございます。なるほど。最初にタグを作成する時点で配列を持ってしまうのですね。それは思いつきませんでした。参考にさせて頂きます。

商品コードを入れたら自動で商品名を表示(ASP)