Reset all inputs of a form to default values without reloading

Question

I want to reset all the values of my inputs that I have within a form (textboxs, selects, checkboxs, radiobuttons,...) like if I reload the web, but when I touch a button.

$("#button").click(function () {
     //Here the code that I need   
});

Answer 1

You can reset a form using JavaScript built-in reset() function:

$("#otra").click(function () {
    $("#yourFormId")[0].reset();
});

Working demo:

$("#otra").click(function () {
  $("#yourFormId")[0].reset();
  return false; // prevent submitting
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="yourFormId">
  <input type="checkbox" name="myCB"/>
  <input type="text" name="myTB" value=""/>
  
  <button id="otra">Reset</button>
</form>

Answer 2

You can do it this way

$('input, textarea').val('');
$('select').find('option').prop("selected", false);

Answer 3

you can reset the complete form using this code

$('#myForm').trigger("reset");

Answer 4

Try this:

$('form[name="myform"]')[0].reset();

Answer 5

My page preserves fields during post back, reset() doesn't remove them.

This helped me: https://stackoverflow.com/questions/6364289/clear-form-fields-with-jquery

$(".reset").click(function() {
    $(this).closest('form').find("input[type=text], textarea").val("");    
});

Other types can be added.