[JavaScript] jQueryでテキストボックスの値を取得する
このページのタグ:[JavaScript] [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ファイルを表示します。下図の画面が表示されます。


テキストボックスに文字を入力します。


テキストボックスに入力後ボタンをクリックします。テキストボックスに入力した文字がボタンの下方に表示されます。


テキストボックスの入力内容を取得できました。
登録日 :2014-01-09    最終更新日 :2014-01-23
このページのタグ:[JavaScript] [jQuery]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)