２重送信がエラーを引き起こす、ダメなソース

仕事で引き継がれたソースがダメすぎて、

 

submiで２重送信されると、

 

残念なエラーが表示されるので。

 

サーブレット側でやっておきたいところだが、とりあえず応急処置でJavaScript。

 

・style.visibility　の　none / visible　が要素を消す／要素を出す

・style.display　の　none / inline が非表示／表示

 

onClick="this.disabled = true;"これも考えたが、

 

こいつはsubmitされないので、

 

ぼつ。

（FORMにonsubmit=からでもよかったが、他のチェックもあったので
絶対送信ボタンのonClick=からじゃないと、いやだった。）

 

ただ、送信ボタン要素を消したり、非表示だと見たくれが悪い、、、

 

ということで両方を組み合わせて、送信ボタンの要素を消した代わりに、

 

ダミーボタンを表示させるようにしてみた。

 

JavaScript

function btnHidden() {
    document.getElementById("next").style.display = "none";
    document.getElementById("wait").style.visibility = "visible";
    return true;
}

HTML

<tr id='next'>

     <td align='center'>

          <input type='submit' name='submit' value='次へ' id='next' onClick='return btnHidden()'/>

     </td>
</tr>
<tr id='wait' style='visibility:hidden'>
     <td align='center'>

          <input type='button' name='dummy' value='次へ' /><br />

          <font size='2'>そのままお待ちください・・・</font>

     </td>
</tr>

説明：

次へボタン（submit）押下後、

JavaScriptのbtnHidden()から.style.display = 'none'で、<tr id='next'>ごと要素を消す。

 

元々<tr id='wait' style='visibility:hidden'>で非表示してある、次へボタン（button）とテキストの「そのままお待ちください・・・」をstyle.visibility = 'visible'で表示させる。

 

これで表示している、次へボタンはtype='button'なので、何度押しても機能しない。

 

ただし、一つ<td>要素を消しているので（ボタンが同じ位置にくるように）、

それより下の部分が、一段上に上がってしまう。

許容範囲かな。そこまで気づくまい。