jQuery Academy · レッスン

フォームフィールドの動的操作

jQueryを使用してユーザー入力に応じてフォームフィールドを動的に追加、削除、変更し、柔軟でインタラクティブなフォームインターフェースを作成します。

「フォームフィールドの動的操作」はCoddyKit上の無料jQuery Academyレッスンです。これはレッスン1/3です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはjQuery Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 jQuery Academyコースには全3レッスンが含まれています。

動的フォーム：理由と方法

フォームは静的なものが多い一方、現代のWebアプリケーションではインタラクティブ性が重要です。動的なフォームフィールド操作を使うと、フォームの構造をリアルタイムに変更できます。

つまり、ユーザーがページを操作するときに、入力フィールドを追加、削除、変更できます。これにより、ユーザー体験が大きく向上し、より柔軟なフォームを実現できます。

フィールド追加の基本

フィールド追加の基本は、新しいHTML要素を作成してDocument Object Model（DOM）に挿入することです。

jQueryで要素を作成します（例：$('')）。
.append()、.prepend()、.after()、.before()などのメソッドを使って、フォーム内の正確な位置に配置します。
特にバックエンドで処理する場合は、新しいフィールドに適切なname属性を設定してください。

新しいメール入力欄を追加する

クリックすると新しいメール入力欄を生成するボタンを追加してみましょう。HTML文字列を作成してから追加する方法に注目してください。

<div id="email-fields">
  <input type="email" name="email[]" placeholder="Email 1">
</div>
<button id="add-email">Add Another Email</button>

<script>
$(document).ready(function() {
  let emailCount = 1;
  $('#add-email').on('click', function() {
    emailCount++;
    const newEmailField = `
      <input type="email" name="email[]" 
             placeholder="Email ${emailCount}">
    `;
    $('#email-fields').append(newEmailField);
  });
});
</script>

フィールドの削除：後片付け

ユーザーがフィールドを追加する必要があるのと同じように、不要なフィールドを削除したい場合もあります。これにより、フォームを必要な内容に保ったまま、すっきり整理できます。

この処理にはjQueryの.remove()メソッドが最適です。選択した要素を、関連付けられたデータやイベントハンドラーとともにDOMから完全に削除します。

特定の入力欄を削除する

それでは、先ほどの例を拡張しましょう。各メール入力欄の横に「削除」ボタンを追加します。クリックすると、その入力欄だけが削除されます。

重要：動的に追加された「削除」ボタンのイベントをどのように処理しているかに注目してください。

<div id="email-fields">
  <div class="email-group">
    <input type="email" name="email[]" placeholder="Email 1">
    <button class="remove-email">Remove</button>
  </div>
</div>
<button id="add-email">Add Another Email</button>

<script>
$(document).ready(function() {
  let emailCount = 1;

  $('#add-email').on('click', function() {
    emailCount++;
    const newEmailGroup = `
      <div class="email-group">
        <input type="email" name="email[]" 
               placeholder="Email ${emailCount}">
        <button class="remove-email">Remove</button>
      </div>
    `;
    $('#email-fields').append(newEmailGroup);
  });

  // Event delegation for remove buttons
  $('#email-fields').on('click', '.remove-email', function() {
    $(this).parent('.email-group').remove();
  });
});
</script>

フィールドの変更：属性を調整する

フィールドを追加・削除するのではなく、プロパティだけを変更したい場合もあります。変更対象にはvalue、placeholder、disabledの状態、さらにはnameやidなどがあります。

jQueryには、HTML属性用の.attr()とDOMプロパティ用の.prop()があります。checked、disabled、selectedのようなブール属性には、多くの場合.prop()が推奨されます。

フィールドの状態を切り替える

チェックボックスによってテキスト入力欄の有効・無効を切り替える例を見てみましょう。.prop()を使ってdisabledプロパティを変更します。

<label>
  <input type="checkbox" id="enable-input"> Enable Input
</label>
<input type="text" id="my-input" value="Hello" disabled>

<script>
$(document).ready(function() {
  $('#enable-input').on('change', function() {
    const isChecked = $(this).is(':checked');
    $('#my-input').prop('disabled', !isChecked); // Set disabled based on checkbox state
  });
});
</script>

動的要素のイベント

よくある落とし穴として、直接イベントハンドラー（$('#myButton').on('click', ...)など）は、ページの読み込み時に存在する要素にしか設定されません。

動的に追加される要素には、イベント委譲が必要です。これは、静的な親要素にイベントリスナーを設定し、動的に追加される子要素をセレクターで指定する方法です。jQueryの.on()メソッドを使うと、この処理を簡単に実装できます。

「さらに追加」実践例

ここまでに学んだ内容を組み合わせ、よくあるパターンを見てみましょう。「スキルを追加」ボタンを使ってユーザーが複数のスキルを登録でき、各スキルに「削除」ボタンを付けます。

一意の識別にdata-idを使い、削除する親要素の検索に.closest()を使っている点に注目してください。

<div id="skill-list">
  <div class="skill-item" data-id="1">
    <input type="text" name="skill[]" placeholder="Skill 1">
    <button class="remove-skill">Remove</button>
  </div>
</div>
<button id="add-skill">Add Skill</button>

<script>
$(document).ready(function() {
  let skillId = 1; // Unique ID for each skill item

  $('#add-skill').on('click', function() {
    skillId++;
    const newSkillItem = `
      <div class="skill-item" data-id="${skillId}">
        <input type="text" name="skill[]" 
               placeholder="Skill ${skillId}">
        <button class="remove-skill">Remove</button>
      </div>
    `;
    $('#skill-list').append(newSkillItem);
  });

  // Event delegation for remove buttons
  $('#skill-list').on('click', '.remove-skill', function() {
    // Prevent removing the very first skill if desired
    if ($('.skill-item').length > 1) {
      $(this).closest('.skill-item').remove();
    } else {
      alert("You need at least one skill!");
    }
  });
});
</script>

動的フォームの確認

動的なフォーム操作についての理解度を確認しましょう。

まとめ：動的フォーム

このレッスンでは、jQueryを使ってフィールドを動的に追加、削除、変更し、フォームをよりインタラクティブで使いやすくする方法を学びました。

.append()、.prepend()、.after()、.before()を使って要素を追加します。
.remove()を使って要素を削除します。
.attr()と.prop()を使って要素の属性やプロパティを変更します。
特に、初回のページ読み込み後にDOMへ追加された要素のイベントには、.on()とイベント委譲を使用します。

次は、クライアントサイドのフォームバリデーションについて詳しく学びます。

よくある質問

「フォームフィールドの動的操作」レッスンは無料ですか？

はい。「フォームフィールドの動的操作」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、jQuery Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 jQuery Academyコースには全3レッスンが含まれています。

「フォームフィールドの動的操作」で何を学びますか？

jQueryを使用してユーザー入力に応じてフォームフィールドを動的に追加、削除、変更し、柔軟でインタラクティブなフォームインターフェースを作成します。ブラウザで直接実行するハンズオンコードでjQuery Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

jQuery Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのjQuery Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/3です。

「フォームフィールドの動的操作」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このjQuery Academyレッスンでコードを書いて実行できますか？

はい。すべてのjQuery Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← jQuery Academyに戻る