コラム：jQueryによるフォーム操作

目次

説明

ここでは、『jQueryによるフォーム操作』について触れます。

Webページのプログラムでは、入力フォームの部品を操作することが多いです。ここでは、その方法について解説します。

テキスト入力欄

テキスト入力欄は、『<input type="text" value="～">』と『<textarea>～</textarea>』の2種類があります。

テキスト入力欄の値の取得と設定は『val()』で行えます。以下、実例です。

【値の取得】

<div><input type="text" id="txt1a" value="text1a"></div>
<div><textarea id="txt1b">text1b</textarea></div>

var txt1a = $('#txt1a').val();
var txt1b = $('#txt1b').val();

【値の設定】

<div><input type="text" id="txt2a" value=""></div>
<div><textarea id="txt2b"></textarea></div>

$('#txt2a').val(txt1a);
$('#txt2b').val(txt1b);

チェックボックス

チェックボックスの値の取得と設定は『prop()』で行えます。以下、実例です。

【値の取得】

<div>
    <label>
        <input type="checkbox" id="chck1" checked>
        チェックボックス
    </label>
</div>

var chck1 = $('#chck1').prop('checked');

【値の設定】

<div>
    <label>
        <input type="checkbox" id="chck2">
        チェックボックス
    </label>
</div>

$('#chck2').prop('checked', chck1);

ラジオボタン

ラジオボタンの値の取得と設定は『val()』で行えます。ただし、セレクタに注意が必要です。『input[name=rgrp1]』のように、『input』タグで属性『name』が『rgrp1』のような指定の仕方をします。また、選択されている要素は『:checked』で選択します。以下、実例です。

【値の取得】

<div>
    <label>
        <input type="radio" name="rgrp1" value="1">
        ラジオ1
    </label>
    <label>
        <input type="radio" name="rgrp1" value="2" checked>
        ラジオ2
    </label>
    <label>
        <input type="radio" name="rgrp1" value="3">
        ラジオ3
    </label>
</div>

var rgrp1 = $('input[name=rgrp1]:checked').val();

【値の設定】

<div>
    <label>
        <input type="radio" name="rgrp2" value="1">
        ラジオ1
    </label>
    <label>
        <input type="radio" name="rgrp2" value="2">
        ラジオ2
    </label>
    <label>
        <input type="radio" name="rgrp2" value="3">
        ラジオ3
    </label>
</div>

$('input[name=rgrp2]').val([rgrp1]);

セレクトボックス

セレクトボックスの値の取得と設定は『val()』で行えます。以下、実例です。

【値の取得】

<div>
    <select id="sel1">
        <option value="1">選択肢1</option>
        <option value="2" selected>選択肢2</option>
        <option value="3">選択肢3</option>
    </select>
</div>

var sel1  = $('#sel1').val();

【値の設定】

<div>
    <select id="sel2">
        <option value="1">選択肢1</option>
        <option value="2">選択肢2</option>
        <option value="3">選択肢3</option>
    </select>
</div>

$('#sel2').val(sel1);

送信前の確認

フォームの値をCGIに送る前に、空欄があるか確認したいことがあると思います。その方法を紹介します。

<form id="frm" action="dummy.cgi">
    <div><input type="text" id="txt2a" value=""></div>
    <div><input type="submit"></div>
</dorm>

$('#frm').submit(function() {
    var txt2a = $('#txt2a').val();
    if (txt2a === '') {
        alert('入力欄2aが未入力');
        return false;
    }
});

id『frm』に対して、『submit』（送信）時の処理を関数で登録します。この時、関数の戻り値が『false』なら、送信を停止します。

『submit』ボタンではなく、『form』タグの方にイベントを設定するのが注意点です。

サンプルの入手

以下は、今回出てきたサンプルです。

ZIPでまとめてダウンロード （右クリックから保存してください）

『sample1.html』（サンプル）を表示

プログラムの中身を見たい場合は、それぞれのHTMLファイルをブラウザで開いたあと、右クリックをして『ソースの表示』を選択してください。

メモ帳で、ファイルの中身を見ることができます。