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

解決済

質問者：noragoro
質問日時：2008/05/20 16:08
回答数：2件

初心者です。
比較的簡単なデータベース検索システムを作っています。

検索に必要な文字列を入力するテキストフィールドを３つ用意し、各フィールドの横にそれぞれ「検索」ボタンを配置しています。
１番上のテキストフィールドに文字列が入力され、「検索」ボタンが押されたら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>

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： auty
回答日時：2008/05/20 16:58

・　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

通報する

- 0
- 件

通報する

No.2

回答者： auty
回答日時：2008/05/21 17:59

・　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], ... は、括弧を検索文字列に挿入したときに返されますが、現在は何も入っていません。