【2021/9/18】登録不要の見積書作成ツール
「SPEEC」を公開しました!

【jQuery】submitを実行する

こんにちは、ryohei(@ityryohei)です!

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>

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