PCがあれば何でもできる!

へっぽこアラサープログラマーが、覚えたての知識を得意げにお届けします

【jQuery】Formの2重投稿を防ぐ方法(submitボタンが2つ以上ある場合)

time 2015/05/09

【jQuery】Formの2重投稿を防ぐ方法(submitボタンが2つ以上ある場合)

Formの2重投稿はサーバ側でも防止するべきですが、UIを考えるとフロント側でも防止出来たほうが嬉しいですよね。

まず、submitボタンが1つの場合によくあるのは、submitボタンにdisableをかける方法。

例えばこんな感じ。


cssメソッドでopacityをかけたり、pointer-eventsを切ったりすると、見た目も無効っぽくなります。

ただ、この方法だと2つ以上submitボタンが有る場合に問題が出てきます。

一般的にはsubmitボタンに別々のvalue属性を付けることで、submit時に押したボタンのvalueが送信されるため、どちらのボタンを押したかをサーバ側で判別できます。
しかし、submitボタンにdisabledをかけてしまうと、submit時に押したボタンのvalueが送信されません^^;

そこで、disabledをかけるのをやめ、submitイベント側で2回目以降はsubmitを中断させることで対応。


他にいい方法あれば教えて下さい!

sponsored link

down

コメントする




プロフィール

土斐崎 将範

土斐崎 将範

フリーランス/エンジニア (主にサーバサイド、その他広く浅く) 自宅の作業場は冷蔵庫の隣。 キッチンエンジニアとして日々精進しています。



sponsored link