matun55回答ポイント 90pt

ローンのシュミレーションページを作成してます。

「計算する」のボタンを画像にしたいと考えています。

↓以下の書き方ですとうまく動作するのですが、
<input type="button" value="　計　算　" onClick="calc(this.form)" name="button">

↓このように画像のボタンにしてみたのですが、うまく動作しません。
<input type="image" src="*****.PNG" border="0" alt="計算" onClick="calc(this.form)" name="button">

どのようにすれば、動作するのでしょうか？
正しい書き方を教えてください。

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ログインして回答する

みんなの回答

Mook2008/07/02 01:11:32
満足33pt

input の type=image は submit を兼ねた動作になるため、onClick だけではうまくいきません。

下記にもありますが、input にこだわる必要がなければ、img の onClick アクションを

使用してはどうでしょうか。

どうしても input を使用する際は、form の submit 側で対応が必要です。

http://support.microsoft.com/kb/822276/ja

http://oshiete1.goo.ne.jp/kotaeru.php3?q=2085855

http://oshiete1.goo.ne.jp/qa2846891.html?ans_count_asc=1

スター
- matun55 2008/07/02 02:12:42
  
  【通常のボタン】これはうまく動作します。
  
  <input type="button" value="　計　算　" onClick="calc(this.form)" name="button">
  
  <input type="reset" value="　リセット　" onClick="ClearIP(this.form)" name="reset">
  
  imgのonClick アクションを使用してみたのですが、そうすると「リセットボタン」がうまく動作しなくなりました。
  
  また、FFでカーソルが指の形になりません。（style="cursor:hand;"）が通用しません。
  
  【imgのonClick アクション↓】
  
  FFでのカーソルの指の形は妥協できますが、
  
  リセットボタンはどのようにしたら宜しいのでしょうか？
  
  大変お手数をおかけしますが、よろしくお願いします。

lame-delegate2008/07/02 09:15:56
満足14pt

image タイプのinput でなくても、同じ見た目でいいというならCSSを使えばいいのではないでしょうか。

submit以外のなんにでも使うことができるので便利ですよ。

スター

matun55 2008/07/02 11:04:59

それでは、以下と同じで、うまく動作しません。

<input type="image" src="*****.PNG" border="0" alt="計算" onClick="calc(this.form)" name="button">

hirotow2008/07/02 16:15:00
満足10pt

素直に、

のようにしてはどうでしょうか？

スター

matun55 2008/07/02 20:15:33

<input type="image"と同様、動作しません。</p>

kebo9876542008/07/02 16:27:58
満足33pt

ボタンの画像にonclickを指定しても私のIE,FFでは正常に動きましたよ。

（カーソルの形はstyle="cursor:pointer"で解決）

＜img src="*.png" alt="計算" onclick="calc(this.form)" name="button" style="cursor:pointer"＞

もしかするとリセットボタンが動かなくなるのはClearIP関数の問題に起因するのではないでしょうか。

普通に入力されたフォームの内容をデフォルトに戻すのであればtype="reset"だけで動作しますから、以下のようなコードではダメですか？

＜?xml version="1.0" encoding="Shift_JIS"?＞

＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞

＜html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"＞

＜head＞

＜meta http-equiv="content-type" content="text/html; charset=Shift_JIS" /＞

＜meta http-equiv="content-script-type" content="text/javascript" /＞

＜meta http-equiv="content-style-type" content="text/css" /＞

＜title＞ローンのシュミレーション＜/title＞

＜/head＞

＜body＞

＜form action="example.cgi" method="post" name="form"＞

＜input type="text" value="" name="text1" /＞＜br /＞

＜img src="***.png" alt="計算" onclick="calc(this.form)" style="cursor:pointer" name="button" /＞＜input type="reset" value="　リセット　" /＞

＜/form＞

＜/body＞

＜/html＞

スター

matun55 2008/07/02 20:16:55

計算で、img

リセットで、input

とすれば動作するのはわかっておりますが、出来れば統一したい考えで困ってます。

でも、別で動作すればいいのかな。って思うようになりました。

ありがとうございます。

その他の回答を読む

この質問へのコメント

Mook2008/07/02 12:47:20

なかなか推測だけでは原因がわかりません。
関係する部分のコードを開示できませんか。

ローンのシュミレーションページを作成してます。

みんなの回答