【jQuery入門】submitの送信処理、action ・ボタン操作まとめ!

【jQuery入門】submitの送信処理、action ・ボタン操作まとめ!

こんにちは、ライターのマサトです!

今回は、Form要素の送信(submit)処理をjQueryから操作できる「submit()」メソッドについて学習をしていきましょう!

この記事では、

・「submit()」とは?
・submit()の使い方

という基本的な内容から、

・Formのactionを変更する
・submit()のキャンセル
・submit()を引数なしで使う

などの応用的な使い方に関しても解説していきます。

この記事で、「submit()」をしっかり学習して自分のスキルアップを目指しましょう!

「submit()」とは?

それでは、まず最初に「submit()」メソッドの基本的な知識から学んでいきましょう!

「submit()」は、jQuery側でFormの送信(submit)処理をプログラムすることができるメソッドになります。

例えば、以下に簡単なForm要素を用意したので見てください。

<form>
    <input type="text">

    <input type="submit" value="送信">
</form>

Form要素の中にあるinputタグのtypeが「submit」になっているボタンがあることに注目してください。

この時に「submit()」メソッドを使うと、ユーザーが送信ボタンをクリックした際に実行する処理を記述できるのです。

例えば、Formの内容をサーバーへ送信する前に正しい入力がされているかを確認するような処理も実行できるわけです。

本記事では、「submit()」の基本的な使い方から応用技までまとめて学習できるように構成しているので、ぜひ参考にしてみてください!

submit()の使い方

ここからは、subtmi()メソッドを使って実際のプログラミング手法を学んでいきましょう!

submit()の基本的な書き方や具体的なイベント処理の記述方法を解説していきます。

submit()の書き方

まず最初に、submit()の基本的な書き方について見ていきましょう!

一般的な記述としては、【 $(Form要素).submit( 実行する処理 ) 】のように引数へ送信時に実行したい処理を記述します。

例えば、次のサンプル例を見てください!

<body>
<form>
    <input type="text">
    <input type="submit" value="送信">
</form>

<script>
    $('form').submit( 実行したい処理 );
</script>
</body>

この例では、簡単なForm要素を配置しており「$(‘form’)」と記述することで対象要素をFormに指定しています。

そして、このFormに対してsubmit()を実行しているのが分かりますね。

あとは、submit()の引数に実行させたい処理を記述するわけですが、一般的には関数(function)を設定します。

functionでイベント処理を設定する方法

それでは、submit()の引数に実行させたい関数(function)を設定してみましょう!

最も簡単な方法としては「無名関数」としてそのまま引数に関数を指定する方法です。

次のサンプル例を見てください!

$('form').submit(function() {

    console.log('送信しました!');

});

この例では、Form要素を対象にして引数に関数が設定されたsubmit()を実行しています。

この場合はユーザーがFormの「送信ボタン」をクリックしたタイミングでコンソールログに文字列が出力されます。

また、無名関数ではなく通常の関数のように別の場所で作成したfunctionを実行することも可能です。

$('form').submit( sample );

function sample() {

    console.log('送信');

}

この例では、「sample()」という関数名をsubmit()の引数に指定しているのが分かりますね。

関数内の処理が複雑になるようであれば、コードの見通しをよくするために関数を別の場所に記述する方が良いでしょう。

Formのactionを変更する

Form要素は送信を実行すると指定した送信先と通信を行うわけですが、この送信先をjQueryから変更することができます。

そこで、submit()を実行した際に送信先を変える手法について詳しく見ていきましょう。

submit()した時に変更する方法

まずは、単純な方法としてsubmit()した時に送信先を変更する手法を見てみましょう!

方法は簡単で、Formタグのaction属性に記述している送信先をjQueryから変更すれば良いわけです。

次のサンプル例を見てください!

$('form').submit(function() {

    $(this).attr('action', '/sample.html');

});

この例では、submit()を実行した際に「attr()」メソッドを使ってaction属性値を変更しているのが分かります。

attr()の第2引数へ送信したいサーバーへのパスを記述すれば、フォームの送信先が変更されることになります。

これは、あらかじめFormタグのaction属性を記述していてもsubmit()実行時に変更されるようになります。

ボタン毎にaction先を変更する方法

今度は、複数のボタンを配置したForm要素を想定して、ボタン毎に送信先を変更する手法を学びましょう!

これを実現するためには、ボタンをクリックする毎に異なる送信先を関数に教えてあげるように工夫する必要があります。

そこで、次のような関数を作ってみましょう!

function setAction(url) {
    $('form').attr('action', url);

    $('form').submit();
}

この関数は引数に「url」を取得し、そのURLをattr()メソッドの第2引数に設定するようにしています。

これにより、送信先を関数に教えるだけで異なる通信がsubmit()を実行するたびに実現できるわけです。

あとは、Form要素に設置するボタンを次のようにすれば良いですね!

<form>
  <input type="button" value="送信1" onclick="setAction('/sample.html')">
  <input type="button" value="送信2" onclick="setAction('/index.html')">
</form>

onclick属性に関数を指定し、引数へ送信先を設定すればボタン毎に異なるaction属性値を指定できるというわけです。

注意点としては、type属性値を「submit」ではなく「button」にすることです!

「submit」にすると2重に送信される恐れがあるため、「button」と記述することを忘れないようにしましょう!

