Как сбросить поля формы с помощью javascript или jquery?

Question

Как сбросить поля формы более элегантно по сравнению с приведенным ниже кодом? Код работает. Но если у меня много полей формы, это выглядит не так хорошо. Есть ли более компактный способ?

<script> 
     function setSearchCriteria(){ 
      var searchcriteria = document.getElementById("TherapistSearch-SearchCriteria"); 
      searchcriteria.value = ""; 
     } 
     function setCity(){ 
      var city = document.getElementById("TherapistSearch-City"); 
      city.value = ""; 
     } 
     function setLastName(){ 
      var lastname = document.getElementById("TherapistSearch-LastName"); 
      lastname.value = ""; 
     } 
     function setFirstName(){ 
      var firstname = document.getElementById("TherapistSearch-FirstName"); 
      firstname.value = ""; 
     } 
} 
</script> 

<input type="button" class="btn btn-default" value="Reset form" 
onclick="javascript:clearForms();javascript:setSearchCriteria();setCity();setLastName();setFirstName();" title="Reset form"/> 

Answer 1

Дайте класс css вашим полям ввода.

<input type="text" id="firstName" class="resettable" /> 
<input type="text" id="firstName" class="resettable" /> 
<select id="states" class="selectResettable"> 
    <option value="0">Select an option </option> 
    <option value="1">Michigan</option> 
    <option value="2">Ohio</option> 
<select> 
<input type="button" id="resetBtn" /> 

И использовать этот CSS класс (ы) в качестве селектора JQuery (ов), чтобы получить все эти входы и установите значение пустым значение/по умолчанию. Я также удалил onclick из разметки HTML-кода, поскольку мы собираемся сделать это в способе unobtrusive javascript.

Добавьте этот javascript, где мы регистрируем код для события click на нашей кнопке.

$(function(){ 

    $("#resetBtn").click(function(e){ 
     alert("Reset button clicked"); 
     //Set the input text fields to empty string 
     $("input.resettable").val(""); 

     //Reset the dropdowns. 
     $(".selectResettable").val("0") 
     //If you want to do something else, Do it here. 
    }); 

}); 

Answer 2

<input type="reset" id="resetBtn" class="resettable" /> 

использовать тип сброса кнопки или вызова сброса метод по форме, как показано ниже

<input type="button" 
            class="btn btn-default"         
            value="Reset form" 
            onclick="document.getElementById('myForm').reset();" 
            title="Reset form"/> 

Answer 3

Просто используйте HTML так, как это означало, которые будут использоваться, и воспользоваться кнопкой сброса:

<input type="reset" class="btn btn-default" value="Reset form" title="Reset form"/> 

Для этого не требуется JavaScript, нет дополнительной функциональности и является родным компонентом HTML-форм. Использование type="button" дает элементу внешний вид кнопки, но разделяет функциональность по умолчанию; с использованием type="reset" выдает вид кнопки и дает функциональность по умолчанию для сброса родительского элемента <form> в состояние загрузки по умолчанию по умолчанию.

Ссылки:

• <input> element type attribute-values.