jQueryでテキストボックスの値を取得する
jQueryでテキストボックスの値を取得するコードを紹介します。
概要
テキストボックスの値を取得するには、セレクタでテキストボックスを選択し、val()メソッドを呼び出します。
コード
以下のコードを記述します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#Button1").click(function () {
inputText = $("#Text1").val();
$("#output").text(inputText);
})
})
</script></head>
<body>
<input id="Text1" type="text" />
<input id="Button1" type="button" value="button" />
<div id="output"></div>
</body>
</html>
解説
<script type="text/javascript">
$(document).ready(function () {
$("#Button1").click(function () {
inputText = $("#Text1").val();
$("#output").text(inputText);
})
})
</script>
$(document).ready(function () {
...
}
上記コードによりページ表示後にJavaScriptが実行されます。
$("#Button1").click(function () {
inputText = $("#Text1").val();
$("#output").text(inputText);
})
ID=Button1のボタンのクリックイベントの実装部です。ボタンがクリックされるとセレクタにより、ID="Text1"のテキストボックスを選択し、val()メソッドを呼び出し、テキストボックスの値を取得します。
取得したテキストボックスの文字列をID="output"の枠に表示します。
実行結果
上記のHTMLファイルを表示します。下図の画面が表示されます。
テキストボックスに文字を入力します。
テキストボックスに入力後ボタンをクリックします。テキストボックスに入力した文字がボタンの下方に表示されます。
テキストボックスの入力内容を取得できました。
著者
iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。
