当サイトはアフィリエイト広告を利用してます
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() );
}の部分が、実行される処理です。
更新日:
↑このページへのリンクです。コピペしてご利用ください。
