質問のタイトルの通り、商品コードを入力してタブでテキストボックスを
移動するタイミングで商品名を表示させる処理を作りたいと思っています。
ネットで検索した結果、inputのイベントハンドラでonchangeを使えば
いいとこまではわかったのですが、例文では、そこでコールしているのが
alertなどの単純な関数が多く、そこから商品コードを使って商品マスタが
入っているDBに接続して検索をかけるようなソースは見つけることが
出来ませんでした。(例文なんで当たり前ですが・・)
現在作っているシステムでは呼び出されたaspでhtmlに表示させるタグを
作成し(このタイミングでDBへ接続し必要なデータは抽出し、タグと一緒に
編集している)、それを単純にhtmlで表示する仕組みになっています。
なので、一度html(asp)を表示させてしまうと、そこからonchangeで
関数を呼び出しても、DBへの接続や抽出のやり方がわからないのです。
すいません。稚拙な文章で意図がうまく伝わってないかもしれませんが
何かヒントでも構いませんので分かる方がいましたらご教授ください。
A 回答 (7件)
- 最新から表示
- 回答順に表示
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を記述します。
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>
.
何度もコメントいただきありがとうございます。
仰る通り、まだ理解しきれていない部分があると認識してます。
これらのコーディングを参考に、もう少し自力でやってみたいと思います。
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('該当する商品CDはありません!!');</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
%>
.
ソースコードまで載せて頂いて大変ありがとうございます。
参考にし、ソースをこねくりまわして商品名の表示はさせることができました。
出来たのですが・・・・。
商品コードを打つたび(タブ移動するたび)に、ページを書き直すことになり
例えば、うちの商品コード登録は1画面で10行まで入力できるのですが
1行目に商品コードを入れると、その横に商品名1が表示され、今度
2行目に商品コードを入れると、その横に商品名2が表示されるのですが
さきほど入力した商品コード1の情報が消えてしまうのです。
(Javaから値を渡されるたびにaspでhtmlを作り直してしまう)
う~ん、、、何を言ってるのかわかってもらえますでしょうか(^_^;
画面遷移
1.input.asp(ここでhtmlのタグ編集およびDBとの接続)
2.入力画面表示(上記input.aspで編集したhtmlが表示)
3.商品コード入力→タブ移動(onchangeのイベントハンドラでjavaの処理へ移動)
4.javaからaspへ商品コード1とシーケンス番号を渡す
document.location.href = "input.asp?CD=123&SEQNO=1"
5.input.aspが呼ばれ、再度htmlタグ編集をする際に商品コード1が取得
できるので商品名1を表示するようタグ編集。
6.同じ画面より商品コード2を入力。
3~5.の処理をし、商品名2を表示。
ただし商品コード1、商品名1が消える。
No.4
- 回答日時:
隠しインラインフレームを作り、onchangeでそのフレームのロケーションをDBから抽出するASPにします。
渡す時はGETで( http://***.com/***.asp?id=****)とすれば良いと思います。
ASP側では、抽出結果をnameをつけたinputタグにvalueとして書き出します。
インラインフレーム内に結果が書き出されますので、javascriptでvalueを取得して
必要な場所に書き出せば、見た目はAjaxのような無遷移で書き換えが行われます。
実際に業務用のサイトで郵便番号検索などの10万件単位のデータ検索に使用しています。
参考まで・・・
.
おお!実現可能なんですね。
しかしASPプログラミングを完璧に理解している人であれば
大変参考になりそうなんですが、私にはまだそこまでのスキルが
ないためなんとなく・・・参考になりそうです。
でも実際に業務で利用されているのを知り励みになりました。
ありがとうございました。
No.2
- 回答日時:
こんにちは。
JavaScriptのみで実現する場合は、すべてのデータを一度読み込み、
JavaScript上に保持しておく必要があります。
>なので、一度html(asp)を表示させてしまうと、そこからonchangeで
>関数を呼び出しても、DBへの接続や抽出のやり方がわからないのです。
DBに接続して取得する為には一度、サーバに接続が必要な為、どんなに調べても、
考えてみても出てこないのです。
onChangeが呼ばれた時に、入力された商品コードをsubmitして、
商品名を取得して再表示する必要があります。
一度画面が切り替わる、サーバのレスポンスによっては待ちが出る可能性があります。
上記の問題をクリアするのにAjaxという機能を使うと、サーバには接続しますが、
画面の遷移は無いように作ることが可能です。
なんにせよ、入力された都度情報を取得する際は、一度サーバに接続する必要があります。
(すべての情報を最初に読み込めばその限りではありませんが、データ量が膨大ですと実現的では無いですね)
コメントありがとうございます。
1さんの内容と同じ手法になりますかね。
Ajaxというものを知らなかったので今後の勉強の課題にさせて頂きます。
No.1
- 回答日時:
がると申します。
質問者さんがなさりたいことを「本当にそのまま」やるのであれば、昨今はやりになりつつあります「Ajax」という手法がそれにあたります。
ただ、正直まだまだ手法として確立しているとはいいがたく、よほどスキルがなければ、ちと困難な道のりかとは思います。
次点としては「あらかじめ全データをHTML内に抱え込む」やり方なのですが。データ量次第では現実的ですが、同じくデータ量次第では非現実的な解法となってしまいます。
コメントありがとうございます。
なるほど。最初にタグを作成する時点で配列を持ってしまうのですね。
それは思いつきませんでした。参考にさせて頂きます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(データベース) pythonでsqlight勉強中、クエリー結果の利用法教えて下さい 1 2022/04/28 20:38
- その他(プログラミング・Web制作) パイソンでのプログラミングについて 3 2022/08/11 20:31
- Excel(エクセル) エクセルの表について 3 2023/04/14 18:00
- Visual Basic(VBA) EXCEL関数LOOKUPとFILTERについての質問です 1 2022/12/21 05:53
- その他(買い物・ショッピング) JANコードの登録について 1 2022/07/23 14:19
- Excel(エクセル) excelで検索した商品の画像(ネットワーク上の)を表示させたい。 3 2023/06/28 00:32
- Excel(エクセル) PHPプログラムをエクセルに張り付けると検索ボックスがでてくる! 3 2022/05/08 07:10
- Visual Basic(VBA) VBA 税率を判定表する方法を教えて下さい。 10 2022/03/28 11:21
- その他(ビジネス・キャリア) スポット取引とは? 1 2023/04/06 15:23
- Excel(エクセル) VBA でvlookup エラーなどは削除したい 8 2022/12/30 04:03
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ラジオボタンと連動して文字列...
-
VB.NET DateTimeの型について
-
オブジェクト配列
-
セレクトボックスの初期選択状...
-
C言語クイックソートの比較総回...
-
setIntervalの間隔を途中で変更...
-
Jqueryを使って値の合計を簡単...
-
selectboxのoptionタグのvalue...
-
value内に変数を入れたい
-
複数のsubmitボタンで押された...
-
return trueとreturn falseの用...
-
JavaScriptで<select>の<option...
-
複数のselect値で1つも選択され...
-
全てのselect要素をデフォルト...
-
idの振り直しについて
-
html selectの内容を初期値に戻す
-
selectボックスで選択数を制限...
-
jQuery セレクトボックスで選択...
-
フォームのチェックボックスの...
-
ラジオボタンで選択変更
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
value内に変数を入れたい
-
hiddenのvalueの値を変えたい
-
3桁区切りのカンマをつけたい...
-
VB.NET DateTimeの型について
-
複数のsubmitボタンで押された...
-
テキストボックスに入力された...
-
フォーム内容を上から順番にJav...
-
VBAをJavaScriptに変換したいです
-
javascriptでhiddenに二次元配...
-
大量のselect要素のvalueを短い...
-
フォームで入力した値を別のフ...
-
プルダウン選択時、既に入力済...
-
ラジオボタンと連動して文字列...
-
引数に数値、文字列の混在
-
クイズ作成:15個の問題から5個...
-
クリックの度に加算していくには?
-
setIntervalの間隔を途中で変更...
-
Pythonで会員サイトの自動ログ...
-
selectboxのoptionタグのvalue...
-
JavaScriptによる自動計算フォ...
おすすめ情報