Search

検索したいワードを入力してください

2019年04月10日

JavaScriptのsubmitでフォーム送信をしよう

JavaScriptのsubmitでフォーム送信を行う方法について紹介します。しっかりと理解した上でJavaScriptで送信処理をコントロールできるように、submitメソッドの使い方を基本的なところや注意点も含めて説明しています。

submitメソッドとは

JavaScriptの「submitメソッド」とは、フォームが存在するWebサイトからサーバーへ情報を送信するときに利用しているイベントに使用するものです。もう少し詳しく紹介します。

一般的にsubmitイベントを利用するのはWebサイトにフォームを設置する場合です。具体的には次のサンプルコードをご覧ください。

【サンプルコード】
<form>
// 値の入力エリア
<input name="input_text" type="text" />

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


上記のサンプルコードをブラウザで表示すると次のようになります。




多くのWebサイトのお問い合わせフォームや会員登録ページなどで見ることができる基本的なHTMLです。input要素に値を入力し送信ボタンを押すことで、入力された値をサーバへ送信します。その送信時に行われるイベントが「submitイベント」です。

送信時のsubmitイベントでJavaScriptのsubmitメソッドを利用することで、送信前にさまざまな処理を行うことが可能です。次の章からは、JavaScriptのsubmitメソッドの使い方を紹介します。

JavaScriptのsubmitメソッドの使い方

JavaScriptのsubmitメソッドについて紹介します。大きく分けて、「送信処理をコントロールする方法」と「name属性を設定するときに注意すること」を中心に紹介します。

送信処理をコントロールする方法

まずは、JavaScriptで送信処理をコントロールする方法です。送信処理をコントロールするというのは、先ほどのサンプルコードで送信ボタンを押すことで行われたsubmitイベントをJavaScriptで行う方法です。詳しくは次のサンプルコードをご覧ください。

【サンプルコード】
<body>

<form name="send_form">

<input name="input_text" type="text" />

<button id="button_tag">送信
</form>

<script>
// idがbutton_tag要素を取得
var button = document.getElementById('button_tag');
// 取得したボタンをクリック時のアクションをセット
button.addEventListener('click', function() {
// アラート表示
alert(document.send_form.input_text.value);
// フォームの内容を送信
document.send_form.submit();
})
</script>
</body>

上記のサンプルコードを順番に説明します。

HTMLのform要素を設置しています。そして今回は、ボタンをinput要素ではなくbutton要素で設置しています。button要素にはidを指定することで、JavaScriptで紐付けを可能にしています。

次に、JavaScriptで作成している<script>要素内について説明します。まず、「var btn = document.getElementById('button_tag');」でHTMLのbutton要素を紐付けし取得しています。取得した「btn」に対して、「addEventListener」でクリック時のアクションを追加しています。

そして、クリック時の処理として、「document.send_form.input_text.value」で入力した値を取得しアラートで表示しています。そして、その後に「document.send_form.submit();」でフォームをsubmitで送信しています。

JavaScriptで送信処理をコントロールできることでサンプルコードのようにアラートの表示やその他の処理を実行することができるため、送信以外の処理を行いたい場合に有効です。

document.フォーム名.submitの使い方

先ほどのサンプルコードの「document.send_form.submit();」について詳しく説明します。

まず、「document」についてですが、JavaScriptでHTML要素を取得する場合に使用します。「documentオブジェクト」と呼ばれますが、HTML要素に対してJavaScriptから簡単にアクセスすることが可能となります。

例えば、
console.log( document );
とJavaScriptで出力すると、対象のWebページを構成するHTML要素がすべて出力されます。documentオブジェクトの使い方はすでにサンプルコードで紹介している通り、document.プロパティのように「 .(ドット演算子) 」で連結させることで使用することができます。

次のサンプルコードのように、HTMLのhead要素やbody要素など少し範囲を限定して取得することもできます。

【サンプルコード】
//head要素
console.log( document.head );
//body要素
console.log( document.body );

