jQueryのテキストボックスの値を取得/設定するサンプルです。
目次
サンプル | テキストボックスの値を取得する(idを使用) |
テキストボックスに値を設定する(idを使用) | |
テキストボックスの値を取得する(nameを使用) | |
テキストボックスに値を設定する(nameを使用) |
テキストボックスの値を取得する(idを使用)
ボタンを押すとテキストボックスの値を取得するサンプルです。
idを指定しています。
取得した値
上記サンプルのコードです。
<p>取得した値 <span id="span1"></span></p>
<input type="text" value="red" id="text1" maxlength="5">
<input type="button" id="button1" value="ボタン" />
<input type="button" id="button2" value="クリア" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#button1").click(function() {
// 値を取得
const str1 = $('#text1').val();
$("#span1").text(str1);
});
$("#button2").click(function() {
$("#span1").text("");
});
</script>
2行目は、テキストボックスです。
10行目は、IDセレクタ(#text1)で対象を特定(2行目)しvalメソッドでvalue値を取得しています。
11行目は、value値を画面に表示しています。
13~15行目は、テキストのエリアに空文字「""」をセットしてクリアしています。
テキストボックスに値を設定する(idを使用)
ボタンを押すとテキストボックスに値を設定するサンプルです。
idを指定しています。
上記サンプルのコードです。
<input type="text" value="blue" id="text2" maxlength="5">
<input type="button" id="button3" value="ボタン" />
<input type="button" id="button4" value="クリア" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#button3").click(function() {
// 値を設定
$('#text2').val("red");
});
$("#button4").click(function() {
$('#text2').val("");
});
</script>
1行目は、テキストボックスです。
9行目は、IDセレクタ(#text2)で対象を特定(1行目)しvalメソッドでvalue値を設定しています。
11~13行目は、テキストボックスのvalueに空文字「""」をセットしてクリアしています。
テキストボックスの値を取得する(nameを使用)
ボタンを押すとテキストボックスの値を取得するサンプルです。
nameを指定しています。
取得した値
上記サンプルのコードです。
<p>取得した値 <span id="span3"></span></p>
<input type="text" name="test3" value="red" maxlength="5">
<input type="button" id="button5" value="ボタン" />
<input type="button" id="button6" value="クリア" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#button5").click(function() {
// 値を取得
const str1 = $('input:text[name="test3"]').val();
$("#span3").text(str1);
});
$("#button6").click(function() {
$("#span3").text("");
});
</script>
2行目は、テキストボックスです。
10行目は、inputセレクタと:textセレクタとnameの名称で対象を特定(2行目)して、valメソッドでvalue値を取得し変数「str1」に代入します。
11行目は、value値を画面に表示しています。
13~15行目は、テキストのエリアに空文字「""」をセットしてクリアしています。
テキストボックスに値を設定する(nameを使用)
ボタンを押すとテキストボックスに値を設定するサンプルです。
nameを指定しています。
上記サンプルのコードです。
<input type="text" name="test4" value="green" maxlength="5">
<input type="button" id="button7" value="ボタン" />
<input type="button" id="button8" value="クリア" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#button7").click(function() {
// 値を設定
$('input:text[name="test4"]').val("red");
});
$("#button8").click(function() {
$('input:text[name="test4"]').val(""); //クリア
});
</script>
1行目は、テキストボックスです。
9行目は、inputセレクタと:textセレクタとnameの名称で対象を特定(1行目)して、valメソッドでvalue値に値「red」を代入しています。
11~13行目は、テキストのエリアに空文字「""」をセットしてクリアしています。
セレクタ
以下は、上記コードで使用しているセレクタです。
inputセレクタ・・・要素セレクタ
:textセレクタ・・・jQueryの拡張セレクタ
[name="test1"]・・・属性セレクタ
jQuery セレクタとセレクタの一覧
:textセレクタ
- jQueryの拡張セレクタです。
- text属性を選択します。
- 以下はjQueryサイトの:textセレクタのページです。
http://api.jquery.com/text-selector/
IDセレクタ
- 指定されたid属性の要素を選択します。
- 以下はjQueryサイトのIDセレクタのページです。
http://api.jquery.com/id-selector/
val()メソッド
- jQueryのメソッドです。
- val()は、valueの値を返します。
- 以下はjQueryサイトの.val()メソッドのページです。
http://api.jquery.com/val/
val(値)メソッド
- jQueryのメソッドです。
- val(value)は、valueに値をセットします。
- 以下はjQueryサイトの.val(value)メソッドのページです。
http://api.jquery.com/val/#val2
関連の記事
CSS 属性セレクタのサンプル(要素名[属性名="値"])
jQuery hiddenの値を取得/設定するサンプル
jQuery ラジオボタンの値を取得/設定するサンプル
jQuery チェックボックスの値を取得/設定する
jQuery セレクトボックスの値を取得/設定する
jQuery テキストエリアの値を取得/設定する
JavaScript テキストボックスの値を取得/設定する