サンプルコード付き！jQueryでフォームフィールドをクリアする

jQueryでフォームフィールドをクリアする

jQueryを使用してフォームフィールドをクリアするには、いくつかの方法があります。 以下では、最も一般的な方法をいくつか紹介します。

方法1: val('') メソッドを使用する

val('') メソッドは、フォームフィールドの値を空("")に設定します。 以下の例では、#name と #email というIDを持つテキストフィールドをクリアします。

<input type="text" id="name">
<input type="email" id="email">

$(document).ready(function() {
  $('#name').val('');
  $('#email').val('');
});

empty() メソッドは、フォームフィールド内のすべての内容を削除します。 以下の例では、#message というIDを持つテキストエリアの内容を削除します。

<textarea id="message"></textarea>

$(document).ready(function() {
  $('#message').empty();
});

reset() メソッドは、フォームを初期状態に戻します。 以下の例では、フォーム内のすべてのフィールドを初期状態に戻します。

<form>
  <input type="text" id="name">
  <input type="email" id="email">
  <button type="submit">送信</button>
</form>

$(document).ready(function() {
  $('#form').reset();
});

each() メソッドを使用して、フォーム内のすべてのフィールドをループ処理し、個別にクリアすることができます。 以下の例では、フォーム内のすべてのテキストフィールドをクリアします。

<form>
  <input type="text" name="name">
  <input type="text" name="email">
  <input type="text" name="address">
  <button type="submit">送信</button>
</form>

$(document).ready(function() {
  $('input[type="text"]').each(function() {
    $(this).val('');
  });
});

上記の方法のいずれを使用しても、jQueryを使用してフォームフィールドをクリアすることができます。 どの方法を使用するかは、状況によって異なります。

<input type="text" id="name">
<input type="email" id="email">

$(document).ready(function() {
  $('#name').val('');
  $('#email').val('');

  // 値がクリアされたことを確認
  console.log($('#name').val()); // ""
  console.log($('#email').val()); // ""
});

<textarea id="message"></textarea>

$(document).ready(function() {
  $('#message').empty();

  // 内容が削除されたことを確認
  console.log($('#message').text()); // ""
});

<form>
  <input type="text" id="name">
  <input type="email" id="email">
  <button type="submit">送信</button>
</form>

$(document).ready(function() {
  $('#form').reset();

  // 値が初期状態に戻されたことを確認
  console.log($('#name').val()); // ""
  console.log($('#email').val()); // ""
});

<form>
  <input type="text" name="name">
  <input type="text" name="email">
  <input type="text" name="address">
  <button type="submit">送信</button>
</form>

$(document).ready(function() {
  $('input[type="text"]').each(function() {
    $(this).val('');
  });

  // 値がクリアされたことを確認
  console.log($('input[name="name"]').val()); // ""
  console.log($('input[name="email"]').val()); // ""
  console.log($('input[name="address"]').val()); // ""
});

これらのサンプルコードを参考に、状況に合わせて適切な方法でフォームフィールドをクリアしてください。

prop() メソッドを使用して、checked 属性や selected 属性をクリアすることができます。 以下の例では、チェックボックスとラジオボタンをクリアします。

<input type="checkbox" id="checkbox">
<input type="radio" name="radio" id="radio1">
<input type="radio" name="radio" id="radio2">

$(document).ready(function() {
  $('#checkbox').prop('checked', false);
  $('#radio1').prop('checked', false);
  $('#radio2').prop('checked', false);
});

remove() メソッドを使用して、フォームフィールド自体を削除することができます。 以下の例では、#select というIDを持つセレクトボックスを削除します。

<select id="select">
  <option value="">選択してください</option>
  <option value="1">オプション1</option>
  <option value="2">オプション2</option>
</select>

$(document).ready(function() {
  $('#select').remove();
});

attr() メソッドを使用して、value 属性を削除することができます。 以下の例では、#hidden というIDを持つ隠しフィールドをクリアします。

<input type="hidden" id="hidden" value="123">

$(document).ready(function() {
  $('#hidden').attr('value', '');
});

これらの方法は、特殊な状況で使用する場合があります。 一般的には、上記の4つの方法で十分です。

jQueryを使用してフォームフィールドをクリアするには、いくつかの方法があります。 どの方法を使用するかは、状況によって異なります。 上記のサンプルコードと説明を参考に、適切な方法を選択してください。