如何使用 jQuery 清除表單中的所有輸入、選擇和隱藏字段？

Question

我想清除表單中的所有輸入、選擇以及所有隱藏字段。 如果最適合，使用 jQuery 是一種選擇。

什么是最簡單的方法來做到這一點......我的意思是易於理解和維護。

[編輯]

解決方案不能弄亂復選框（值必須保留，但必須清除選中狀態），也不能提交按鈕。

我想要做的是一個清除按鈕，它清除用戶明確輸入的所有選項，以及隱藏字段。

謝謝！

Answer 1

您可以使用reset()方法：

$('#myform')[0].reset();

或不使用 jQuery：

document.getElementById('myform').reset();

其中myform是包含要清除的元素的表單的 id。

如果字段不在表單內，您也可以使用:input選擇器：

$(':input').val('');

Answer 2

使用 JQuery 清除所有輸入，包括隱藏字段：

// Behold the power of JQuery.
$('input').val('');

選擇更難，因為它們有一個固定的列表。 您是要清除該列表，還是僅清除選擇。

可能是這樣的

$('option').attr('selected', false);

Answer 3

$('#formID')[0].reset(); // Reset all form fields

Answer 4

如果要將清除值應用於特定數量的字段，請為它們分配 id 或 class 並將空值應用於它們。 像這樣：

$('.all_fields').val('');

其中all_fields是應用於所需輸入字段以應用空值的類。 它將保護其他字段為空，您不想更改。

Answer 5

我有一個稍微更專業的案例，一個搜索表單，它有一個輸入，可以自動完成人名。 Javascript 代碼設置了一個from.reset()不清除的隱藏輸入。

但是我不想重置所有隱藏的輸入。 在那里，我向隱藏的輸入添加了一個類search-value ，其中要清除的位置。

$('form#search-form').reset();
$('form#search-form input[type=hidden].search-value').val('');

Answer 6

清空所有輸入標簽，如輸入，選擇，textatea 等運行此代碼

$('#message').val('').change();

Answer 7

你可以把它放在你的 jquery 代碼中，也可以單獨使用：

window.onload = prep;

function prep(){
document.getElementById('somediv').onclick = function(){
document.getElementById('inputField').value ='';
  }
}

Answer 8

let inputs = document.getElementsByTagName("input");
for (const input of inputs) {
    input.value = "";
}