文書の過去の版を表示しています。

【jQuery】フォームの値（input、selectなど）の操作

input の値（value）の操作

コピペして test.html などの htmlファイルとして保存すれば、そのまま動作確認が行なえます。

<html>
<meta>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</meta>
<body>
<input type="text" name="hoge" value="" id="input-01" class="form-hoge">
<button type="button" class="form-change">change</button>
<button type="button" class="form-clear">clear</button>
<script>
$(function() {
  $('.form-hoge').on('change', function(){
    // id で value を取得
    let hoge_id = $('#input-01').val();
    console.log(hoge_id);

    // class で value を取得
    let hoge_class = $('.form-hoge').val();
    console.log(hoge_class);

    // name で value を取得
    let hoge_name = $('input[name=hoge]').val();
    console.log(hoge_name);
  });

  $('.form-change').on('click', function(){
    // value の変更
    $('.form-hoge').val('abc');
  });

  $('.form-clear').on('click', function(){
      // value を空にする
      $('.form-hoge').val('');
  });
});
</script>
</body>
</html>

ゆーものメモ帳

サイドバー

【jQuery】フォームの値（input、selectなど）の操作

input の値（value）の操作

コメント

ゆーものメモ帳

ユーザ用ツール

サイト用ツール

サイドバー

【jQuery】フォームの値（input、selectなど）の操作

input の値（value）の操作

コメント

ページ用ツール