How to reset form fields the elegant way with javascript or jquery?

Question

How do I reset the form fields more elegant compared to the code below? The code is working. But if I have lots of form fields it does not look so nice. Is there a more compact way?

<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"/>

Why not just change the reset button from `type="button"` to `type="reset"`, then it's automatic, and about as simple and elegant as it could possibly be. — David Thomas, Dec 29 '15 at 15:18
See also http://stackoverflow.com/questions/16452699/how-to-reset-a-form-using-jquery-with-reset-method — aland, Dec 29 '15 at 15:19
Possible duplicate of [Clear form fields with jQuery](http://stackoverflow.com/questions/6364289/clear-form-fields-with-jquery) — Stan Shaw, Dec 29 '15 at 15:20

Shyju · Answer 1 · 2015-12-29T15:22:51.257

Give a css class to your input fields.

<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" />

And use this css class(es) as jQuery selector(s) to get all of this inputs and set the value to empty/default value. I also removed the onclick from button HTML markup as we are going to do it in the unobtrusive javascript way.

Add this javascript where we are registering the code for the click event on our button.

$(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.
   });

});

Also, you can create another CSS class for dropdowns or other types of input - for dropdowns you can always have a listitem with the text "Select an Option" with a value of "0". Then, in your reset function: $(".DropDownCSSClass").val("0"); — Stan Shaw, Dec 29 '15 at 15:19
Absolutely. I added that to the answer for future readers. Thanks for pointing that out @StanShaw — Shyju, Dec 29 '15 at 15:23

David Thomas · Answer 2 · 2015-12-29T15:25:40.600

2

Simply use HTML the way it's meant to be used, and take advantage of the reset button:

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

This requires no JavaScript, no additional functionality, and is a native component of HTML forms. Using type="button" gives the element the appearance of a button, but strips the default functionality; using type="reset" gives the appearance of a button and gives the default functionality of resetting the parent <form> element to its default page-load state.

References:

<input> element type attribute-values.

edited Dec 29 '15 at 15:25

answered Dec 29 '15 at 15:20

David Thomas

249,100
51
377
410

1

It's possible that he may not want to clear out every single field on his form. – Stan Shaw Dec 29 '15 at 15:23
It is, but if so that should be mentioned in the question (I'll happily add additional information that I might think is beneficial, but I'm not a fan of guessing what the OP wants). – David Thomas Dec 29 '15 at 15:25
Correct - I was just pointing out that input type="reset" will reset all of your form fields for clarity's sake. I prefer to use classes and jQuery since the code is minimal and is infinitely more flexible. Good answer, though! – Stan Shaw Dec 29 '15 at 15:27

score 0 · Answer 3 · answered Dec 29 '15 at 15:19

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

use reset type of button or call reset method on form as below

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

How to reset form fields the elegant way with javascript or jquery?

3 Answers3