1つのフォーム内の複数のボタンをJavaScriptで区別するには?

[上に] [前に] [次に]
ます [E-Mail] 2000/01/12(水) 19:56:09
いつもとても助かっています。また質問させてください。

IE/NN で、以下のようなことをやりたいと思っています。

1. 1つのフォーム内に submit と image のボタンがある
2. それぞれのボタン押下時に、別々のJavaScript を
   キックする。

ご存知の方がいらっしゃいましたら、教えてください。
よろしくお願いします。
以下のように書いてみたのですが(submit のときには何も
しない場合)、image のときにもJavaScriptが呼ばれていないようです。

<form method="post" name="select_pay" action="aaa.cgi">
・・・・
<input type="submit" name="shop">
<input type="image" name="next" src="next.gif" onClick()="return CheckColum(this)">
</form>

じゅーさーみきさー 2000/01/12(水) 21:04:47
全然的がはずれていたら、済みません。
<script>
function CheckColumnn(tf){
   ほにゃらか
}
</script>
なんていうものは、書いてありますか?
私も同様の処理してますけど、(あっ、CGIは使ってない・・・)
行けると思いますよ。
actionを動作させたいなら、scriptの中で書いてみてはどうでしょうか?
<input type="submit" name="shop" onClick="return Checkcolum1(this);">
<input type="image" name="next" src="next.gif" onClick="return CheckColum2(this);">
とか。

shin' 2000/01/13(木) 00:35:42
もし、
<input type="image" … onClick="return CheckColumn2(this);">
が動作しないのであれば、
<a href="javascript:CheckColumn2(this)><img src="next.gif" border=0></a>
にしたらどうでしょう?
これで動かないときは、CheckColumn2という関数が<HEAD>部で定義されていない
ということになると思います。

ます [E-Mail] 2000/01/13(木) 20:23:38
じゅーさーみきさー さん、shin' さん、
ご意見ありがとうございます。
説明が十分でなかったため、意図が伝わりにくかったようですね。
すみません。

やりたかったことは、
・それぞれのボタンでは違うJavaScript 関数を呼びたい
・JavaScriptの実行後は、CGIを呼びたい
ということでした。

引き続き、ご意見をうかがいたいと思います。
よろしくお願いします。

shin' 2000/01/14(金) 00:33:04
てっとりばやい方法は2つのボタンを別々の<form>タグに
することだと思います。で、別々にaction属性を記述してやれば
べつべつのCGIも呼べます。
ボタンは<input type="submit">と記述することにすれば、
<form>にonSubmitイベントというのが使えますのでそれを使えば
JavaScriptが呼べます。
そのさいは、<form onSubmit="return valueCheck();">のように
returnを忘れずに書いて、valueCheck()の戻り値をtrueにすれば、
formはsubmitされますし、falseであればsubmitされません。
ヒントになれば幸いです。

ます [E-Mail] 2000/01/14(金) 13:41:13
[[解決]]
shin' さん、ご意見ありがとうございます。
残念ながら、両方のボタンで同じ情報を共有したいので、
FORM を別にすることはできないのです。

しかし、shin' さんの2度のご提案をマージして、以下のような
方法でやりたいことを実現することができました。

・<a href="javascript:CheckValue(this)><img src="next.gif" border=0></a>
  を使用する。
・CheckValue() の中で、別関数(元々呼びたかったJavaScript)を
  呼び出し、結果が true ならば、form.submit を実行する

どうもありがとうございました。
ちなみに、以下のようなソースになりました。
--------------------------------------------------------------------
※CheckColum 関数は別途定義してあります。

<SCRIPT LANGUAGE="javascript">
    function CheckValue()
    {
       if(CheckColum(document.form1) == true)
       {
           document.form1.submit();
       }
    }
</SCRIPT>

<form action="aaa.cgi" name="form1">
<input type="submit" name="shop">

<SCRIPT LANGUAGE="javascript">
<!--
    document.write("<a href=\"javascript:CheckValue(this)\"><img src=\"next.gif\" border=\"0\"></a>");
//-->
</SCRIPT>
<NOSCRIPT>
   <input type="image" src="next.gif" border="0">
</NOSCRIPT>
--------------------------------------------------------------------

shin' 2000/01/14(金) 14:33:54
>document.write("<a href=\"javascript:CheckValue(this)\"><img src=\"next.gif\" border=\"0\"></a>");

解決してしまいましたが、↑をdocument.writeにするのは、
<noscript>を有効にするためですか?
thisというキーワードを懸念してらっしゃるのかもしれませんが、
Aタグ飛び先の指定でjavascript:があれば以下JavaScriptですから、
直にHTMLを書いてもよいんじゃないかな、と思います。
(いま実験したわけじゃないですか、そうだったはずです)

[上に] [前に] [次に]