- ベストアンサー
一つのページで二つのFormを別々に使いたい
<body> <form name="fm1"> <input type="hidden" value="1" id="page"> <input type="button" value="送信する" onClick="execute()"> </form> <form name="fm2"> <input type="hidden" value="2" id="page"> <input type="button" value="送信する" onClick="execute()"> </form> <div id="container">content</div> </body> </html> 上記のように同じ関数execute()を実行するのですが、受け渡す値がvalue="1" と value="2"と別々になっています。 素人考えではフォームfm1とfm2とは別々の値(1or2)を渡すと思ったのですが、どちらのボタンを押してもvalue="1"の結果となります。 二つのフォームを別々に動作させるにはどのようにすればよいでしょうか。
- mutsukiame
- お礼率70% (35/50)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
id="page"が２つありますよ。 たとえば、こんな感じではないでしょうか。 １つめのフォーム <input type="hidden" value="1" name="page" id="page1"> ２つめのフォーム <input type="hidden" value="2" name="page" id="page2"> スクリプトの$F('page')の部分も、どちらのフォームの"page"をとるのか、明確に指定する必要があります。 1つめのフォーム <input type="button" value="送信する" onClick="execute(1)"> 2つめのフォーム <input type="button" value="送信する" onClick="execute(2)"> <script> function execute(id) { // 中略 paramList += "&page=" + $F('page'+id); // 後略 未検証です。 prototype.jsには詳しくないので適宜動作するように書き直してください。
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
execute()の内容が提示されていないので、どうなっているのか不明ですが、勝手に想像するところ… function execute(){ document.fm1.submit(); } とか、 documnet.form[0].submit(); みたいになっているだけではないのでしょうか？ もし、他に処理を行っていないのならば、input buttonにしているものを、submitボタンに変えてしまえば、それぞれのformが送信されますし、スクリプトも不要になります。 <input type="submit" value="送信する"> スクリプトで他に処理を行っている場合は、executeの呼び出し側でexecute(this.form)のようにして、formを渡しておいて、 function execute(f){ f.submit(); } みたいにすれば、それぞれのformがsubmitされます。 （他の処理内容が不明なので、↑では省略しています。）
補足
すみません。長くなるので関数部分を省きました。 念のため、全てを記述いたします。 <html> <head> <title>サンプル</title> </head> <script type="text/javascript" src="./prototype.js"></script> <script type="text/javascript"> function execute() { var url = './ItemSearch07.php'; var paramList = "sword=" + encodeURIComponent($F('txtWord')); paramList += "&sort_mode=1"; paramList += "&sort=" + $F('slctSort'); paramList += "&page=" + $F('page'); new Ajax.Request(url, { method: 'get', onSuccess: getData, onFailure: showErrMsg, parameters: paramList }); function getData(data){ var response = data.responseXML.getElementsByTagName('Responce'); var details = response[0].getElementsByTagName('Details'); var TotalItems = parseInt(response[0].getElementsByTagName('TotalItems')[0].firstChild.nodeValue); var TotalPages = parseInt(response[0].getElementsByTagName('TotalPages')[0].firstChild.nodeValue); var tmpHtml = ""; tmpHtml += "<p>総商品数：" + TotalItems + "<br />" tmpHtml += "総ページ数：" + TotalPages + "</p><br />" tmpHtml += "<table><tr>"; for(i = 1; i < TotalPages+1; i++){ //HTML作成 tmpHtml += "<td><form name='" + i + "'><input type='hidden' value='" + i + "' id='page'><input type='button' value='" + i + "' onClick='execute()'></form></td>"; } tmpHtml += "</tr></table>"; for(i = 0; i < details.length; i++){ //値を取得 var ProductName = details[i].getElementsByTagName('ProductName'); var ProductNameValue = ProductName[0].firstChild.nodeValue; var DetailURL = details[i].getElementsByTagName('DetailURL'); var DetailURLNameValue = DetailURL[0].firstChild.nodeValue; var Price = details[i].getElementsByTagName('Price'); var PriceNameValue = Price[0].firstChild.nodeValue; //HTML作成 tmpHtml += "<p>"; tmpHtml += "<a href='" + DetailURLNameValue + "' target='_blank'>" + ProductNameValue + "</a> ：" + PriceNameValue + "円<br />"; tmpHtml += "</p>"; tmpHtml += "<hr />"; } //結果を表示 container.innerHTML = tmpHtml; } function showErrMsg(){ clearDisp(); container.innerHTML = "データを取得できませんでした。<br />\n"; } } </script> <body> <form name="fm1" id="fm1"> <input type="text" id="txtWord" size="30" value="PSP" /> ソート <select id="slctSort"> <option value="0" selected>価格順（昇順）</option> <option value="1">価格順（降順）</option> </select> <input type="hidden" value="1" id="page"> <input type="button" value="送信する" onClick="execute()"> </form> <form name="fm2" id="fm2"> <input type="text" id="txtWord" size="30" value="PSP" /> ソート <select id="slctSort"> <option value="0" selected>価格順（昇順）</option> <option value="1">価格順（降順）</option> </select> <input type="hidden" value="2" id="page"> <input type="button" value="送信する" onClick="execute()"> </form> <div id="container">content</div> </body> </html>
- askaaska
- ベストアンサー率35% (1455/4149)
formは5個でも6個でも設定できるわ。 execute()関数の実装がおかしいために 発生している不具合でしょうね。 そのHTMLだけだと1も2も送信されないわ。
補足
execute()関数ですが、長いのではしょってしまいましたが下記のようなものです。 value="1" or value="2"の値は"page"に反映させているつもりなのですが、ここがおかしい可能性が大きいみたいですね。 <script type="text/javascript" src="./prototype.js"></script> <script type="text/javascript"> function execute() { var url = './ItemSearch07.php'; var paramList = "sword=" + encodeURIComponent($F('txtWord')); paramList += "&sort_mode=1"; paramList += "&sort=" + $F('slctSort'); paramList += "&page=" + $F('page'); new Ajax.Request(url, { method: 'get', onSuccess: getData, onFailure: showErrMsg, parameters: paramList }); function getData(data){ var response = data.responseXML.getElementsByTagName('Responce'); var details = response[0].getElementsByTagName('Details'); var TotalItems = parseInt(response[0].getElementsByTagName('TotalItems')[0].firstChild.nodeValue); var TotalPages = parseInt(response[0].getElementsByTagName('TotalPages')[0].firstChild.nodeValue); var tmpHtml = ""; tmpHtml += "<p>総商品数：" + TotalItems + "<br />" tmpHtml += "総ページ数：" + TotalPages + "</p><br />" tmpHtml += "<table><tr>"; tmpHtml += "</tr></table>"; for(i = 0; i < details.length; i++){ //値を取得 var ProductName = details[i].getElementsByTagName('ProductName'); var ProductNameValue = ProductName[0].firstChild.nodeValue; var DetailURL = details[i].getElementsByTagName('DetailURL'); var DetailURLNameValue = DetailURL[0].firstChild.nodeValue; var Price = details[i].getElementsByTagName('Price'); var PriceNameValue = Price[0].firstChild.nodeValue; //HTML作成 tmpHtml += "<p>"; tmpHtml += "<a href='" + DetailURLNameValue + "' target='_blank'>" + ProductNameValue + "</a> ：" + PriceNameValue + "円<br />"; tmpHtml += "</p>"; tmpHtml += "<hr />"; } //結果を表示 container.innerHTML = tmpHtml; } function showErrMsg(){ clearDisp(); container.innerHTML = "データを取得できませんでした。<br />\n"; } } </script>
お礼
有難う御座います！！ １つ目のフォームと２つ目のフォームのidをご指摘どおり変更し、それぞれのonClickをexecute(1)と(2)に変更しました。 そして、 function execute(id) { // 中略 paramList += "&page=" + $F('page'+id); とidを追加記述したところ、無事二つのフォームが別々に動作しました。 二日ずっと悩んでいたことが解決しましたこと、大変感謝いたします。