jQuery: Reset & Clear Form

Reset Form

$(':input','#myform')
  .not(':button, :submit, :reset, :hidden')
  .val('')
  .prop('checked', false)
  .prop('selected', false);

or

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

to avoid removing checkbox values, I used the following, inspired by your answer: $(':input').not(':button, :submit, :reset, :hidden').removeAttr('checked').removeAttr('selected').not(':checkbox, select').val('').removeAttr('value');. It will remove default values (i.e. value="something", but not for checkboxes or selects.

***

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

***

This won’t handle cases where form input fields have non empty default values.

Something like should work

$('yourdiv').find('form')[0].reset();

***

Clear (nothing left) vs Reset (back to previous state)

$(function() {

    $(".clear-btn").click(function() {
        $(':input', '#form1')
        .not(':button, :submit, :reset, :hidden')
        .val('')
        .prop('checked', false)
        .prop('selected', false);
    });

    $(".reset-btn").click(function() {
        $("#form1").trigger('reset');
    });

});

***

Simple but works like a charm.

$("#form").trigger('reset'); //jquery
document.getElementById("myform").reset(); //native JS

***

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