【jQuery】【submit】フォーム外から指定したフォームを送信する

こんにちは、ryohei(@ityryohei)です!

本記事では、jQueryでフォーム外から指定したフォームを送信する方法をご紹介しています。

jQueryでフォーム外から指定したフォームを送信したいな。良い方法ないかな?

上記の疑問にお答えします。

では、解説していきます。

本記事でやりたいこと

フォーム外の要素をクリックした際に、jQueryで指定したフォームの送信することが目的です。少しわかりにくいですが、動作確認用にデモを用意しましたので、ご確認ください。

上記デモでは、フォーム要素内にinputbuttonといったsubmitを実行する要素は設置していません。すべてフォーム外からのイベントによって、jQueryで送信処理を実行しています。

上記デモで本記事のやりたいことは実現できますので、デモの内容を参考に解説を進めていきたいと思います。

jQueryを読み込む

jQuery本体のファイルをCDNで読み込みます。CDNはContents Delivery Network(コンテンツ・デリバリー・ネットワーク)の頭文字を取ったもので、ネットワーク経由してリソースを利用することを指します。CDNには有料、無料のものがありますが、jQueryの本体ファイルは無料で利用できます。

jQueryの本体ファイルは下記で読み込むことができます。

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

以上でjQueryの準備は完了です。上記スクリプトタグをhtmlファイルに追加することでjQueryが使えるようになります。

フォーム外のボタンから指定したフォームをsubmitする

フォーム外に設置したボタンから、指定したフォームをsubmitします。デザイン上フォーム内にボタンが設置できないときに有効な方法です。

HTML

<form id="form" method="post" action="#">
  <input type="text" name="test" value="Hello">
</form>
<button id="button" type="submit">送信</button>

jQuery

$('#button').on('click', ()=>{
    $('#form').submit();
});

フォーム外のaタグから指定したフォームをsubmitする

フォーム外のaタグから指定したフォームをsubmitします。aタグとフォームを関連付けたいときに有効な方法です。

HTML

<form id="form1" method="post" action="#">
  <input type="text" name="test1" value="Hello 1">
</form>
<a id="button1" href="#">送信</a>

jQuery

$('#button1').on('click', ()=>{
    $('#form1').submit();
});

aタグのリンク先にsubmitする

aタグのhref属性に指定されているリンク先に対してsubmitします。外部からフォームの送信先を調整したいときに有効な方法です。

HTML

<form id="form2" method="post" action="#">
  <input type="text" name="test1" value="Hello 1">
</form>
<a id="button2" href="#">送信</a>

jQuery

$('#button2').on('click', ()=>{
    let action = $( this ).attr('href');
    $('#form2').attr({action:action}).submit();
});

これでいくつかのパターンでフォーム外から指定したフォームを送信することができました。

最後に

jQueryを使えば短い構文を記述するだけで、JavaScriptのメソッドを簡単に呼び出して実行することができます。submitの他にもたくさんのメソッドが用意されていますので、色々使ってみてjQueryで遊んでみてくださいね。

以上、jQueryのsubmitでフォーム外から指定したフォームを送信する方法のご紹介でした!

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら