スモールビジネスのIT日誌

• (2009-01-08 16:41:43)

formのinputタグのbutton(ボタン)タグをimage画像に変更して送信ボタンの2回押しトラブル(?)発生。意味がわからずはまる。input=imageにはinput=submit機能が含まれる？

-------------------------------

注文のページは自社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();

*/