こんにちは、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でフォーム外から指定したフォームを送信する方法のご紹介でした!

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。