【jQuery】簡単に自作できるフォームの実装と操作方法をわかりやすく解説

  jQuery プログラミング

この記事を書いている僕は、フロントエンドエンジニア歴が15年ほど。

web業界からゲーム業界まで数多くのwebサイトやアプリケーションを制作しています。

こういった僕が、分かりやすく解説していきます。

読者の悩み

  • そもそもフォームってどうやって作るんだろう…
  • フォームの値をjQueryで取得する方法がわからない
  • とにかくゼロからフォームを作ってみたい

こういった疑問に答えます。

本記事の内容

  • フォームの仕組みを6つの項目順にわかりやすく解説します
  • jQueryを使ったフォームの操作に関する実装方法のデモページやコードを確認できます
  • jQueryを使うとフォームの作成も簡単かつ効率よく作成できます

デモページを用意

デモページを用意してますので実際に動きが確認できます。

DEMO

サンプルコードを用意

コード［HTML / SCSS / CSS / jQuery］をGitHubの方でも確認できます。

実際のソースコードをアップしているのでクローンしてもOKです。

phpファイル
scssファイル
jsファイル
cssファイル

デモページとソースコードを確認しながらご覧ください。

骨組みは以下の6つです。

  • 要素の値を取得する
  • 入力欄の値を取得する
  • 選択ボックスの値を取得する
  • フォームの入力チェックをする
  • 入力欄への自動入力
  • 選択ボックスの自動選択

ではコードを見ていきます。

目次

要素の値を取得する

ここではまず、jQueryを使ってHTMLから情報を取得する方法を簡単に解説します。

textメソッド

これは引数に指定した文字列を要素に「セット」するメソッドです。

下記のように引数の文字列を「Vue.js」にセットすると、h3要素内を変更できます。

$('h3').text('Vue.js');

しかしtextメソッドは下記のように引数を指定せずに用いることで、h3要素内の文字列を「ゲット（取得）」することもできます。

var text = $('h3').text();

htmlメソッド,cssメソッド

jQueryで値をセットするメソッドは大抵ゲットにも使うことができます。htmlメソッドとcssメソッドもゲットとして使うことができます。

HTMLを取得する場合、下記のように引数を指定せずに用いることで、「#wrap」内のHTMLを取得することができます。

var html = $('#wrap').html();
<div id="wrap">
  <h2>学びたいフレームワークをクリック！</h2>
</div>
var fontSize = $('h2').css('font-size');
h2 {
font-size: 22px;
}

HTMLの属性

HTMLのタグにはclassやid、srcといったものを指定できますが、これらを属性と呼びます。様々な属性がありますが、下記に代表的なものを載せておきます。

・class ・id ・href(aタグ) ・src(imgタグ) ・type(inputタグ) 　　︙

attrメソッド

HTMLの属性はattrメソッドを用いて「ゲット」と「セット」ができます。

例えば、attr('id', 'title')のように第一引数に属性名、第二引数にその属性値を指定することで属性をセットすることができます。

そして、第二引数を指定しない場合は、その属性の値を取得できます。

属性をセットする場合（h2要素にtitleというidをセット）

$('h2').attr('id', 'title');

属性の値を取得する場合（a要素のhref属性の値をゲット）

var url = $('a').attr('href');

入力欄の値を取得する

ここではフォームに値を入力し送信ボタンを押すとフォームの内容を取得して表示するようにしてみます。

inputタグの入力値

inputタグに入力されている値は、valメソッドで取得できます。

var selectItem = $('#select-form').val();

submitイベント

フォームが送信されたときのイベントとして、submitイベントがあります。

submitイベントを用いると、送信ボタンがクリックされたときだけでなく、「Enter」キーでフォームが送信された場合もイベントが発生します。

$('#form').submit(function() {
  var selectItem = $('#select-form').val();
    ︙
});

選択ボックスの値を取得する

selectタグを用いると選択肢式のセレクトボックスを作ることができます。

selectタグとoptionタグからなり、各optionタグが選択肢になります。

下記のように、selectタグはvalメソッドによって、選択中の値（optionタグのvalue属性の値）を取得できます。

