Clear form fields with jQuery

user_384293 0
Viewed 1027107

I want to clear all input and textarea fields in a form. It works like the following when using an input button with the reset class:

$(".reset").bind("click", function() {
  $("input[type=text], textarea").val("");
});

This will clear all fields on the page, not just the ones from the form. How would my selector look like for just the form the actual reset button lives in?

forms html jquery
30 Answers

By using a combination of JQuery's .trigger() and native Javascripts's .reset() all form elements can be reset to blank state.

$(".reset").click(function(){
    $("#<form_id>").trigger("reset");
});

Replace <form_id> with id of form to reset.

user_114758460

Some of you were complaining that radios and such are cleared of default "checked" status... All you have to do is add the :radio, :checkbox selectors to the .not and the problem is solved.

If you can't get all the other reset functions to work, this one will.

  • Adapted from ngen's answer

    function form_reset(formID){
    $(':input','#'+formID)
    .not(':button',':submit',':reset',':hidden',':radio',':checkbox')
    .val('');
}
user_32871930 
$(document).ready(function() {
    $('#reset').click(function() {
    $('#compose_form').find("input[type=text] , textarea ").each(function() {
    $(this).val('');
   });
  });
});
user_67941930

The following code clear all the form and it's fields will be empty. If you want to clear only a particular form if the page is having more than one form, please mention the id or class of the form

$("body").find('form').find('input,  textarea').val('');
user_7622560
Related