jQueryでフォームの値を取得する

フォームに入力されたデータを取得したいな。
jQueryを使うと便利よ。

jQueryを使う準備

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

jQueryを使うためには、jQueryをまず読み込む必要があります。行1を、htmlのhead部分に書き込みます。

上の例では外部リソースを直接参照していますが、手元にダウンロードしたものを読み込んでも構いません。

jQueryでフォームのデータを取得する

<input type="text" id="text1" value="abc" />
<input type="text" class="text2" value="def" />
<script>
  console.log($('#text1').val()); // abc
  console.log($('.text2').val()); // def
</script>

jQueryを使うと、フォームのデータの取得が容易です。

フォーム項目のidが分かっていれば、$('#ID名')でその項目をピックアップし、.val()で値を取得できます。(行4)

フォーム項目のclassが分かっていれば、$('.class名')でその項目をピックアップし、.val()で値を取得できます。(行5)

訪問者が入力した値を取得したいな。
.change()というメソッドが用意されているわ。
ありがとう。jQuery使うと楽になるね。

値の変更時に処理する.change()

<input type="text" id="text3" value="" />
<script>
  $('#text3').change(function() {
    console.log( $('#text3').val() );
  });
</script>

.change()を使うと、値の変更時に処理を実行できます。

  $('#text3').change(

 ...(変更時の処理を書く)...

  );

が、id=text3の項目が変更されたときに、処理を実行する、という命令です。

 

function() {
    console.log( $('#text3').val() );
  }

の部分が、実行される処理です。

タグ:   javascript