formのinputタグのボタンを画像にすると、2重押しトラブル
  • (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();

*/






<< ウェブマスターのWebmaster Central< | >ページを開く時、特定フォームにカーソルを自動的に移動 >>
search
layout
admin

[▲page top]