目次
本記事では、jQueryでフォーム外から指定したフォームを送信する方法をご紹介しています。
jQueryでフォーム外から指定したフォームを送信したいな。良い方法ないかな？
上記の疑問にお答えします。
では、解説していきます。
スポンサーリンク
本記事でやりたいこと
フォーム外の要素をクリックした際に、jQueryで指定したフォームの送信することが目的です。少しわかりにくいですが、動作確認用にデモを用意しましたので、ご確認ください。
上記デモでは、フォーム要素内にinputやbuttonといったsubmitを実行する要素は設置していません。すべてフォーム外からのイベントによって、jQueryで送信処理を実行しています。
上記デモで本記事のやりたいことは実現できますので、デモの内容を参考に解説を進めていきたいと思います。
jQueryを読み込む
jQuery本体のファイルをで読み込みます。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でフォーム外から指定したフォームを送信する方法のご紹介でした！
