こんにちは、ryohei(@ityryohei)です!
jQueryでsubmitする方法をご紹介したいと思います。
jQueryを読み込む
GoogleのCDNを利用してjQueryを読み込みます。
CDNというのはContents Delivery Network(コンテンツ・デリバリー・ネットワーク)の略称で、ネットワークを経由してウェブコンテンツを利用するサービスを指します。ネットワークに接続されている機器であれば利用することができます。
CDNには有料、無料のものがありますが、jQueryのライブラリファイルは無料で利用できます。
jQueryのライブラリは以下の記述で読み込むことができます。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
フォーム外のボタンからsubmit
フォーム外に設置してあるボタンでsubmitします。
デザイン上フォーム内にボタンが設置できないとき等に使用します。
HTML
<form id="form" method="post" action="#"> <input type="text" name="test" value="Hello"> </form> <button id="button" type="submit">送信</button>
JS
<script> $('ここにボタンを指定').click(function() { $('ここにフォームを指定').submit(); }); </script>
フォーム外のアンカーリンクからsubmit
アンカーリンク(aタグ)でsubmitします。
HTML
<form id="form1" method="post" action="#"> <input type="text" name="test1" value="Hello 1"> </form> <a id="button1" href="#">送信</a>
JS
<script> $(function(){ $('ここにaタグを指定').click( function(){ $('ここにフォームを指定').submit(); }); }) </script>
アンカーリンクのリンク先にsubmit
アンカーリンク(aタグ)に記載されているリンク先(href)にサブミットします。
HTML
<form id="form2" method="post" action="#"> <input type="text" name="test1" value="Hello 1"> </form> <a id="button2" href="#">送信</a>
JS
<script> $(function(){ $('ここにaタグを指定').click( function(){ var action = $( this ).attr('href'); $('ここにフォームを指定').attr({"action":action}).submit(); }); }) </script>