Clear form fields with jQuery

Question

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?

Answer 1

For jQuery 1.6+ version, you can try using the code given below :

$(':input','#myform')

  .not(':button, :submit, :reset, :hidden')

  .val('')

  .prop('checked', false)

  .prop('selected', false);

For more jQuery related information, refer to this document: https://api.jquery.com/attr/

For jQuery < 1.6 version, use this code:

$(':input','#myform')

  .not(':button, :submit, :reset, :hidden')

  .val('')

  .removeAttr('checked')

  .removeAttr('selected');

Refer to this document: Resetting a multi-stage form with jQuery

Or, use this code:

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

According to jQuery:

To retrieve and change the DOM properties such as the checked, selected, or disabled state of form elements, you can use the .prop() method.

Answer 2

If we want to clear the input form fields, jQuery provides a method named ".val()"

This method can used to set the input fields to an empty string.

$('#userForm').find('input[type="text"], input[type="text"], textarea').val(' '); 

Using the .val() method we have set the fields to an empty string. 

This way the form fields are cleared.