jQueryで完全にformのsubmitを代行、制御するには?

はてなブックマーク - jQueryで完全にformのsubmitを代行、制御するには?
LINEで送る
Pocket

状況はこうです

あたなは、お客さんに頼まれました。

既存のあるウェブアプリケーションの改修です。

はい、やらない選択肢はないです。笑

もちろん、フレームワークも、言語も何も、選択できません。

既存のものを修正する形で、機能を改変や、追加をします。

プロのあたなは、もちろん、返事2つで、お請けするに違いないです!私がそうでしたから。笑

そうです!jQueryがあればできないことがないんです!笑

今回は、PHPでした、またいい方でしょう?笑

smartyのテンプレートを色々いじることになります。

その中、あるフォームのsubmitの前に、独自のapi (例えば http://myweb.com/myapi/) を叩いて、データを取得して、セットしてから、submitしたいという要件が出てきました。

本来は、

buttonを押せば、そのformが指定したaction(だいたい http/myweb.com/abc.phpのようなもの)が実行されます。

ステップ1:Formを直す

buttonのtypeをbuttonに設定する

そうすることで、formのボタンを押してsubmitが発火することが無くなります、その処理は完全にjQueryに権限移行します。

ここが素敵です!

同じように、ボタンのクリックイベントで、jQueryを呼び出して、バリデーションチェックや、データの加工を行った後、submitを行うというような処理が全部同様に実現できます。

buttonにidを付けます。jQueryで使いますので、ここでは「myButton」にします。

このボタンをクリックすると、自分の処理が先に走って、その結果が戻ったら、submitするという想定です。

ステップ2:jQueryプログラムを作成する

今回は、jQueryプログラムはこちらです。

説明は、コメントで入れますね。

ステップ3:ない、完成

ステップ3は実行ですね!笑

こうやって、submitのタイミングがjQueryが「割り込み」して制御するようになり、自分の処理も挿入して、自分の「好きな」タイミングでsubmitができるようになります!

jQueryをまだ健在です!

まとめ

jQuery素晴らしい、レガシーシステムには最強な武器です!まだ捨てるもんじゃない!!

 

はてなブックマーク - jQueryで完全にformのsubmitを代行、制御するには?
LINEで送る
Pocket

Add a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close