formのinputタグのボタンを画像にすると、2重押しトラブル
- (2009-01-08 16:41:43)
-------------------------------
注文のページは自社WEB内に置き、注文ボタンを押した瞬間、外部サイトのショッピングカートを起動し注文データを渡す仕組みになっている。カートに渡すべきデータをセットし、元の注文ページをリセットするメカニズムはJavaScriptで記述されている。
注文ボタンがinputタグのsubmitデフォルトの「送信ボタン」ではデザイン性が悪いので画像に入れ替えてみると、なぜか注文数が2倍に。1個注文で2個、2個注文で4個といった具合で意味が不明だったが、よくよく見ていると動作の仕方が2回submitしているよう???
<form>
<input type=submit>
<input type=button>
<input type=image>
inputのtypeにimageを指定するとその画像を押すとsubmitが発行される模様。これはHTMLの仕様だから変更のしようがない。現状、別ファイルのJavaScriptでsubmitを発行しているので、画像を押すことで2回分のsubmitが出ているとなれば、今回のトラブルの現象が説明できる。別ファイルに記述された関数「xxx()」は下記のいずれかで呼び出す。いずれにしてもxxx()内のsubmitを殺せば2重押しはなくなる。
<form onSubmit=xxx()
<input onClick=xxx()
-------------------------------
オリジナルの環境:
●注文ページ
<form name=shelfForm action="外部ショッピングカート" target=cartwin>
<input onClick=addCart() type=button value=カゴに入れる>
●JavaScript
function addCart() {
・・・カートに渡すべきデータをセット・・・
init();
window.open('about:blank', 'cartwin');
document.shelfForm.submit();
}
function init() {
・・・元ページのリセット・・・
}
-------------------------------
改良点:JavaScriptの関数内でsubmitをコメントアウト
/*
document.shelfForm.submit();
*/