Web制作の現場で使えるjQuery　UIデザイン入門 ― 第8回

jQueryによるフォームのデザインの基礎（前編） (1/3)

※この記事は「Web制作の現場で使えるjQuery　UIデザイン入門」の第8回です。過去の記事もご覧ください。

　前回まではjQueryの基本的な使い方である、「セレクターで(X)HTML要素を指定し、イベントが発生したタイミングで(X)HTMLやCSSを書き換える」プログラムの書き方を紹介してきました。jQueryにはほかにも、Webページを使いやすくする便利な機能が用意されています。今回からは、これまでに触れていない特別な機能を紹介していきましょう。

　第8回は、「問い合わせフォーム」など、商用サイトには欠かせない(X)HTMLフォームをjQueryで制御する方法です。jQueryには、1．フォーム部品の値を取得・変更する命令、2．フォームに関するイベントの処理、2．フォーム部品を選択するセレクター――といったフォーム関連の機能が揃っています。

1.フォーム部品の値を取得・変更する命令

　フォームを操作する専用の命令が、val() です。val() を使えば、フォームに入力／選択されている値を取得したり、変更できます。

■value属性の値を取得する

　フォームに入力されているテキストや選択されている値を取得するには、 val() を、括弧内には何も記述せずに使用します。値を取得したい対象はセレクターで指定します。たとえばセレクターでinput要素を指定すると、val() はフォーム部品の種類を決める type属性に関係なく、すべてのinput要素のvalue属性の値を取得します。

　次のサンプルは、確認ボタン（button要素）がクリックされるとinput要素の値を取得し、「 (input要素に入力された内容)にメールを送信します。」という確認のメッセージをp要素内に書き出します。同時に、button要素を「確認」から「送信」に変更します。

▼サンプル01（スクリプト部分）

$(function(){
    $("button").click(function(){
        $("p").text($("input").val()+"にメールを送信します。");
        $("button").text("送信");
    })
})

▼サンプル01（(X)HTML部分）

<p>メールアドレス：<input type="text" name="name" /></p>
<button>確認</button>

▼サンプル01（実行結果）

<p> (input要素に入力された内容)にメールを送信します。</p>
<button>送信</button>

サンプル01の実行画面。確認ボタンを押すと、入力されたメールアドレスに送信する旨の確認メッセージが表示される

　val() の便利な点は、input要素以外のフォーム部品でも同じように入力または選択されている値を取得できることです。たとえばセレクターでselect要素を指定すると、選択されているoption要素のvalue属性を取得できます。

$("select").val();

　value属性がないtextarea要素の場合も、入力されているテキストを取得できます。

$("textarea").val();

■value属性の値を変更する

　フォームに入力されているテキストや選択されている値を変更するときにも、val() を使います。対象とする要素はセレクターで指定し、変更したい値を括弧内に記述します。

　次のサンプルでは、クリアボタン（button要素）が押されたらval("")を実行し、input要素の値を空に変更（削除）します。

▼サンプル02（スクリプト部分）

$(function(){
  $("button").click(function(){
        $("input").val("")
    })
})

▼サンプル02（(X)HTML部分）

お名前：<input type="text" /><button>クリア</button>

▼サンプル02（実行結果）

サンプル02の実行画面。クリアボタンをクリックするとフォームに入力された内容が削除される