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

状況はこうです

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

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

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

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

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

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

そうです!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のようなもの)が実行されます。

目次

ステップ1: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:ない、完成

ステップ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対応版】”]

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