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

こんにちは、Ryohei（@ityryohei）です！

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

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

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

本記事でやりたいこと

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

上記デモでは、フォーム要素内にinputやbuttonといった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でフォーム外から指定したフォームを送信する方法のご紹介でした！