どのボタンがクリックされたのか判別する方法

2008/05/20 16:08

このQ&Aのポイント

初心者です。比較的簡単なデータベース検索システムを作っています。
検索に必要な文字列を入力するテキストフィールドを３つ用意し、各フィールドの横にそれぞれ「検索」ボタンを配置しています。
この検索システムが1つであれば、望むような結果が表示されるのですが、３つにすると思うように結果が出ません。

どのボタンがクリックされたのか判別する方法

初心者です。比較的簡単なデータベース検索システムを作っています。検索に必要な文字列を入力するテキストフィールドを３つ用意し、各フィールドの横にそれぞれ「検索」ボタンを配置しています。１番上のテキストフィールドに文字列が入力され、「検索」ボタンが押されたらtest1.txtの中の該当するデータが１番目のテキストフィールドの下に表示され、２番目のテキストフィールドに文字列が入力され、「検索」ボタンが押されたらtest2.txtの中の該当するデータが２番目のテキストフィールドの下に表示され…、という具合です。この検索システムが1つであれば、望むような結果が表示されるのですが、３つにすると思うように結果が出ません。「どのボタンが押されたか」を判別するか、もしくは「どのファイルが読み込まれたか」をIF文でうまく組み込めばいいのかとも思いますが…。どなたか、教えてください。よろしくお願いします。 <現在のコードです> findText = ""; function loadDataFile(fName) { findText = $("searchText").value; // 検索する文字 new Ajax.Request(fName, { method: 'get', onComplete: displayData }); } function displayData(httpObj) { $("result").innerHTML = parseTabText(httpObj.responseText); } // タブ区切りテキストを解析して一致したデータを表示 function parseTabText(tabText) { var resultText = "<table border='1' cellpadding='5'>"; var LF = String.fromCharCode(10); // 改行コード (LF) var TAB = String.fromCharCode(9); // タブコード var lineData = tabText.split(LF); for (var i=0; i<lineData.length; i++) { var itemData = lineData[i].split(TAB); var str = itemData[0].match(findText); if (str) { resultText += "<tr><td align='left'>"+itemData[0] +"</td><td align='left'>"+itemData[1] +"</td><td align='right'>"+itemData[2]+"</td></tr>"; } } resultText += "</table>"; return resultText; } <body> <h1>test1</h1> <form onSubmit="loadDataFile('test1.txt');return false"> <input type="text" value="" id="searchText"> <input type="button" value="検索" onClick="loadDataFile('test1.txt')"><br> </form> <div id="result"></div> <h1>test2</h1> <form onSubmit="loadDataFile('test2.txt');return false"> <input type="text" value="" id="searchText"> <input type="button" value="検索" onClick="loadDataFile('test2.txt')"><br> </form> <div id="result"></div> <h1>test3</h1> <form onSubmit="loadDataFile('test3.txt');return false"> <input type="text" value="" id="searchText"> <input type="button" value="検索" onClick="loadDataFile('test3.txt')"><br> </form> <div id="result"></div>

noragoro
お礼率64% (11/17)

JavaScript
回答数2
ありがとう数1

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

質問者が選んだベストアンサー

ベストアンサー

auty
ベストアンサー率58% (284/486)

2008/05/20 16:58 回答No.1

・　id属性は、ユニークである必要があります。　　次のようにしてみてはどうでしょうか。 ------------------------------------------------------------ <html> <head> <script type="text/javascript">  </script> </head> <body> <h1> test1 </h1> <form onSubmit="loadDataFile('1');return false"> <input type="text" value="" id="searchText1"> <input type="button" value="検索" onClick="loadDataFile('1')"> <br> </form> <div id="result1"></div> <h1> test2 </h1> <form onSubmit="loadDataFile('2');return false"> <input type="text" value="" id="searchText2"> <input type="button" value="検索" onClick="loadDataFile('2')"> <br> </form> <div id="result2"></div> <h1> test3 </h1> <form onSubmit="loadDataFile('3');return false"> <input type="text" value="" id="searchText3"> <input type="button" value="検索" onClick="loadDataFile('3')"> <br> </form> <div id="result3"></div> </body> </html>

質問者

補足 2008/05/21 13:39

ご回答、ありがとうございます。作成していただきました上記のスクリプトをペーストして動作させてみたところ、「検索」ボタンをクリックしても動作しません。なにぶん、初心者なので、どの箇所を修正すればいいのかもわからず…。すみません。

その他の回答 (1)

auty
ベストアンサー率58% (284/486)

2008/05/21 17:59 回答No.2

・　resultNUM は、変数であり使い方が間違っていました。大変申し訳ありません。 function displayData(httpObj) { $("resultNUM").innerHTML = parseTabText(httpObj.responseText); } ではなく function displayData(httpObj) { $(resultNUM).innerHTML = parseTabText(responseText); } です。・　Ajaxを利用しているので、関数$()も使えるようにはなっていると思います。このソースコードのままでは動きません。・　var str = itemData[0].match(findText); 　　は、タブ区切りの最初のデータからのみ検索しているようですね。・　itemData[1],itemData[2], ... は、括弧を検索文字列に挿入したときに返されますが、現在は何も入っていません。

質問者