一つのページで二つのFormを別々に使いたい

解決済

質問者：mutsukiame
質問日時：2009/03/24 17:38
回答数：3件

<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"の結果となります。

二つのフォームを別々に動作させるにはどのようにすればよいでしょうか。

通報する

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

質問の本文を隠す

回答 (3件)

No.3ベストアンサー

回答者： taloo
回答日時：2009/03/24 19:20

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には詳しくないので適宜動作するように書き直してください。

- 0
- 件

通報する

この回答へのお礼

有難う御座います！！

１つ目のフォームと２つ目のフォームのidをご指摘どおり変更し、それぞれのonClickをexecute(1)と(2)に変更しました。
そして、
function execute(id) {
// 中略
paramList += "&page=" + $F('page'+id);
とidを追加記述したところ、無事二つのフォームが別々に動作しました。

二日ずっと悩んでいたことが解決しましたこと、大変感謝いたします。

通報する

お礼日時：2009/03/24 20:01

No.2

回答者： fujillin
回答日時：2009/03/24 18:31

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>

補足日時：2009/03/24 19:15

通報する

- 0
- 件

通報する

No.1

回答者： askaaska
回答日時：2009/03/24 17:53

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>