【jQuery】submitを実行する

Image

jQueryでsubmitする方法をご紹介したいと思います。

Demo

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>

SHARE