CODEWITHSUNDEEP
javascriptjquery
Thorsten
Thorsten

Reputation: 233

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

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

Upvotes: 0

Views: 3890

Answers (3)

David Thomas
David Thomas

Reputation: 253308

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:

Upvotes: 2

Shyju
Shyju

Reputation: 218702

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

});

Upvotes: 2

Akshey Bhat
Akshey Bhat

Reputation: 8545

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

Upvotes: 0

Related Questions