<form id="form" class="form">
    ︙
  <select id="select-form" class="select-form">
    <option value="0">選択してください</option>
    <option value="1">1. React</option>
    <option value="2">2. Angular</option>
    <option value="3">3. Vue.js</option>
  </select>
    ︙
</form>
var selectItem = $('#select-form').val();

フォームの入力チェックをする

ここではフォームが送信されたときに、フォームに値が入力されているかどうかをチェックする機能を実装します。

valメソッドでフォームの値を取得しフォームに値が入力されていなければエラーを出します。

エラーメッセージの仕組み

エラーメッセージを表示するために、下記のような条件分岐を行います。

if (入力値が空) {
  //エラーメッセージを表示
} else {
  //エラーメッセージを表示
}

空文字列について

中身の無い文字列のことを「空文字列」と言います。空文字列は通常「''」（シングルクォーテーション２つ）で表記します。

フォームに値が入力されているかどうかは、valで取得した値が空文字列「''」かどうかで判断することができます。

$('#form').submit(function() {
  var textItem = $('#text-form').val();
  if (textItem == '') {
    //エラーメッセージを表示
  }
    ︙
});

入力欄への自動入力

次はフォームの値を自動で設定できるように、選択したボタンに応じて理由の一部が書き込まれるようにします。

valメソッドは値を取得することもできますが、反対に引数に値を指定することでフォームに値をセットすることもできます。

<div class="option-wrapper">
    ︙
<div class="option-btn" data-option="1">1. React</div>
    ︙
<div class="option-btn" data-option="2">2. Angular</div>
    ︙
<div class="option-btn" data-option="3">3. Vue.js</div>
    ︙
</div>
$('.option-btn').click(function() {
  var optionText = $(this).text();
    ︙
  $('#text-form').val(optionText + 'が好きな理由は、');
    ︙
});

選択ボックスの自動選択

次はセレクトボックスも自動で選択されるようにします。

selectタグもvalメソッドを用いて自動で選択させることができます。先ほどのinputタグとの違いは、selectタグの場合選択肢が限定されているということです。

optionタグのvalue属性に合致する値をvalメソッドの引数に指定します。

$('#form').submit(function() {
  var selectItem = $('#select-form').val();
    ︙
  $('#output-select').text(selectItem);
    ︙
});
<p class="output-item">好きなフレームワーク：<span id="output-select"></span></p>

カスタムデータ属性

先ほどHTMLの属性を学習しましたが、属性は自分でつくることもできます。

これをカスタムデータ属性といい、「data-」から始まる属性名を自由に設定できます。data属性は何らかの情報をHTML内に指定しておくのに便利なため、jQueryではしばしば用いられます。

<div class="option-wrapper">
  <div class="option-group">
    <img class="option-image" src="https://buff-design.com/demo/img/react.jpg">
    <div class="option-btn" data-option="1">1. React</div>
  </div>
  <div class="option-group">
    <img class="option-image" src="https://buff-design.com/demo/img/angular.jpg">
    <div class="option-btn" data-option="2">2. Angular</div>
  </div>
  <div class="option-group">
    <img class="option-image" src="https://buff-design.com/demo/img/vue.jpg">
    <div class="option-btn" data-option="3">3. Vue.js</div>
  </div>
</div>

ここでは、選択ボタンにdata-optionという属性を設定し、それぞれのdata-option属性にはselectタグの選択肢（option）のvalue属性に対応する値を指定しておきます。

こうすることで、緑色の選択ボタンを押して自動的にセレクトボックスが選択されるようにしています。

$('.option-btn').click(function() {
    ︙
  // 変数clickedOptionに、クリックした要素のdata-optionの値を代入してください。
  var clickedOption = $(this).attr('data-option');
    ︙
  // 変数clickedOptionを用いて、「#select-form」の値を自動で入力してください。
  $('#select-form').val(clickedOption);
    ︙
});

今回は以上になります。

フォーム操作はjQueryの様々な知識の組み合わせが必要ですが、１つ１つ理解すれば難しいものではありません。

作成方法が不安な方は是非参考にしていただけると嬉しいです。

一覧へ

Recommended