HTMLフォームなどでよく使うname
属性を取得したり、値を追加する方法です。
複数のname
属性を取得したり、部分一致のname
属性を取得する方法も併せてご紹介します。
目次
name属性を取得
name
属性を取得して値を表示させたり、追加したりできます。
input要素のvalue値を追加
HTML
1 2 |
<!--VALUE値が空欄のフォーム--> <input type="text" name="text" value=""> |
jQuery
1 2 3 4 5 6 |
$(function() { // name属性をセレクタにしてvalue値を追加 $('input[name="text"]').val('テストテキスト'); }); |
結果
上記のようにテキストフォームにvalue
値が追加されました。
その他フォームのvalue値を追加
textarea
やcheckbox
など、さまざまな要素のname
属性を取得する方法をご紹介します。
HTML
1 2 3 4 5 6 7 8 |
<!--値が空欄のテキストエリア--> <textarea name="comment"></textarea> <!--未チェックのチェックボックス--> <label>メルマガ配信に同意<input type="checkbox" name="confirm" value="同意する"></label> <!--ラベルが空欄のボタン--> <button type="button" name="click"></button> |
jQuery
1 2 3 4 5 6 7 8 9 10 11 |
$(function() { // テキストエリアにテキストを追加 $('textarea[name="comment"]').val('テキストエリアにコメントを書きました。'); // チェックボックスにチェックを入れる $('input[name="confirm"]').prop('checked', true); // ボタンにテキストを追加 $('button[name="click"]').text('クリック!'); }); |
結果
上記のようにテキストエリア、チェックボックス、ボタンに値が追加されました。
テキストエリアも.val()
で追加しましょう。
基本構文
$( ‘ 要素 [ name = “name属性値” ] ‘ )
input
やtextarea
などの要素を記述し、そのあとに[]
(角カッコ)でname
属性を指定します。
name
属性の値はクオーテーションで囲ってあげましょう。
部分一致での取得
name
属性は、完全一致の値ではなくても取得できます。
一気に見てみましょう。
jQuery
1 2 3 4 5 6 7 8 |
$(function() { $('input[name*="ex"]').val('テキスト'); // 部分一致 $('input[name^="te"]').val('テキスト'); // 前方一致 $('input[name$="xt"]').val('テキスト'); // 後方一致 $('input[name!="text"]').val('テキスト'); // 否定 }); |
説明
name
属性と要素の間に、特定の記号と=
(イコール)を挿入することで、部分一致などの検索ができます。
詳しくは下記一覧表をご覧ください。
記号 | 検索条件 | 説明 |
---|---|---|
*= | 部分一致 | 指定した属性の値を「含む」要素 |
^= | 前方一致 | 指定した属性の値から「始まる」要素 |
$= | 後方一致 | 指定した属性の値で「終わる」要素 |
!= | 否定 | 指定した属性の値を「除く」要素 |
ボタンをクリックしたら値を出力
フォームから取得した値を出力するサンプルです。
HTML
1 2 3 4 |
<input type="text" name="text"> <textarea name="comment"></textarea> <label>メルマガ配信に同意<input type="checkbox" name="confirm" value="同意する"></label> <button type="button" name="click"></button> |
jQuery
1 2 3 4 5 6 7 8 9 10 11 |
$(function() { // テキストエリアにテキストを追加 $('textarea[name="comment"]').val('テキストエリアにコメントを書きました。'); // チェックボックスにチェックを入れる $('input[name="confirm"]').prop('checked', true); // ボタンにテキストを追加 $('button[name="click"]').text('クリック!'); }); |
結果(動作サンプル)
下記フォームに適当なテキストを入力し、クリック!ボタンを押すと、入力内容がフォームの下に出力されます。
上記のように入力した値が出力されました。
複数のフォームから取得
for()
やeach()
などのループ処理を使い、複数のフォームを操作します。
複数のフォームに値を追加
まずは空のフォームに値を追加します。
HTML
1 2 3 |
<input type="text" name="city[]"> <input type="text" name="city[]"> <input type="text" name="city[]"> |
jQuery
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function() { // ①配列を変数に格納 var cities = ['高崎', '前橋', '太田']; // ②配列の値を1つずつループ処理 for (var i = 0; i < cities.length; i++) { // ③複数のフォームに1つずつ値を格納 $('input[name="city[]"]').eq(i).val(cities[i]); } }); |
結果
1つずつフォームに追加されました。
説明
①配列を変数に格納
[]
(角カッコ)内に、カンマ区切りで値を入れると配列になります。
②配列の値を1つずつループ処理
参考:for文で繰り返し処理
③複数のフォームに1つずつ値を格納
①で格納した配列の値をeq(i)
で順番を指定しながら追加しています。
i
には順番を示す番号が格納されていますので、ループしながらeq(0)
eq(1)
…と進んでいきます。
eq()
は以下のようになります。
eq(0)
=> 高崎eq(1)
=> 前橋eq(2)
=> 太田
複数のフォームの値を出力
ボタンをクリックすると。フォームの値が出力されます。
HTML
1 2 3 4 5 6 |
<input type="text" name="city[]" value="高崎"> <input type="text" name="city[]" value="前橋"> <input type="text" name="city[]" value="太田"> <p></p> <p></p> <p></p> |
jQuery
1 2 3 4 5 6 7 8 9 10 |
$(function() { // ①指定した要素をループ処理 $('input[name="city[]"]').each(function(i) { // ②複数フォームから1つずつ値を出力 $('input[name="city[]"]').eq(i).text($(this).val()); }); }); |
結果(動作サンプル)
下記クリック!ボタンを押すと、入力内容がフォームの下に出力されます。
上記にフォームの中身が出力されたかと思います。
説明
①指定した要素をループ処理
each()
のfunction()
に引数を指定すると、連番が取得できます。
②複数フォームから1つずつ値を出力
フォームの値をeq(i)
で順番を指定した要素に追加し、出力しています。