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

締切済

質問者：septem9
質問日時：2006/07/13 18:26
回答数：7件

質問のタイトルの通り、商品コードを入力してタブでテキストボックスを
移動するタイミングで商品名を表示させる処理を作りたいと思っています。

ネットで検索した結果、inputのイベントハンドラでonchangeを使えば
いいとこまではわかったのですが、例文では、そこでコールしているのが
alertなどの単純な関数が多く、そこから商品コードを使って商品マスタが
入っているＤＢに接続して検索をかけるようなソースは見つけることが
出来ませんでした。（例文なんで当たり前ですが・・）

現在作っているシステムでは呼び出されたaspでhtmlに表示させるタグを
作成し（このタイミングでDBへ接続し必要なデータは抽出し、タグと一緒に
編集している）、それを単純にhtmlで表示する仕組みになっています。

なので、一度html(asp）を表示させてしまうと、そこからonchangeで
関数を呼び出しても、DBへの接続や抽出のやり方がわからないのです。

すいません。稚拙な文章で意図がうまく伝わってないかもしれませんが
何かヒントでも構いませんので分かる方がいましたらご教授ください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (7件)

最新から表示
回答順に表示

No.7

回答者： arenani_sorenani
回答日時：2006/07/14 21:12

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を記述します。

- 0
- 件

通報する

No.6

回答者： arenani_sorenani
回答日時：2006/07/14 18:43

当初のご質問の「商品コードを入れたら自動で商品名を表示(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>

.

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2006/07/18 12:58

No.5

回答者： arenani_sorenani
回答日時：2006/07/14 11:56

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
%>

.

- 0
- 件

通報する

この回答へのお礼

ソースコードまで載せて頂いて大変ありがとうございます。
参考にし、ソースをこねくりまわして商品名の表示はさせることができました。
出来たのですが・・・・。

商品コードを打つたび（タブ移動するたび）に、ページを書き直すことになり
例えば、うちの商品コード登録は１画面で１０行まで入力できるのですが
１行目に商品コードを入れると、その横に商品名１が表示され、今度
２行目に商品コードを入れると、その横に商品名２が表示されるのですが
さきほど入力した商品コード１の情報が消えてしまうのです。
（Ｊａｖａから値を渡されるたびにａｓｐでｈｔｍｌを作り直してしまう）

う～ん、、、何を言ってるのかわかってもらえますでしょうか(^_^;

画面遷移
１．input.asp(ここでhtmlのタグ編集およびDBとの接続）
２．入力画面表示（上記input.aspで編集したhtmlが表示）
３．商品コード入力→タブ移動（onchangeのイベントハンドラでjavaの処理へ移動）
４．javaからａｓｐへ商品コード１とシーケンス番号を渡す
　　document.location.href = "input.asp?CD=123&SEQNO=1"
５．input.aspが呼ばれ、再度htmlタグ編集をする際に商品コード１が取得
　　できるので商品名１を表示するようタグ編集。
６．同じ画面より商品コード２を入力。
　　３～５．の処理をし、商品名２を表示。
　　ただし商品コード１、商品名１が消える。
　　

通報する

お礼日時：2006/07/14 16:40

No.4

回答者： arenani_sorenani
回答日時：2006/07/13 22:23

隠しインラインフレームを作り、onchangeでそのフレームのロケーションをDBから抽出するASPにします。

渡す時はGETで( http://***.com/***.asp？id=****)とすれば良いと思います。
ASP側では、抽出結果をnameをつけたinputタグにvalueとして書き出します。
インラインフレーム内に結果が書き出されますので、javascriptでvalueを取得して
必要な場所に書き出せば、見た目はAjaxのような無遷移で書き換えが行われます。

実際に業務用のサイトで郵便番号検索などの10万件単位のデータ検索に使用しています。

参考まで・・・

.

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2006/07/14 10:40

No.3

回答者： LancerVII
回答日時：2006/07/13 18:48

こんにちは。

No2です。

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

ですね。すいません。

- 0
- 件

通報する

No.2

回答者： LancerVII
回答日時：2006/07/13 18:41

こんにちは。

JavaScriptのみで実現する場合は、すべてのデータを一度読み込み、
JavaScript上に保持しておく必要があります。

>なので、一度html(asp）を表示させてしまうと、そこからonchangeで
>関数を呼び出しても、DBへの接続や抽出のやり方がわからないのです。

DBに接続して取得する為には一度、サーバに接続が必要な為、どんなに調べても、
考えてみても出てこないのです。

onChangeが呼ばれた時に、入力された商品コードをsubmitして、
商品名を取得して再表示する必要があります。
一度画面が切り替わる、サーバのレスポンスによっては待ちが出る可能性があります。
上記の問題をクリアするのにAjaxという機能を使うと、サーバには接続しますが、
画面の遷移は無いように作ることが可能です。

なんにせよ、入力された都度情報を取得する際は、一度サーバに接続する必要があります。
（すべての情報を最初に読み込めばその限りではありませんが、データ量が膨大ですと実現的では無いですね）

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2006/07/14 10:14

No.1

回答者： galluda
回答日時：2006/07/13 18:36

がると申します。

質問者さんがなさりたいことを「本当にそのまま」やるのであれば、昨今はやりになりつつあります「Ajax」という手法がそれにあたります。
ただ、正直まだまだ手法として確立しているとはいいがたく、よほどスキルがなければ、ちと困難な道のりかとは思います。

次点としては「あらかじめ全データをHTML内に抱え込む」やり方なのですが。データ量次第では現実的ですが、同じくデータ量次第では非現実的な解法となってしまいます。