submit()のキャンセル

submit()を実行するだけでなく、送信処理をキャンセル(無効化)する手法についても学習しましょう!

これにより、例えばフォームの内容を確認してエラーが合った場合に送信処理をキャンセルすることが出来るようになります。

submit()を無効化するには?

まず最初に、submit()の実行をキャンセル(無効化)する方法について見ていきましょう!

どのようにキャンセルさせるかと言うと、実はsubmit()メソッドは返り値に「false」を指定すると実行を中止するという特徴があります。

これを利用すると、一般的には以下のような記述になります。

$('form').submit(function() {

    return false;
  
});

やっていることは非常に簡単で、「return文」でfalseを返しているだけです。

これにより、submit()メソッドは実行を中止するので結果的に送信処理がキャンセルされるというわけです。

submit()する前に処理を行う方法

送信処理をキャンセルする方法を学んだところで、submit()を実行する前にフォームの内容をチェックする処理を記述してみましょう!

例えば、入力フォームにユーザーが何も入力していなければ送信処理をキャンセルして実行されないようにしてみます。

次のサンプル例を見てください!

$('form').submit(function(e) {

    var count = $('input').val().length;

    if( !count ) return false;

});

この例では、入力フォームの文字数を「val().length」で確認していますね。

つまり、文字数が「0」の場合は何も入力されていないというシンプルな考え方です。

そこで、IF文を使って入力がされていなければfalseを返すようにしているわけです。

これにより、文字が入力されていなければ送信ができないフォームを作ることができるので便利ですね。

submit()を引数なしで使う

これまでは、submit()メソッドの引数に実行したい処理を関数で指定してきました。

しかし、この引数は指定しなくてもsubmit()は利用することができます。

「引数なし」の場合は、submit()処理を他のHTML要素で代用することができるという特徴があるのでご紹介します。

次のサンプル例を見てください!

$('button').click(function() {

    $('form').submit();

});

これは普通のボタン要素にクリックイベント処理を記述しているのですが、その中身にsubmit()を実行しているのが分かります。

この記述だけで、ボタンをクリックするとForm要素の送信処理が実行されるのです。

通常であればForm要素内にある送信ボタンをクリックしてsubmit()処理を実行するわけですが、他のボタンでも代用できるというわけです。

submit()の引数「あり・なし」で処理の方法が少し変わるので、どちらの方法でも実行できるように慣れておきましょう!

まとめ

今回は、jQueryからForm要素の送信(submit)処理を操作できる「submit()」メソッドについて学習をしました!

最後に、もう一度ポイントをおさらいしておきましょう!

・submit()はForm要素を対象にして任意の処理を実行することができる
・submit()の実行時にaction属性値を変更することで送信先を変えることができる
・submit()は返り値にfalseを指定することで処理をキャンセルすることができる
・submit()は引数なしだと、他のHTML要素に処理を代用することができる

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

33歳、未経験だった僕がフリーエンジニアになれた理由

現在フリーでWEBエンジニアをやられている濱口直行さん。33歳で、プログラミングを学び始め、約半年という短い期間で独立までされた学習ログを余すことなくインタビューさせていただきました。

プログラミングを学習中の方はもちろん、独立をお考えの方まで幅広く活用できる記事になっています。この機会に是非活用していただければと思います。

現役フリーランスエンジニアによる無料体験レッスン実施中!

もし、あなたが、

  • 経験、年齢、学歴に不安がある
  • 挫折しない学習方法が知りたい
  • アプリ開発で困っている
  • エンジニアの”生”の声が聞きたい!
  • 仕事獲得の仕方がわからない
  • エンジニアに転職したいが何をすればいいかわからない

など、プログラミング学習やキャリアのことでお困りであれば、まずは『無料体験レッスン』にお申し込み下さい。

あなたにとって、最適の解決策をご提案させていただきます。

詳しくは下の画像から詳しいサービス内容をご確認ください。

cta_mtm3

学習者インタビュー

23歳、早稲田中退生が3ヶ月でフリーランスエンジニアになるまで
元ベンチャー役員が起業のためにプログラミングを学んだ本当の理由
売上2,000万のサービスを作った僕がプログラミング学習をした理由
IT音痴のヨガインストラクターが爆速でサイト作成できた秘訣
Rubyを学んだ島根女子流の仕事術「PCとWifiさえあれば仕事はできる」
文系こそなるべき!経験ゼロから3ヶ月でエンジニアに転身した経済学部出身の話

人気記事セレクション

WEBアプリって?ゼロから始める5ステップ
自分にぴったりのプログラミング言語を知る
完全無料!プログラミング学習サイトTop5
プログラミング案件サクッと取れるサイト集
未経験でフリーエンジニアになれる5つの理由
WEBアプリ開発言語を選ぶべき3つの理由
Pythonって何ができるの!?徹底解説!
プログラミング初心者が急成長する10の秘訣
挫折知らず!ドットインストール200%活用術

プログラミング学習者必見

専属講師に質問し放題、レッスンし放題!最短1ヶ月でフリーランスエンジニア
プログラミング学習カリキュラム無料公開中
Ruby学習カリキュラム無料公開中
Python学習カリキュラム無料公開中
 1記事最大11,000円!テックライター募集


Source: 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト

プログラムはじめの一歩カテゴリの最新記事