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

前へ 次へ
この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>

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

  • ベストアンサー
  • auty
  • ベストアンサー率58% (284/486)
回答No.1

・　id属性は、ユニークである必要があります。 　　次のようにしてみてはどうでしょうか。 ------------------------------------------------------------ <html> <head> <script type="text/javascript"> <!-- var findText = ""; var resultNUM; function loadDataFile(num) { var fName = 'test' + num + '.txt' findText = $("searchText"+num).value; // 検索する文字 resultNUM = "result" + num; new Ajax.Request(fName, {method:"get", onComplete:displayData}); } function displayData(httpObj) { $("resultNUM").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; } //--> </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>

noragoro
質問者

補足

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

その他の回答 (1)

  • auty
  • ベストアンサー率58% (284/486)
回答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], ... は、括弧を検索文字列に挿入したときに返されますが、現在は何も入っていません。

noragoro
質問者

お礼

ありがとうございます！ 無事、解決しました！ このような便利なシステムを作りこんでいくと、いろんなケースが出てきて完成するまでに時間がかかりますね。 JavaScriptも奥深くて迷うことだらけですが、 がんばりたいと思います。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • ボタンクリックでフォーカス移動

    JavaScript超ビギナーなので方法がよくわかりません。 フォームにテキストボックス（配列）４個あり ボタンを押すたびに未記入のテキストボックスにカーソルを移動したいのですが。どのようにしたらいいでしょうか。 <form name="form1" method="post"> <table width="200" border="1"> <tr><td ><input type="submit" name="Submit" value="送信"></td></tr> <tr><td ><input type="text" name="name1"></td></tr> <tr><td><input type="text" name="name1"></td></tr> <tr><td><input type="text" name="name1"></td></tr> <tr><td><input type="text" name="name1"></td></tr> </table> </form>

  • JavaScriptでIE上のボタンクリック

    JavaScriptの初心者でIE上で表示されたボタンをクリックしたいのですが、2つのボタンのうち1つをクリックしたいです。 「document.all("Buttonok").click();」,「document.getElementById("Buttonok").click();」と記入してみたのですが、エラーとなります。 下記のようなボタンをJavaScriptで押すにはどうしたらいいのでしょうか？ どなたかすいませんがご教授ください。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ボタンのHTML ※formで囲まれてないです。 <table border="0" cellspacing="0" cellpadding="0" width="150"> <tr> <td width="50%"> <div id="Button"> <input type="buttonok" value="OK" class="Button" onclick="onClk("1");" /> </div> <div id="Button"> <input type="buttonng" value="NG" class="Button" onclick="onClk("0");" /> </div> </td> </tr> </table>

  • formの中で別のactionをもったsubmitボタンの設置。

    formの中で別のactionをもったsubmitボタンの設置。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <title>sample</title> <script language="JavaScript" type="text/javascript"> <!-- //＜クリックした時に実行される関数＞ //*** 送信画面 function func1(form){ document.form1.text.value =form.text.value; document.form1.file.value =form.file.value; document.form1.dummy.value =form.dummy.value; document.form1.submit(); } //*** ユーザー追加画面 function func2(form){ document.form2.text.value =form.text.value; document.form2.file.value =form.file.value; document.form2.dummy.value =form.dummy.value; document.form2.submit(); } //--> </script> </head> <body class="index"> <form enctype="multipart/form-data"> <table id="table" width="100%"> <tr><th width="10%">テキスト</th><td><input type="text" name="text"> <br /> <div style="text-align:left;"> <input type="button" onClick="func2(this.form)" value="テキスト確認"> </div> </td></tr> <tr><th width="10%">添付</th><td><input type="file" name="file"></td></tr> </table> <div style="text-align:left;"> <input type="button" onClick="func1(this.form)" value="確認"> </div> </form> <!-- sousin.php画面へ --> <form method="post" name="form1" action="sousin.php" enctype="multipart/form-data"> <input type="hidden" name="text"> <input type="hidden" name="file"> <input type="hidden" name="dummy"> </form> <!--- text.php画面へ ---> <form method="post" name="form2" action="text.php" enctype="multipart/form-data"> <input type="hidden" name="text"> <input type="hidden" name="file"> <input type="hidden" name="dummy"> </form> </body> </html> 上記のように記述し、フォームの中に別のactionをもったsubmitボタンを設置しました。 textの内容は渡せるのですが、添付したいファイルを渡すことができません。 添付ファイルも渡せるようにするにはどうすればよいのでしょうか

    • ベストアンサー
    • HTML
  • 同一nameの　input type="text" の合計を計算したい

    初めて質問させて頂きます。 form 内で同じname名を付けられたテキストフィールドの値の合計を計算し、その値に定数を乗じた値を表示させたいのですが、出来ずに困っております。 name名を別にすれば簡単に出来そうなのですが、このinputが別CGIからの受け取りの関係で数が不定で同一nameが付いてしまいます。（inputは1個以上で上限は無し） CGI側を書き換える事は自分の技術的に不可能なので、このような質問となりました。 以下は自分なりに試行錯誤の末の拙いソースです。 どなたかお分かりになる方、ご教授を宜しくお願い致します。 <html> <head> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> <!-- function kakunin() { var sub = Form.getInputs('form1', 'text'); （ var subtotal = ～～～;　ここに上で得た数字を合計するみたいなものがくるのかなと・・・） var total = subtotal * 200; document.form1.field_total.value = total; // 合計を表示 } // --> </script> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body> <form action="" name="form1"> <table> <tr><td><input name="kazu" type="text" value="2"></td></tr> <tr><td><input name="kazu" type="text" value="1"></td></tr> <tr><td><input name="kazu" type="text" value="3"></td></tr> <tr><td>・・・増えたりします・・・</td></tr> <tr><td><input type="button" size="8" onclick="kakunin()" value="合計を確認"></td></tr> <tr><td><input type="text" name="field_total" size="30" value="total"></td></tr> </table> </form> </body> </html>

  • input type="file"のvalue監視

    input="file"のvalue値が変更されたら別のテキストフィールドに表示するというScriptを書いたのですが動作してくれません。 input="file"ではなく普通のテキストフィールドならば動作します。 fileフィールドでは動作しないのでしょうか。それとも書き方がまずいのでしょうか。 以下、ソースです。 <html> <head> <title>test</title> <script type="text/javascript" src="/javascript/prototype.js"></script> </head> <body> <form action="" enctype="multipart/form-data" method="post"> <input id="file_test" name="file_test" type="file"> <br> <div id="result">表示</div> <script type="text/javascript"><!-- window.onload = function() { new Form.Element.Observer('file_test', 1, function(element, value) { document.getElementById('result').innerHTML = value; }); } //--></script> </form> </body> </html> よろしくお願いします。

  • ラジオボタンを他の物に変えても動作するようにしたい

    ラジオボタンでチェックされた項目に合わせて用意されている文章が表示されるものです。 そのラジオボタンを<button>や<img>に変えることは可能なのでしょうか。 <!--メニュー--> <div> <form method="get" name="updateHTML"> <input type="radio" name="imageSize" value="00" onclick="return toggle();" checked /> No.01<br /> <input type="radio" name="imageSize" value="01" onclick="return toggle();" /> No.02<br /> <input type="radio" name="imageSize" value="02" onclick="return toggle();" /> No.03<br /> </form> </div> <!--表示文--> <div id="html-00" style="display:inline;"> テキスト０１ </div> <div id="html-01" style="display:none;"> テキスト０２ </div> <div id="html-02" style="display:none;"> テキスト０３ </div> <!--スクリプト--> <script type="text/javascript"> var options = new Array('00','01','02'); function toggle() { var form = document.forms['updateHTML']; var size = _getOption( form.imageSize ); var chosen = size; for ( var i = 0; i < options.length; i++ ) { var htmlId = 'html-'+ options[i]; var html = document.getElementById( htmlId ); if ( (html == null) ) { continue; } if ( options[i] == chosen ) { html.style.display = 'inline'; } else { html.style.display = 'none'; } } return true; } function _getOption(radioObj) { for ( counter = 0; counter < radioObj.length; counter++) { if ( radioObj[counter].checked ) val = radioObj[counter].value; } radioObj.value = val; return val; } </script>

  • 計算結果の表示方法を教えてください。

    javascriptでのプログラム作成がはじめてで 下記のようにINPUTへの計算結果を表示はできましたが、 INPUTを使用せず消費税を表示する方法を教えてください。 yahooかんたん決済の（運賃を入力すると合計が表示）様な 計算結果の表示方法を教えてください。 おそらく<SPAN>を使って表示していると思うのですがわかりません。 宜しくお願いします。 【省略】 <script type="text/javascript"> function keisan(){ 　　var syouhizei = document.form1.syouhin1.value * 0.05; document.form1.field1.value = syouhizei; } </script> 【省略】 <tr> <td>商品サンプル1</td> <td align="right">500円</td> <td><INPUT type="text" name="syouhin1" size="8" onkeyup="keisan()"></td> <td><input type="text" name="field1" size="8" value="0"> 円</td> </tr>

  • 半角英数字の判別

    お世話になります テキストフィールドにおいて半角英数字のチェックをしたいのですが・・・ 例えば『012ab』のような場合、 <script Language="JavaScript"> <!-- function checkText() { txt = document.myFORM.moto.value; if (txt.match(/[^a-z|^A-Z]/g)) alert("アルファベット以外が含まれてます"); } //--> </script> <form name="myFORM"> <input type="text" name="moto"> <input type="button" value="調べる" onClick="checkText()"> </form> では数字が入力されてるとalertされます function checkNum() { txt = document.myFORM.moto.value; for (i=0; i<txt.length; i++) { c = txt.charAt(i); if ("0123456789".indexOf(c,0) < 0) { alert("数値以外が含まれてます"); return; } } } //--> </script> <form name="myFORM"> <input type="text" name="moto"> <input type="button" value="調べる" onClick="checkNum()"> </form> ではアルファベットがあるとalertされてしまいます この2つをどのように組み合わせれば半角英数字以外であればalertされるようになるのでしょうか？

  • <form>タグに２つのボタン

    <form>タグで２つのボタンを表示させ、以下のようにそれぞれのボタンで フィールドに別の値を入れて送信させることはできますでしょうか？ できればHTMLで、できなければJavaScriptでできますでしょうか？ ・button1を押したときは 　フィールド「CASE」に1を入れて送信、 　HTMLで書くと、<input type="hideen" name="CASE" value="1"> ・button2を押したときは 　フィールド「CASE」に2を入れて送信、 　HTMLで書くと、<input type="hideen" name="CASE" value="2"> ===== HTML ====================== <form action="test.cgi" method="post"> <input type="text" name="text1"> <input type="submit" value="button1"> <input type="submit" value="button2"> </form> 宜しくお願いします。

    • ベストアンサー
    • HTML
  • insertRowメソッド内で計算式を書く方法

    http://jsajax.com/Articles/TableInsertRow/157を参考に、[行を挿入]ボタンをクリックすると最終行の下に行が追加され、その中にテキストボックスを配置し計算を行うようにしたいと思い、下記のソースを記述しました。 そして追加した行で正常に計算を行うために、insertRow内のinnerHTMLのgoods_a_3の3の部分を動的に設定したり、calc内の計算式を動的にループさせる必要があると思ったのですが、どのように記述すれば良いか分からなかったため、アドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 <script type="text/javascript"> <!-- window.onload = function() { document.getElementById("btnInsert").onclick = insertRow; } function insertRow() { var tbl = document.getElementById("Table1"); var row = tbl.insertRow(2); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); cell1.innerHTML = "<input type=\"text\" name=\"goods_a_3\" size=\"3\" value=\"0\" onchange=\"calc();\" />*"; cell2.innerHTML = "<input type=\"text\" name=\"goods_b_3\" size=\"3\" value=\"0\" onchange=\"calc();\" />="; cell3.innerHTML = "<input type=\"text\" name=\"ans3\" size=\"8\" value=\"0\" disabled=\"disabled\" />"; } function calc(){ document.form1.ans1.value = document.form1.goods_a_1.value * document.form1.goods_b_1.value; document.form1.ans2.value = document.form1.goods_a_2.value * document.form1.goods_b_2.value; } // --> </script> </head> <body> <form action="#" name="form1" id="form1"> <table id="Table1" border="1"> <tr> <td><input type="text" name="goods_a_1" size="3" value="0" onchange="calc();" />*</td> <td><input type="text" name="goods_b_1" size="3" value="0" onchange="calc();" />=</td> <td><input type="text" name="ans1" size="8" value="0" disabled="disabled" /></td> </tr> <tr> <td><input type="text" name="goods_a_2" size="3" value="0" onchange="calc();" />*</td> <td><input type="text" name="goods_b_2" size="3" value="0" onchange="calc();" />=</td> <td><input type="text" name="ans2" size="8" value="0" disabled="disabled" /></td> </tr> </table> </form> <br /> <input id="btnInsert" type="button" value="行を挿入" /> 以上、よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する