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

カワシマ

6年前

状況はこうです

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

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

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

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

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

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

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

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

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

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

本来は、

<form id="actionForm" method="" action="ほんにゃらら">
  <button type="submit"></button>
</form>

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

ステップ１：Formを直す

buttonのtypeをbuttonに設定する

<form id="actionForm" method="" action="ほんにゃらら">
  <!-- type="button"を省略すると、submitされる。ここが超重要です！ -->
  <input name="data" value="" />
  <button type="button" id="myButton"></button>
</form>

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

ここが素敵です！

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

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

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

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

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

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

"use strict";
$(document).ready(function ($) { //ページが完全にロードしたら、実行するように
  $(function () {
    $("#myButton").click(function () { //myButtonがクリックされたら、中のプログラムを実行する
      $.get("http://myweb.com/myapi/", function (data) { //apiからデータを取ってくる
        //console.log("データを取得した: " + data);
        //
        $("#data").val(data.result); //データを自動的に、設定する
        $('#actionForm').submit(); //指定したformのアクションをsubmitする
      });
    })
  })
})

ステップ３：ない、完成

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

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

jQueryをまだ健在です！

まとめ

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

[amazonjs asin=”B00HE4R9H2″ locale=”JP” title=”jQuery入門道場”]

[amazonjs asin=”B06XRSFM6G” locale=”JP” title=”ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング［改訂版］ (Future Coders（NextPublishing）)”]

[amazonjs asin=”4839964688″ locale=”JP” title=”よくわかるPHPの教科書【PHP7対応版】”]