次に、「send_form」の部分については、HTMLのform要素のnameをセットします。つまり、「documentでHTML要素からformの"send_form"を取得する」ということが「document.send_form」と同じになります。

最後にここまで取得したHTML要素のform要素を「submit」することで、「documentでHTML要素からformの"send_form"を取得して、submitで送信する」ということになります。

HTML要素にinput要素のsubmitをセットしない場合は、JavaScriptで対象のform要素を取得した上で送信を実行させることで同じ動作になるようにしています。

「document.send_form.submit();」のように、ひとかたまりで考えると分かりにくいかもしれませんが、分解すると分かりやすくなります。

name属性を設定するときに注意すること

JavaScriptのsubmitメソッドについて、最後に注意点を紹介します。実は、先ほどのサンプルコードでbutton要素に「id属性ではなくname属性を付与」すればformと同じように「.(ドット演算子) 」で連結させることが可能なのですが、注意が必要です。具体的には、次のサンプルコードをご覧ください。

【サンプルコード】
<body>
<form name="send_form">
<input name="input_text" type="text" />

<button name="button">送信
</form>

<script>
document.send_form.button.addEventListener('click', function() {
document.send_form.submit();
});
</script>
</body>

先ほどのサンプルコードとの違いは、button要素に「name="button"」とname属性をセットしています。そうすることで「document.send_form.button」だけでHTML要素からbutton要素を取得できます。「getElementById」を使ってbutton要素を変数に入れる必要がなくなります。

ただし、一つだけ注意が必要です。次のように、button要素のname属性に「submit」を付与すると正しい処理が行われません。


この注意点は次のコードを見ていただくと分かりやすいです。
document.send_form.submit.addEventListener()
「submit」は送信を行うものです。そのため、HTML要素のformに対してsubmitを行うと言語が勘違いしてしまいます。そのため、「name="submit"」は使用不可となっています。

まとめ

JavaScriptのsubmitでフォーム送信を行う方法について紹介しました。基本的なところも多いですが、使うことも多いのでしっかり覚えておきましょう。

しっかりと理解した上でフォーム送信をコントロールできるようにしましょう。

【PR】多くの人がプログラミングを諦めてしまう理由をご存知ですか?



近年プログラミングを勉強する人が増えています。

プログラミング学習者の多くは独学から取り組もうとしますが、だいたい80%ほどは3ヶ月も続かずに諦めてしまいます。早い人は1日目で。

多くの人がプログラミングを独学しようとして諦める理由は、次の3つ。
●モチベーションが維持できない
●エラーの原因・解決方法が分からない
●どう学習すればよいか分からない

TechBoostというプログラミングスクールでは、みんなと一緒にプログラミングをするのでモチベーションの維持ができ、分からないことがあればマンツーマンで教えてくれ、徹底的に研究された初心者向けの教材が揃っています。

TechBoostを卒業後、実際にエンジニアとして転職した方もいるほど。

本気でプログラミングを学びたい方は、一度無料のカウンセリングでご相談ください。プログラミングを嫌いになる前に。

tech boostについて

オーダーメイド型の学習コンテンツを提供する「tech boost」 は、エンジニアのキャリア支援に特化したサービスを複数展開している株式会社Branding Engineerが運営しているプログラミングスクールです。最短3ヶ月間で、未経験から『プログラミングの基礎』、『実際に業務で必要となるスキル』、『今のトレンドとなっている知識』まで学べ、ご希望の方にはプロのキャリアアドバイザーによる就業支援を行うことができます。

tech boost卒業生インタビュー

tech boostの卒業生の声を聞きました。あなたがプログラミングを学びたい理由を、一度考えてみてください。
営業→Javaエンジニア→Rubyエンジニアと転向し、第一志望のFinTech企業で働く山下さん
元営業、ビジネスのわかるエンジニアを目指す菅原さん
サンフランシスコに交換留学し、シリコンバレーのVCでインターン中の梅本さん
予備校の営業から半年でエンジニア転職を果たした小田島さん

tech boostの口コミ



Related